From 1940fbe14b2407d99439c023627fb02cd950fe6e Mon Sep 17 00:00:00 2001
From: Troy Morehouse <troymore@nbnet.nb.ca>
Date: Thu, 28 Nov 2019 21:03:15 -0400
Subject: [PATCH 01/17] feat(b-row): add Bootstrap v4.4 row columns support

---
 src/components/layout/row.js | 139 +++++++++++++++++++++++++----------
 1 file changed, 100 insertions(+), 39 deletions(-)

diff --git a/src/components/layout/row.js b/src/components/layout/row.js
index 3fdbf6d997b..8c4e624a8fc 100644
--- a/src/components/layout/row.js
+++ b/src/components/layout/row.js
@@ -1,53 +1,114 @@
 import Vue from '../../utils/vue'
 import { mergeData } from 'vue-functional-data-merge'
+import identity from '../../utils/identity'
+import memoize from '../../utils/memoize'
+import suffixPropName from '../../utils/suffix-prop-name'
 import { arrayIncludes } from '../../utils/array'
+import { getBreakpointsUpCached } from '../../utils/config'
+import { isUndefinedOrNull } from '../../utils/inspect'
+import { keys, create } from '../../utils/object'
+import { lowerCase, toString } from '../../utils/string'
 
 const COMMON_ALIGNMENT = ['start', 'end', 'center']
 
-export const props = {
-  tag: {
-    type: String,
-    default: 'div'
-  },
-  noGutters: {
-    type: Boolean,
-    default: false
-  },
-  alignV: {
-    type: String,
-    default: null,
-    validator: str => arrayIncludes(COMMON_ALIGNMENT.concat(['baseline', 'stretch']), str)
-  },
-  alignH: {
-    type: String,
-    default: null,
-    validator: str => arrayIncludes(COMMON_ALIGNMENT.concat(['between', 'around']), str)
-  },
-  alignContent: {
-    type: String,
-    default: null,
-    validator: str => arrayIncludes(COMMON_ALIGNMENT.concat(['between', 'around', 'stretch']), str)
+// Generates a prop object with a type of `[String, Number]`
+const strNum = () => ({
+  type: [String, Number],
+  default: null
+})
+
+// Compute a row-cols-{breakpoint}-{cols} class name
+// Memoized function for better performance on generating class names
+const computeRowColsClass = memoize((breakpoint, cols) => {
+  cols = trim(toString(cols))
+  if (!cols) {
+    return undefined
+  }
+  return lowerCase(['row-cols', breakpoint, cols].filter(identity).join('-'))
+})
+
+// Get the breakpoint name from the rowCols prop name
+// Memoized function for better performance on generating breakpoint names
+const computeRowColsBreakpoint = memoize(prop => lowerCase(prop.replace('rowCols', '')))
+
+// Cached copy of the row-cols breakpoint prop names
+// Will be populated when the props are generated
+let rowColsPropList = []
+
+// Lazy evaled props factory for BRow (called only once,
+// the first time the component is used)
+const generateProps = () => {
+  // Grab the breakpoints from the cached config (including the '' (xs) breakpoint)
+  const breakpoints = getBreakpointsUpCached()
+
+  // Supports classes like: .row-cols, row-cols-md, .row-cols-xl
+  const rowColsProps = breakpoints.reduce((props, breakpoint) => {
+    props[suffixPropName('rowCols', breakpoint)] = strNum()
+    return props
+  }, create(null))
+
+  // Cache the row-cols prop names
+  rowColsPropList = keys(rowColsProps)
+
+  // Return the generated props
+  return {
+    tag: {
+      type: String,
+      default: 'div'
+    },
+    noGutters: {
+      type: Boolean,
+      default: false
+    },
+    alignV: {
+      type: String,
+      default: null,
+      validator: str => arrayIncludes(COMMON_ALIGNMENT.concat(['baseline', 'stretch']), str)
+    },
+    alignH: {
+      type: String,
+      default: null,
+      validator: str => arrayIncludes(COMMON_ALIGNMENT.concat(['between', 'around']), str)
+    },
+    alignContent: {
+      type: String,
+      default: null,
+      validator: str => arrayIncludes(COMMON_ALIGNMENT.concat(['between', 'around', 'stretch']), str)
+    },
+    ...rowColsProps
   }
 }
 
+// We do not use Vue.extend here as that would evaluate the props
+// immediately, which we do not want to happen
 // @vue/component
-export const BRow = /*#__PURE__*/ Vue.extend({
+export const BRow = {
   name: 'BRow',
   functional: true,
-  props,
+  get props() {
+    // Allow props to be lazy evaled on first access and
+    // then they become a non-getter afterwards.
+    // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/get#Smart_self-overwriting_lazy_getters
+    delete this.props
+    // eslint-disable-next-line no-return-assign
+    return (this.props = generateProps())
+  },
   render(h, { props, data, children }) {
-    return h(
-      props.tag,
-      mergeData(data, {
-        staticClass: 'row',
-        class: {
-          'no-gutters': props.noGutters,
-          [`align-items-${props.alignV}`]: props.alignV,
-          [`justify-content-${props.alignH}`]: props.alignH,
-          [`align-content-${props.alignContent}`]: props.alignContent
-        }
-      }),
-      children
-    )
+    const classList = []
+    // Loop through row-cols breakpoint props and generate the classes
+    rowColsPropList.forEach(prop => {
+      const c = computeRowColsClass(computeRowColsBreakpoint(prop), props[prop])
+      // If a class is returned, push it onto the array.
+      if (c) {
+        classList.push(c)
+      }
+    })
+    classList.push({
+      'no-gutters': props.noGutters,
+      [`align-items-${props.alignV}`]: props.alignV,
+      [`justify-content-${props.alignH}`]: props.alignH,
+      [`align-content-${props.alignContent}`]: props.alignContent
+    })
+    return h(props.tag, mergeData(data, { staticClass: 'row', class: classList }), children)
   }
-})
+}

From 42bca054e90c5ba4a3c6fbbd243f5e202c023c1e Mon Sep 17 00:00:00 2001
From: Troy Morehouse <troymore@nbnet.nb.ca>
Date: Thu, 28 Nov 2019 21:13:37 -0400
Subject: [PATCH 02/17] Update row.js

---
 src/components/layout/row.js | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/layout/row.js b/src/components/layout/row.js
index 8c4e624a8fc..115c91b17a8 100644
--- a/src/components/layout/row.js
+++ b/src/components/layout/row.js
@@ -1,4 +1,3 @@
-import Vue from '../../utils/vue'
 import { mergeData } from 'vue-functional-data-merge'
 import identity from '../../utils/identity'
 import memoize from '../../utils/memoize'
@@ -7,7 +6,7 @@ import { arrayIncludes } from '../../utils/array'
 import { getBreakpointsUpCached } from '../../utils/config'
 import { isUndefinedOrNull } from '../../utils/inspect'
 import { keys, create } from '../../utils/object'
-import { lowerCase, toString } from '../../utils/string'
+import { lowerCase, toString, trim } from '../../utils/string'
 
 const COMMON_ALIGNMENT = ['start', 'end', 'center']
 
@@ -29,7 +28,7 @@ const computeRowColsClass = memoize((breakpoint, cols) => {
 
 // Get the breakpoint name from the rowCols prop name
 // Memoized function for better performance on generating breakpoint names
-const computeRowColsBreakpoint = memoize(prop => lowerCase(prop.replace('rowCols', '')))
+const computeRowColsBreakpoint = memoize(prop => lowerCase(prop.replace('cols', '')))
 
 // Cached copy of the row-cols breakpoint prop names
 // Will be populated when the props are generated
@@ -43,7 +42,7 @@ const generateProps = () => {
 
   // Supports classes like: .row-cols, row-cols-md, .row-cols-xl
   const rowColsProps = breakpoints.reduce((props, breakpoint) => {
-    props[suffixPropName('rowCols', breakpoint)] = strNum()
+    props[suffixPropName('cols', breakpoint)] = strNum()
     return props
   }, create(null))
 
@@ -73,7 +72,8 @@ const generateProps = () => {
     alignContent: {
       type: String,
       default: null,
-      validator: str => arrayIncludes(COMMON_ALIGNMENT.concat(['between', 'around', 'stretch']), str)
+      validator:
+        str => arrayIncludes(COMMON_ALIGNMENT.concat(['between', 'around', 'stretch']), str)
     },
     ...rowColsProps
   }

From ac5db1ed3aad2017d71a330ec62ebdf5266333e9 Mon Sep 17 00:00:00 2001
From: Troy Morehouse <troymore@nbnet.nb.ca>
Date: Thu, 28 Nov 2019 21:15:59 -0400
Subject: [PATCH 03/17] Update row.js

---
 src/components/layout/row.js | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/components/layout/row.js b/src/components/layout/row.js
index 115c91b17a8..685ed3be184 100644
--- a/src/components/layout/row.js
+++ b/src/components/layout/row.js
@@ -4,7 +4,6 @@ import memoize from '../../utils/memoize'
 import suffixPropName from '../../utils/suffix-prop-name'
 import { arrayIncludes } from '../../utils/array'
 import { getBreakpointsUpCached } from '../../utils/config'
-import { isUndefinedOrNull } from '../../utils/inspect'
 import { keys, create } from '../../utils/object'
 import { lowerCase, toString, trim } from '../../utils/string'
 
@@ -72,8 +71,8 @@ const generateProps = () => {
     alignContent: {
       type: String,
       default: null,
-      validator:
-        str => arrayIncludes(COMMON_ALIGNMENT.concat(['between', 'around', 'stretch']), str)
+      validator: str =>
+        arrayIncludes(COMMON_ALIGNMENT.concat(['between', 'around', 'stretch']), str)
     },
     ...rowColsProps
   }

From 75d42d8151d89270f4c7d8a99abe78b6ad49efbe Mon Sep 17 00:00:00 2001
From: Troy Morehouse <troymore@nbnet.nb.ca>
Date: Thu, 28 Nov 2019 21:52:51 -0400
Subject: [PATCH 04/17] Update row.js

---
 src/components/layout/row.js | 7 ++-----
 1 file changed, 2 insertions(+), 5 deletions(-)

diff --git a/src/components/layout/row.js b/src/components/layout/row.js
index 685ed3be184..e57935161b3 100644
--- a/src/components/layout/row.js
+++ b/src/components/layout/row.js
@@ -19,14 +19,11 @@ const strNum = () => ({
 // Memoized function for better performance on generating class names
 const computeRowColsClass = memoize((breakpoint, cols) => {
   cols = trim(toString(cols))
-  if (!cols) {
-    return undefined
-  }
-  return lowerCase(['row-cols', breakpoint, cols].filter(identity).join('-'))
+  return cols ? lowerCase(['row-cols', breakpoint, cols].filter(identity).join('-')) : null
 })
 
 // Get the breakpoint name from the rowCols prop name
-// Memoized function for better performance on generating breakpoint names
+// Memoized function for better performance on extracting breakpoint names
 const computeRowColsBreakpoint = memoize(prop => lowerCase(prop.replace('cols', '')))
 
 // Cached copy of the row-cols breakpoint prop names

From 63bf809ddf46f8066040297c264b836a74aef77a Mon Sep 17 00:00:00 2001
From: Troy Morehouse <troymore@nbnet.nb.ca>
Date: Thu, 28 Nov 2019 21:59:12 -0400
Subject: [PATCH 05/17] Update row.spec.js

---
 src/components/layout/row.spec.js | 47 +++++++++++++++++++++++++++++++
 1 file changed, 47 insertions(+)

diff --git a/src/components/layout/row.spec.js b/src/components/layout/row.spec.js
index bdeed6c3894..87d6e15ec58 100644
--- a/src/components/layout/row.spec.js
+++ b/src/components/layout/row.spec.js
@@ -88,4 +88,51 @@ describe('layout > row', () => {
     expect(wrapper.classes()).toContain('align-content-stretch')
     expect(wrapper.classes().length).toBe(2)
   })
+
+  it('has class row-cols-6 when prop cols is set to 6', async () => {
+    const wrapper = mount(BRow, {
+      propsData: {
+        cols: 6
+      }
+    })
+
+    expect(wrapper.is('div')).toBe(true)
+    expect(wrapper.classes()).toContain('row')
+    expect(wrapper.classes()).toContain('row-cols-6')
+    expect(wrapper.classes().length).toBe(2)
+  })
+
+  it('has class row-cols-md-3 when prop cols-md is set to 3', async () => {
+    const wrapper = mount(BRow, {
+      propsData: {
+        colsMd: '3'
+      }
+    })
+
+    expect(wrapper.is('div')).toBe(true)
+    expect(wrapper.classes()).toContain('row')
+    expect(wrapper.classes()).toContain('row-cols-md-3')
+    expect(wrapper.classes().length).toBe(2)
+  })
+
+  it('all cols-* props work', async () => {
+    const wrapper = mount(BRow, {
+      propsData: {
+        cols: 1,
+        colsSm: 2,
+        colsMd: 3,
+        colsLg: 4,
+        colsXl: 5        
+      }
+    })
+
+    expect(wrapper.is('div')).toBe(true)
+    expect(wrapper.classes()).toContain('row')
+    expect(wrapper.classes()).toContain('row-cols-1')
+    expect(wrapper.classes()).toContain('row-cols-sm-2')
+    expect(wrapper.classes()).toContain('row-cols-md-3')
+    expect(wrapper.classes()).toContain('row-cols-lg-4')
+    expect(wrapper.classes()).toContain('row-cols-xl-5')
+    expect(wrapper.classes().length).toBe(6)
+  })
 })

From e9558ae90b69e3369df7fa861cbe713ca3bc48ee Mon Sep 17 00:00:00 2001
From: Troy Morehouse <troymore@nbnet.nb.ca>
Date: Thu, 28 Nov 2019 22:02:04 -0400
Subject: [PATCH 06/17] Update row.spec.js

---
 src/components/layout/row.spec.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/layout/row.spec.js b/src/components/layout/row.spec.js
index 87d6e15ec58..f4423608374 100644
--- a/src/components/layout/row.spec.js
+++ b/src/components/layout/row.spec.js
@@ -122,7 +122,7 @@ describe('layout > row', () => {
         colsSm: 2,
         colsMd: 3,
         colsLg: 4,
-        colsXl: 5        
+        colsXl: 5
       }
     })
 

From 537e7a1d95a20628f8dba290041eb2f5cf01d699 Mon Sep 17 00:00:00 2001
From: Troy Morehouse <troymore@nbnet.nb.ca>
Date: Thu, 28 Nov 2019 22:13:40 -0400
Subject: [PATCH 07/17] Update row.js

---
 src/components/layout/row.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/layout/row.js b/src/components/layout/row.js
index e57935161b3..db97a39e52c 100644
--- a/src/components/layout/row.js
+++ b/src/components/layout/row.js
@@ -36,9 +36,9 @@ const generateProps = () => {
   // Grab the breakpoints from the cached config (including the '' (xs) breakpoint)
   const breakpoints = getBreakpointsUpCached()
 
-  // Supports classes like: .row-cols, row-cols-md, .row-cols-xl
+  // Supports classes like: .row-cols-2, row-cols-md-4, .row-cols-xl-6
   const rowColsProps = breakpoints.reduce((props, breakpoint) => {
-    props[suffixPropName('cols', breakpoint)] = strNum()
+    props[suffixPropName(breakpoint, 'cols')] = strNum()
     return props
   }, create(null))
 

From 581939f4b5386527d3b66af0a0060aba6ccec50c Mon Sep 17 00:00:00 2001
From: Troy Morehouse <troymore@nbnet.nb.ca>
Date: Thu, 28 Nov 2019 23:23:04 -0400
Subject: [PATCH 08/17] Update README.md

---
 src/components/layout/README.md | 99 ++++++++++++++++++++++++++++++---
 1 file changed, 90 insertions(+), 9 deletions(-)

diff --git a/src/components/layout/README.md b/src/components/layout/README.md
index cf89141653e..32415db2738 100644
--- a/src/components/layout/README.md
+++ b/src/components/layout/README.md
@@ -70,11 +70,11 @@ like the
 
 ## Containers `<b-container>`
 
-Containers (`<b-container>`) are the most basic layout element in Bootstrap and is **required when
-using the grid system**. Choose from a responsive, fixed-width container (meaning its max-width
-changes at each breakpoint) by default, or fluid-width (meaning it's 100% wide all the time) by
-setting 'fluid' prop, or responsive containers where the container is fluid up until a specific
-breakpoint.
+Containers (`<b-container>`) are the most basic layout element in Bootstrap. Choose from a
+responsive, fixed-width container (meaning its max-width changes at each breakpoint) by default,
+or fluid-width (meaning it's 100% wide all the time) by setting 'fluid' prop, or responsive
+containers where the container is fluid up until a specific breakpoint (requires Bootstrap CSS
+`v4.4+`).
 
 While containers can be nested, most layouts do not require a nested container.
 
@@ -85,7 +85,7 @@ The default breakpoint widths can be configured using Bootstrap V4.x SCSS variab
 ### Default container
 
 The default `<b-container>` is a responsive, fixed-width container, meaning its `max-width` changes
-at each breakpoint.
+at each viewport width breakpoint.
 
 ```html
 <b-container>
@@ -109,7 +109,7 @@ Setting the `fluid` prop to true (or an empty string) is equivalent to the Boots
 
 ### Responsive fluid containers
 
-<span class="badge badge-warning small">Requires Bootstrap v4.4+ CSS</span>
+<span class="badge badge-info small">Requires Bootstrap v4.4+ CSS</span>
 
 Responsive containers are new in Bootstrap v4.4. They allow you to specify a container that is 100%
 wide (fluid) until particular breakpoint is reached at which point a `max-width` is applied. For
@@ -137,8 +137,9 @@ Setting the fluid prop to a breakpoint name translates to the Bootstrap class
 
 ## Rows `<b-row>` and `<b-form-row>`
 
-`<b-row>` components should be placed inside a `<b-container>` component, or an element (such as a
-`<div>`) that has the class `container` or `container-fluid` applied to it.
+Rows are wrappers for [columns](#columns-b-col). Each column has horizontal padding (called a gutter)
+for controlling the space between them. This padding is then counteracted on the rows with negative
+margins. This way, all the content in your columns is visually aligned down the left side.
 
 You can remove the margin from `<b-row>` and padding from `<b-col>` by setting the `no-gutters` prop
 on `<b-row>`.
@@ -622,4 +623,84 @@ within an existing `<b-col>` component. Nested rows should include a set of colu
 <!-- b-grid-nesting.vue -->
 ```
 
+## Row columns
+
+<span class="badge badge-info small">Requires Bootstrap v4.4+ CSS</span>
+
+Use the responsive `cols-*` props in `<b-row>` to quickly set the number of columns that best render
+your content and layout. Whereas normal collum widths are apply to the individual `<b-col>` columns
+(e.g., `<b-col md="4">`), the row columns `col-*` props are set on the parent `<b-row>` as a shortcut.
+
+Use these row columns to quickly create basic grid layouts or to control your card layouts. The default
+maximum number of row columns in Bootstrap v4.4 is `6` (unlike the regular columns which have a default
+maximum of `12` columns)
+
+The value specifed in the `<b-row>` prop(s) is the number of columns to create per row (whereas the
+props on `<b-col>` refer to the number of columns to occupy).
+
+```html
+<b-container class="bv-example-row">
+  <b-row cols="2">
+    <b-col>Column</b-col>
+    <b-col>Column</b-col>
+    <b-col>Column</b-col>
+    <b-col>Column</b-col>
+  </b-row>
+</b-container>
+
+<b-container class="bv-example-row">
+  <b-row cols="3">
+    <b-col>Column</b-col>
+    <b-col>Column</b-col>
+    <b-col>Column</b-col>
+    <b-col>Column</b-col>
+  </b-row>
+</b-container>
+
+<b-container class="bv-example-row">
+  <b-row cols="4">
+    <b-col>Column</b-col>
+    <b-col>Column</b-col>
+    <b-col>Column</b-col>
+    <b-col>Column</b-col>
+  </b-row>
+</b-container>
+
+<b-container class="bv-example-row">
+  <b-row cols="4">
+    <b-col>Column</b-col>
+    <b-col>Column</b-col>
+    <b-col cols="6">Column</b-col>
+    <b-col>Column</b-col>
+  </b-row>
+</b-container>
+
+<!-- b-grid-row-cols-introduction.vue -->
+```
+
+You can control the number of columns at each breakpoint level via the folowing `<b-row>` props:
+
+- `cols` for `xs` and up screens
+- `cols-sm` for `sm` and up screens
+- `cols-md` for `md` and up screens
+- `cols-lg` for `lg` and up screens
+- `cols-xl` for `xl` and up screens
+
+```html
+<b-container class="bv-example-row">
+  <b-row cols="1" cols-sm="2" cols-md="4" cols-lg="6" cols-xl="8">
+    <b-col>Column</b-col>
+    <b-col>Column</b-col>
+    <b-col>Column</b-col>
+    <b-col>Column</b-col>
+    <b-col>Column</b-col>
+    <b-col>Column</b-col>
+    <b-col>Column</b-col>
+    <b-col>Column</b-col>
+  </b-row>
+</b-container>
+
+<!-- b-grid-row-cols-breakpoints.vue -->
+```
+
 <!-- Component reference added automatically from component package.json -->

From 2416198e35721f86a003f5020e715e6fb1236be6 Mon Sep 17 00:00:00 2001
From: Troy Morehouse <troymore@nbnet.nb.ca>
Date: Thu, 28 Nov 2019 23:25:55 -0400
Subject: [PATCH 09/17] Update package.json

---
 src/components/layout/package.json | 25 +++++++++++++++++++++++++
 1 file changed, 25 insertions(+)

diff --git a/src/components/layout/package.json b/src/components/layout/package.json
index 1c95fa424d3..2a690c3649e 100644
--- a/src/components/layout/package.json
+++ b/src/components/layout/package.json
@@ -33,6 +33,31 @@
           {
             "prop": "alignContent",
             "description": "Align columns items together on the cross axis: 'start', 'center', 'end', 'around', 'between' or 'stretch'. Has no effect on single rows of items"
+          },
+          {
+            "prop": "cols",
+            "version": "2.2.0"
+            "description": "The number row columns to create at the 'xs' breakpoint"
+          },
+          {
+            "prop": "cols-sm",
+            "version": "2.2.0"
+            "description": "The number row columns to create at the 'sm' breakpoint"
+          },
+          {
+            "prop": "cols-md",
+            "version": "2.2.0"
+            "description": "The number row columns to create at the 'md' breakpoint"
+          },
+          {
+            "prop": "cols-lg",
+            "version": "2.2.0"
+            "description": "The number row columns to create at the 'lg' breakpoint"
+          },
+          {
+            "prop": "cols-xl",
+            "version": "2.2.0"
+            "description": "The number row columns to create at the 'xl' breakpoint"
           }
         ]
       },

From 49b4668f0668673f06a1c1ec7c688114fed161a3 Mon Sep 17 00:00:00 2001
From: Troy Morehouse <troymore@nbnet.nb.ca>
Date: Thu, 28 Nov 2019 23:29:03 -0400
Subject: [PATCH 10/17] Update package.json

---
 src/components/layout/package.json | 20 ++++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/src/components/layout/package.json b/src/components/layout/package.json
index 2a690c3649e..ac78776106a 100644
--- a/src/components/layout/package.json
+++ b/src/components/layout/package.json
@@ -36,28 +36,28 @@
           },
           {
             "prop": "cols",
-            "version": "2.2.0"
-            "description": "The number row columns to create at the 'xs' breakpoint"
+            "version": "2.2.0",
+            "description": "The number row columns to create at the 'xs' breakpoint. Requires Bootstrap v4.4 CSS"
           },
           {
             "prop": "cols-sm",
-            "version": "2.2.0"
-            "description": "The number row columns to create at the 'sm' breakpoint"
+            "version": "2.2.0",
+            "description": "The number row columns to create at the 'sm' breakpoint. Requires Bootstrap v4.4 CSS"
           },
           {
             "prop": "cols-md",
-            "version": "2.2.0"
-            "description": "The number row columns to create at the 'md' breakpoint"
+            "version": "2.2.0",
+            "description": "The number row columns to create at the 'md' breakpoint. Requires Bootstrap v4.4 CSS"
           },
           {
             "prop": "cols-lg",
-            "version": "2.2.0"
-            "description": "The number row columns to create at the 'lg' breakpoint"
+            "version": "2.2.0",
+            "description": "The number row columns to create at the 'lg' breakpoint. Requires Bootstrap v4.4 CSS"
           },
           {
             "prop": "cols-xl",
-            "version": "2.2.0"
-            "description": "The number row columns to create at the 'xl' breakpoint"
+            "version": "2.2.0",
+            "description": "The number row columns to create at the 'xl' breakpoint. Requires Bootstrap v4.4 CSS"
           }
         ]
       },

From 2579dbe277cc1ae484a30aefa24e0e4dc8512f6b Mon Sep 17 00:00:00 2001
From: Troy Morehouse <troymore@nbnet.nb.ca>
Date: Thu, 28 Nov 2019 23:33:32 -0400
Subject: [PATCH 11/17] Update col.js

---
 src/components/layout/col.js | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/components/layout/col.js b/src/components/layout/col.js
index 52e06faf495..64247fadea8 100644
--- a/src/components/layout/col.js
+++ b/src/components/layout/col.js
@@ -3,9 +3,10 @@ import identity from '../../utils/identity'
 import memoize from '../../utils/memoize'
 import suffixPropName from '../../utils/suffix-prop-name'
 import { arrayIncludes } from '../../utils/array'
+import { getBreakpointsUpCached } from '../../utils/config'
 import { isUndefinedOrNull } from '../../utils/inspect'
 import { keys, assign, create } from '../../utils/object'
-import { getBreakpointsUpCached } from '../../utils/config'
+import { lowerCase } from '../../utils/object'
 
 const RX_COL_CLASS = /^col-/
 
@@ -35,11 +36,11 @@ const computeBreakpoint = (type, breakpoint, val) => {
   // Since the default is false, an empty string indicates the prop's presence.
   if (type === 'col' && (val === '' || val === true)) {
     // .col-md
-    return className.toLowerCase()
+    return lowerCase(className)
   }
   // .order-md-6
   className += `-${val}`
-  return className.toLowerCase()
+  return lowerCase(className)
 }
 
 // Memoized function for better performance on generating class names

From 5961f2af8ba4dd6ed176f940005274cc20765cb5 Mon Sep 17 00:00:00 2001
From: Troy Morehouse <troymore@nbnet.nb.ca>
Date: Thu, 28 Nov 2019 23:35:36 -0400
Subject: [PATCH 12/17] Update col.js

---
 src/components/layout/col.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/layout/col.js b/src/components/layout/col.js
index 64247fadea8..69b2714edc2 100644
--- a/src/components/layout/col.js
+++ b/src/components/layout/col.js
@@ -6,7 +6,7 @@ import { arrayIncludes } from '../../utils/array'
 import { getBreakpointsUpCached } from '../../utils/config'
 import { isUndefinedOrNull } from '../../utils/inspect'
 import { keys, assign, create } from '../../utils/object'
-import { lowerCase } from '../../utils/object'
+import { lowerCase } from '../../utils/string'
 
 const RX_COL_CLASS = /^col-/
 

From ef19617a7e984dc9425399ef8ba65cfeabdd2841 Mon Sep 17 00:00:00 2001
From: Troy Morehouse <troymore@nbnet.nb.ca>
Date: Fri, 29 Nov 2019 00:01:13 -0400
Subject: [PATCH 13/17] Update package.json

---
 src/components/layout/package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/layout/package.json b/src/components/layout/package.json
index ac78776106a..aee1f441a30 100644
--- a/src/components/layout/package.json
+++ b/src/components/layout/package.json
@@ -11,7 +11,7 @@
         "props": [
           {
             "prop": "fluid",
-            "description": "When set to true, makes the row 100% wide all the time, or set to one of the Bootstrap breakpoint names for 100% width up to the breakpoint"
+            "description": "When set to true, makes the row 100% wide all the time, or set to one of the Bootstrap breakpoint names for 100% width up to the breakpoint (requires Bootstrap v4.4+ CSS for breakpoint specific value)"
           }
         ]
       },

From 18cf11d73d7ffc9fde204913803fc8b49c7fe9b8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jacob=20M=C3=BCller?= <jacob.mueller.elz@gmail.com>
Date: Fri, 29 Nov 2019 10:28:46 +0100
Subject: [PATCH 14/17] Minor tweaks

---
 src/components/layout/README.md | 28 ++++++++++++++--------------
 src/components/layout/col.js    |  2 +-
 src/components/layout/row.js    | 22 +++++++++++-----------
 3 files changed, 26 insertions(+), 26 deletions(-)

diff --git a/src/components/layout/README.md b/src/components/layout/README.md
index 32415db2738..26e21f9a769 100644
--- a/src/components/layout/README.md
+++ b/src/components/layout/README.md
@@ -71,10 +71,9 @@ like the
 ## Containers `<b-container>`
 
 Containers (`<b-container>`) are the most basic layout element in Bootstrap. Choose from a
-responsive, fixed-width container (meaning its max-width changes at each breakpoint) by default,
-or fluid-width (meaning it's 100% wide all the time) by setting 'fluid' prop, or responsive
-containers where the container is fluid up until a specific breakpoint (requires Bootstrap CSS
-`v4.4+`).
+responsive, fixed-width container (meaning its max-width changes at each breakpoint) by default, or
+fluid-width (meaning it's 100% wide all the time) by setting 'fluid' prop, or responsive containers
+where the container is fluid up until a specific breakpoint (requires Bootstrap CSS `v4.4+`).
 
 While containers can be nested, most layouts do not require a nested container.
 
@@ -137,9 +136,9 @@ Setting the fluid prop to a breakpoint name translates to the Bootstrap class
 
 ## Rows `<b-row>` and `<b-form-row>`
 
-Rows are wrappers for [columns](#columns-b-col). Each column has horizontal padding (called a gutter)
-for controlling the space between them. This padding is then counteracted on the rows with negative
-margins. This way, all the content in your columns is visually aligned down the left side.
+Rows are wrappers for [columns](#columns-b-col). Each column has horizontal padding (called a
+gutter) for controlling the space between them. This padding is then counteracted on the rows with
+negative margins. This way, all the content in your columns is visually aligned down the left side.
 
 You can remove the margin from `<b-row>` and padding from `<b-col>` by setting the `no-gutters` prop
 on `<b-row>`.
@@ -628,14 +627,15 @@ within an existing `<b-col>` component. Nested rows should include a set of colu
 <span class="badge badge-info small">Requires Bootstrap v4.4+ CSS</span>
 
 Use the responsive `cols-*` props in `<b-row>` to quickly set the number of columns that best render
-your content and layout. Whereas normal collum widths are apply to the individual `<b-col>` columns
-(e.g., `<b-col md="4">`), the row columns `col-*` props are set on the parent `<b-row>` as a shortcut.
+your content and layout. Whereas normal column widths are apply to the individual `<b-col>` columns
+(e.g., `<b-col md="4">`), the row columns `col-*` props are set on the parent `<b-row>` as a
+shortcut.
 
-Use these row columns to quickly create basic grid layouts or to control your card layouts. The default
-maximum number of row columns in Bootstrap v4.4 is `6` (unlike the regular columns which have a default
-maximum of `12` columns)
+Use these row columns to quickly create basic grid layouts or to control your card layouts. The
+default maximum number of row columns in Bootstrap v4.4 is `6` (unlike the regular columns which
+have a default maximum of `12` columns)
 
-The value specifed in the `<b-row>` prop(s) is the number of columns to create per row (whereas the
+The value specified in the `<b-row>` prop(s) is the number of columns to create per row (whereas the
 props on `<b-col>` refer to the number of columns to occupy).
 
 ```html
@@ -678,7 +678,7 @@ props on `<b-col>` refer to the number of columns to occupy).
 <!-- b-grid-row-cols-introduction.vue -->
 ```
 
-You can control the number of columns at each breakpoint level via the folowing `<b-row>` props:
+You can control the number of columns at each breakpoint level via the following `<b-row>` props:
 
 - `cols` for `xs` and up screens
 - `cols-sm` for `sm` and up screens
diff --git a/src/components/layout/col.js b/src/components/layout/col.js
index 69b2714edc2..c10b1de2beb 100644
--- a/src/components/layout/col.js
+++ b/src/components/layout/col.js
@@ -5,7 +5,7 @@ import suffixPropName from '../../utils/suffix-prop-name'
 import { arrayIncludes } from '../../utils/array'
 import { getBreakpointsUpCached } from '../../utils/config'
 import { isUndefinedOrNull } from '../../utils/inspect'
-import { keys, assign, create } from '../../utils/object'
+import { assign, create, keys } from '../../utils/object'
 import { lowerCase } from '../../utils/string'
 
 const RX_COL_CLASS = /^col-/
diff --git a/src/components/layout/row.js b/src/components/layout/row.js
index db97a39e52c..337d7c107ec 100644
--- a/src/components/layout/row.js
+++ b/src/components/layout/row.js
@@ -4,7 +4,7 @@ import memoize from '../../utils/memoize'
 import suffixPropName from '../../utils/suffix-prop-name'
 import { arrayIncludes } from '../../utils/array'
 import { getBreakpointsUpCached } from '../../utils/config'
-import { keys, create } from '../../utils/object'
+import { create, keys } from '../../utils/object'
 import { lowerCase, toString, trim } from '../../utils/string'
 
 const COMMON_ALIGNMENT = ['start', 'end', 'center']
@@ -15,28 +15,28 @@ const strNum = () => ({
   default: null
 })
 
-// Compute a row-cols-{breakpoint}-{cols} class name
+// Compute a `row-cols-{breakpoint}-{cols}` class name
 // Memoized function for better performance on generating class names
 const computeRowColsClass = memoize((breakpoint, cols) => {
   cols = trim(toString(cols))
   return cols ? lowerCase(['row-cols', breakpoint, cols].filter(identity).join('-')) : null
 })
 
-// Get the breakpoint name from the rowCols prop name
+// Get the breakpoint name from the `rowCols` prop name
 // Memoized function for better performance on extracting breakpoint names
 const computeRowColsBreakpoint = memoize(prop => lowerCase(prop.replace('cols', '')))
 
-// Cached copy of the row-cols breakpoint prop names
+// Cached copy of the `row-cols` breakpoint prop names
 // Will be populated when the props are generated
 let rowColsPropList = []
 
-// Lazy evaled props factory for BRow (called only once,
+// Lazy evaled props factory for <b-row> (called only once,
 // the first time the component is used)
 const generateProps = () => {
   // Grab the breakpoints from the cached config (including the '' (xs) breakpoint)
   const breakpoints = getBreakpointsUpCached()
 
-  // Supports classes like: .row-cols-2, row-cols-md-4, .row-cols-xl-6
+  // Supports classes like: `row-cols-2`, r`ow-cols-md-4`, `row-cols-xl-6`
   const rowColsProps = breakpoints.reduce((props, breakpoint) => {
     props[suffixPropName(breakpoint, 'cols')] = strNum()
     return props
@@ -75,7 +75,7 @@ const generateProps = () => {
   }
 }
 
-// We do not use Vue.extend here as that would evaluate the props
+// We do not use `Vue.extend()` here as that would evaluate the props
 // immediately, which we do not want to happen
 // @vue/component
 export const BRow = {
@@ -83,18 +83,18 @@ export const BRow = {
   functional: true,
   get props() {
     // Allow props to be lazy evaled on first access and
-    // then they become a non-getter afterwards.
+    // then they become a non-getter afterwards
     // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/get#Smart_self-overwriting_lazy_getters
     delete this.props
-    // eslint-disable-next-line no-return-assign
-    return (this.props = generateProps())
+    this.props = generateProps()
+    return this.props
   },
   render(h, { props, data, children }) {
     const classList = []
     // Loop through row-cols breakpoint props and generate the classes
     rowColsPropList.forEach(prop => {
       const c = computeRowColsClass(computeRowColsBreakpoint(prop), props[prop])
-      // If a class is returned, push it onto the array.
+      // If a class is returned, push it onto the array
       if (c) {
         classList.push(c)
       }

From 715acd61b447a416506355e2355180834b37d272 Mon Sep 17 00:00:00 2001
From: Troy Morehouse <troymore@nbnet.nb.ca>
Date: Fri, 29 Nov 2019 11:13:53 -0400
Subject: [PATCH 15/17] Update row.js

---
 src/components/layout/row.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/layout/row.js b/src/components/layout/row.js
index 337d7c107ec..a204c839881 100644
--- a/src/components/layout/row.js
+++ b/src/components/layout/row.js
@@ -36,7 +36,7 @@ const generateProps = () => {
   // Grab the breakpoints from the cached config (including the '' (xs) breakpoint)
   const breakpoints = getBreakpointsUpCached()
 
-  // Supports classes like: `row-cols-2`, r`ow-cols-md-4`, `row-cols-xl-6`
+  // Supports classes like: `row-cols-2`, `row-cols-md-4`, `row-cols-xl-6`
   const rowColsProps = breakpoints.reduce((props, breakpoint) => {
     props[suffixPropName(breakpoint, 'cols')] = strNum()
     return props

From d023e3f1c938f60f8907610202afe78883b11782 Mon Sep 17 00:00:00 2001
From: Troy Morehouse <troymore@nbnet.nb.ca>
Date: Fri, 29 Nov 2019 11:24:45 -0400
Subject: [PATCH 16/17] Update package.json

---
 src/components/layout/package.json | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/layout/package.json b/src/components/layout/package.json
index aee1f441a30..79e3b7ad899 100644
--- a/src/components/layout/package.json
+++ b/src/components/layout/package.json
@@ -40,22 +40,22 @@
             "description": "The number row columns to create at the 'xs' breakpoint. Requires Bootstrap v4.4 CSS"
           },
           {
-            "prop": "cols-sm",
+            "prop": "colsSm",
             "version": "2.2.0",
             "description": "The number row columns to create at the 'sm' breakpoint. Requires Bootstrap v4.4 CSS"
           },
           {
-            "prop": "cols-md",
+            "prop": "colsMd",
             "version": "2.2.0",
             "description": "The number row columns to create at the 'md' breakpoint. Requires Bootstrap v4.4 CSS"
           },
           {
-            "prop": "cols-lg",
+            "prop": "colsLg",
             "version": "2.2.0",
             "description": "The number row columns to create at the 'lg' breakpoint. Requires Bootstrap v4.4 CSS"
           },
           {
-            "prop": "cols-xl",
+            "prop": "colsXl",
             "version": "2.2.0",
             "description": "The number row columns to create at the 'xl' breakpoint. Requires Bootstrap v4.4 CSS"
           }

From 0620c9728b55c86a24eb2e06dce330bc152baffa Mon Sep 17 00:00:00 2001
From: Troy Morehouse <troymore@nbnet.nb.ca>
Date: Fri, 29 Nov 2019 11:57:58 -0400
Subject: [PATCH 17/17] minor adjustments to row columns excamples

---
 src/components/layout/README.md | 10 ++++------
 1 file changed, 4 insertions(+), 6 deletions(-)

diff --git a/src/components/layout/README.md b/src/components/layout/README.md
index 26e21f9a769..203e3d7f7ff 100644
--- a/src/components/layout/README.md
+++ b/src/components/layout/README.md
@@ -639,7 +639,7 @@ The value specified in the `<b-row>` prop(s) is the number of columns to create
 props on `<b-col>` refer to the number of columns to occupy).
 
 ```html
-<b-container class="bv-example-row">
+<b-container class="bv-example-row mb-3">
   <b-row cols="2">
     <b-col>Column</b-col>
     <b-col>Column</b-col>
@@ -648,7 +648,7 @@ props on `<b-col>` refer to the number of columns to occupy).
   </b-row>
 </b-container>
 
-<b-container class="bv-example-row">
+<b-container class="bv-example-row mb-3">
   <b-row cols="3">
     <b-col>Column</b-col>
     <b-col>Column</b-col>
@@ -657,7 +657,7 @@ props on `<b-col>` refer to the number of columns to occupy).
   </b-row>
 </b-container>
 
-<b-container class="bv-example-row">
+<b-container class="bv-example-row mb-3">
   <b-row cols="4">
     <b-col>Column</b-col>
     <b-col>Column</b-col>
@@ -688,9 +688,7 @@ You can control the number of columns at each breakpoint level via the following
 
 ```html
 <b-container class="bv-example-row">
-  <b-row cols="1" cols-sm="2" cols-md="4" cols-lg="6" cols-xl="8">
-    <b-col>Column</b-col>
-    <b-col>Column</b-col>
+  <b-row cols="1" cols-sm="2" cols-md="4" cols-lg="6">
     <b-col>Column</b-col>
     <b-col>Column</b-col>
     <b-col>Column</b-col>