{"version":3,"sources":["webpack:///./src/views/core/UiGrid.vue","webpack:///src/views/core/UiGrid.vue","webpack:///./src/views/core/UiGrid.vue?26de","webpack:///./src/views/core/UiGrid.vue?2e69"],"names":["render","_vm","this","_c","_self","attrs","scopedSlots","_u","key","fn","staticClass","_v","proxy","directives","name","rawName","modifiers","staticRenderFns","mounted","core","index","component"],"mappings":"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","file":"js/chunk-2d0bd5e9.4beead1d.js","sourcesContent":["var render = function render(){var _vm=this,_c=_vm._self._c;return _c('b-container',{attrs:{\"fluid\":\"\"}},[_c('b-row',[_c('b-col',{attrs:{\"sm\":\"12\"}},[_c('iq-card',{scopedSlots:_vm._u([{key:\"headerTitle\",fn:function(){return [_c('h4',{staticClass:\"card-title\"},[_vm._v(\"Grid options\")])]},proxy:true},{key:\"body\",fn:function(){return [_c('p',[_vm._v(\"See how aspects of the Bootstrap grid system work across multiple devices with a handy table..\")]),_c('table',{staticClass:\"table table-bordered table-striped\"},[_c('thead',[_c('tr',[_c('th'),_c('th',{staticClass:\"text-center\"},[_vm._v(\" Extra small\"),_c('br'),_c('small',[_vm._v(\"<576px\")])]),_c('th',{staticClass:\"text-center\"},[_vm._v(\" Small\"),_c('br'),_c('small',[_vm._v(\"≥576px\")])]),_c('th',{staticClass:\"text-center\"},[_vm._v(\" Medium\"),_c('br'),_c('small',[_vm._v(\"≥768px\")])]),_c('th',{staticClass:\"text-center\"},[_vm._v(\" Large\"),_c('br'),_c('small',[_vm._v(\"≥992px\")])]),_c('th',{staticClass:\"text-center\"},[_vm._v(\" Extra large\"),_c('br'),_c('small',[_vm._v(\"≥1200px\")])])])]),_c('tbody',[_c('tr',[_c('th',{staticClass:\"text-nowrap text-left\",attrs:{\"scope\":\"row\"}},[_vm._v(\"Max container width\")]),_c('td',[_vm._v(\"None (auto)\")]),_c('td',[_vm._v(\"540px\")]),_c('td',[_vm._v(\"720px\")]),_c('td',[_vm._v(\"960px\")]),_c('td',[_vm._v(\"1140px\")])]),_c('tr',[_c('th',{staticClass:\"text-nowrap text-left\",attrs:{\"scope\":\"row\"}},[_vm._v(\"Prop\")]),_c('td',[_c('code',[_vm._v(\"cols=\\\"*\\\"\")])]),_c('td',[_c('code',[_vm._v(\"sm=\\\"*\\\"\")])]),_c('td',[_c('code',[_vm._v(\"md=\\\"*\\\"\")])]),_c('td',[_c('code',[_vm._v(\"lg=\\\"*\\\"\")])]),_c('td',[_c('code',[_vm._v(\"xl=\\\"*\\\"\")])])]),_c('tr',[_c('th',{staticClass:\"text-nowrap text-left\",attrs:{\"scope\":\"row\"}},[_vm._v(\"# of columns\")]),_c('td',{attrs:{\"colspan\":\"5\"}},[_vm._v(\"12\")])]),_c('tr',[_c('th',{staticClass:\"text-nowrap text-left\",attrs:{\"scope\":\"row\"}},[_vm._v(\"Gutter width\")]),_c('td',{attrs:{\"colspan\":\"5\"}},[_vm._v(\"30px (15px on each side of a column)\")])]),_c('tr',[_c('th',{staticClass:\"text-nowrap text-left\",attrs:{\"scope\":\"row\"}},[_vm._v(\"Nestable\")]),_c('td',{attrs:{\"colspan\":\"5\"}},[_vm._v(\"Yes\")])]),_c('tr',[_c('th',{staticClass:\"text-nowrap text-left\",attrs:{\"scope\":\"row\"}},[_vm._v(\"Offset\")]),_c('td',[_c('code',[_vm._v(\"offset=\\\"*\\\"\")])]),_c('td',[_c('code',[_vm._v(\"offset-sm=\\\"*\\\"\")])]),_c('td',[_c('code',[_vm._v(\"offset-md=\\\"*\\\"\")])]),_c('td',[_c('code',[_vm._v(\"offset-lg=\\\"*\\\"\")])]),_c('td',[_c('code',[_vm._v(\"offset-xl=\\\"*\\\"\")])])]),_c('tr',[_c('th',{staticClass:\"text-nowrap text-left\",attrs:{\"scope\":\"row\"}},[_vm._v(\"Column ordering\")]),_c('td',[_c('code',[_vm._v(\"order=\\\"*\\\"\")])]),_c('td',[_c('code',[_vm._v(\"order-sm=\\\"*\\\"\")])]),_c('td',[_c('code',[_vm._v(\"order-md=\\\"*\\\"\")])]),_c('td',[_c('code',[_vm._v(\"order-lg=\\\"*\\\"\")])]),_c('td',[_c('code',[_vm._v(\"order-xl=\\\"*\\\"\")])])])])])]},proxy:true}])}),_c('iq-card',{scopedSlots:_vm._u([{key:\"headerTitle\",fn:function(){return [_c('h4',{staticClass:\"card-title\"},[_vm._v(\"Equal-width\")])]},proxy:true},{key:\"headerAction\",fn:function(){return [_c('a',{directives:[{name:\"b-toggle\",rawName:\"v-b-toggle.collapse-2\",modifiers:{\"collapse-2\":true}}],staticClass:\"text-primary float-right\",attrs:{\"role\":\"button\"}},[_c('i',{staticClass:\"ri-code-s-slash-line\"})])]},proxy:true},{key:\"body\",fn:function(){return [_c('p',[_vm._v(\"For example, here are two grid layouts that apply to every device and viewport, from \"),_c('code',[_vm._v(\"xs\")]),_vm._v(\" to \"),_c('code',[_vm._v(\"xl\")]),_vm._v(\". Add any number of unit-less classes for each breakpoint you need and every column will be the same width.\")]),_c('b-collapse',{staticClass:\"mb-2\",attrs:{\"id\":\"collapse-2\"}},[_c('div',{staticClass:\"card\"},[_c('kbd',{staticClass:\"bg-dark\"},[_c('pre',{staticClass:\"text-white\",attrs:{\"id\":\"grid-2\"}},[_vm._v(\"                    \"),_c('code',[_vm._v(\"\\n<div class=\\\"iq-example-row\\\">\\n  <b-container fluid>\\n    <!-- Stack the columns on mobile by making one full-width and the other half-width -->\\n    <b-row class=\\\"mb-3\\\">\\n      <b-col cols=\\\"12\\\" md=\\\"8\\\"> cols=\\\"12\\\" md=\\\"8\\\"</b-col>\\n      <b-col cols=\\\"6\\\" md=\\\"4\\\"> cols=\\\"6\\\" md=\\\"4\\\"</b-col>\\n    </b-row>\\n    <!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->\\n    <b-row class=\\\"mb-3\\\">\\n      <b-col cols=\\\"6\\\" md=\\\"4\\\"> cols=\\\"6\\\" md=\\\"4\\\"</b-col>\\n      <b-col cols=\\\"6\\\" md=\\\"4\\\"> cols=\\\"6\\\" md=\\\"4\\\"</b-col>\\n      <b-col cols=\\\"6\\\" md=\\\"4\\\"> cols=\\\"6\\\" md=\\\"4\\\"</b-col>\\n    </b-row>\\n    <!-- Columns are always 50% wide, on mobile and desktop -->\\n    <b-row>\\n      <b-col cols=\\\"6\\\"> cols=\\\"6\\\"</b-col>\\n      <b-col cols=\\\"6\\\"> cols=\\\"6\\\"</b-col>\\n    </b-row>\\n  </b-container>\\n</div>\\n\")])])])])]),_c('div',{staticClass:\"iq-example-row\"},[_c('b-container',{attrs:{\"fluid\":\"\"}},[_c('b-row',{staticClass:\"mb-3\"},[_c('b-col',{attrs:{\"cols\":\"12\",\"md\":\"8\"}},[_vm._v(\" cols=\\\"12\\\" md=\\\"8\\\"\")]),_c('b-col',{attrs:{\"cols\":\"6\",\"md\":\"4\"}},[_vm._v(\" cols=\\\"6\\\" md=\\\"4\\\"\")])],1),_c('b-row',{staticClass:\"mb-3\"},[_c('b-col',{attrs:{\"cols\":\"6\",\"md\":\"4\"}},[_vm._v(\" cols=\\\"6\\\" md=\\\"4\\\"\")]),_c('b-col',{attrs:{\"cols\":\"6\",\"md\":\"4\"}},[_vm._v(\" cols=\\\"6\\\" md=\\\"4\\\"\")]),_c('b-col',{attrs:{\"cols\":\"6\",\"md\":\"4\"}},[_vm._v(\" cols=\\\"6\\\" md=\\\"4\\\"\")])],1),_c('b-row',[_c('b-col',{attrs:{\"cols\":\"6\"}},[_vm._v(\" cols=\\\"6\\\"\")]),_c('b-col',{attrs:{\"cols\":\"6\"}},[_vm._v(\" cols=\\\"6\\\"\")])],1)],1)],1)]},proxy:true}])}),_c('iq-card',{scopedSlots:_vm._u([{key:\"headerTitle\",fn:function(){return [_c('h4',{staticClass:\"card-title\"},[_vm._v(\"Setting one column width\")])]},proxy:true},{key:\"headerAction\",fn:function(){return [_c('a',{directives:[{name:\"b-toggle\",rawName:\"v-b-toggle.collapse-3\",modifiers:{\"collapse-3\":true}}],staticClass:\"text-primary float-right\",attrs:{\"role\":\"button\"}},[_c('i',{staticClass:\"ri-code-s-slash-line\"})])]},proxy:true},{key:\"body\",fn:function(){return [_c('p',[_vm._v(\"Auto-layout for flexbox grid columns also means you can set the width of one column and have the sibling columns automatically resize around it. You may use predefined grid classes (as shown below), grid mixins, or inline widths. Note that the other columns will resize no matter the width of the center column.\")]),_c('b-collapse',{staticClass:\"mb-2\",attrs:{\"id\":\"collapse-3\"}},[_c('div',{staticClass:\"card\"},[_c('kbd',{staticClass:\"bg-dark\"},[_c('pre',{staticClass:\"text-white\",attrs:{\"id\":\"grid-3\"}},[_vm._v(\"                    \"),_c('code',[_vm._v(\"\\n<div class=\\\"iq-example-row\\\">\\n  <b-container fluid>\\n    <b-row class=\\\"mb-3\\\">\\n      <b-col>1 of 3</b-col>\\n      <b-col cols=\\\"6\\\">2 of 3 (wider)</b-col>\\n      <b-col>3 of 3</b-col>\\n    </b-row>\\n    <b-row>\\n      <b-col>1 of 3</b-col>\\n      <b-col cols=\\\"5\\\">2 of 3 (wider)</b-col>\\n      <b-col>3 of 3</b-col>\\n    </b-row>\\n  </b-container>\\n</div>\\n\")])])])])]),_c('div',{staticClass:\"iq-example-row\"},[_c('b-container',{attrs:{\"fluid\":\"\"}},[_c('b-row',{staticClass:\"mb-3\"},[_c('b-col',[_vm._v(\"1 of 3\")]),_c('b-col',{attrs:{\"cols\":\"6\"}},[_vm._v(\"2 of 3 (wider)\")]),_c('b-col',[_vm._v(\"3 of 3\")])],1),_c('b-row',[_c('b-col',[_vm._v(\"1 of 3\")]),_c('b-col',{attrs:{\"cols\":\"5\"}},[_vm._v(\"2 of 3 (wider)\")]),_c('b-col',[_vm._v(\"3 of 3\")])],1)],1)],1)]},proxy:true}])}),_c('iq-card',{scopedSlots:_vm._u([{key:\"headerTitle\",fn:function(){return [_c('h4',{staticClass:\"card-title\"},[_vm._v(\"Variable width content\")])]},proxy:true},{key:\"headerAction\",fn:function(){return [_c('a',{directives:[{name:\"b-toggle\",rawName:\"v-b-toggle.collapse-4\",modifiers:{\"collapse-4\":true}}],staticClass:\"text-primary float-right\",attrs:{\"role\":\"button\"}},[_c('i',{staticClass:\"ri-code-s-slash-line\"})])]},proxy:true},{key:\"body\",fn:function(){return [_c('p',[_vm._v(\"Use \"),_c('code',[_vm._v(\"col-{breakpoint}-auto\")]),_vm._v(\" classes to size columns based on the natural width of their content.\")]),_c('b-collapse',{staticClass:\"mb-2\",attrs:{\"id\":\"collapse-4\"}},[_c('div',{staticClass:\"card\"},[_c('kbd',{staticClass:\"bg-dark\"},[_c('pre',{staticClass:\"text-white\",attrs:{\"id\":\"grid-4\"}},[_vm._v(\"                    \"),_c('code',[_vm._v(\"\\n<div class=\\\"iq-example-row\\\">\\n  <b-container fluid>\\n    <b-row class=\\\"justify-content-md-center mb-3\\\">\\n      <b-col col lg=\\\"2\\\">1 of 3</b-col>\\n      <b-col md=\\\"auto\\\">Variable width content</b-col>\\n      <b-col col lg=\\\"2\\\">3 of 3</b-col>\\n    </b-row>\\n    <b-row>\\n      <b-col>1 of 3</b-col>\\n      <b-col md=\\\"auto\\\">Variable width content</b-col>\\n      <b-col col lg=\\\"2\\\">3 of 3</b-col>\\n    </b-row>\\n  </b-container>\\n</div>\\n\")])])])])]),_c('div',{staticClass:\"iq-example-row\"},[_c('b-container',{attrs:{\"fluid\":\"\"}},[_c('b-row',{staticClass:\"justify-content-md-center mb-3\"},[_c('b-col',{attrs:{\"col\":\"\",\"lg\":\"2\"}},[_vm._v(\"1 of 3\")]),_c('b-col',{attrs:{\"md\":\"auto\"}},[_vm._v(\"Variable width content\")]),_c('b-col',{attrs:{\"col\":\"\",\"lg\":\"2\"}},[_vm._v(\"3 of 3\")])],1),_c('b-row',[_c('b-col',[_vm._v(\"1 of 3\")]),_c('b-col',{attrs:{\"md\":\"auto\"}},[_vm._v(\"Variable width content\")]),_c('b-col',{attrs:{\"col\":\"\",\"lg\":\"2\"}},[_vm._v(\"3 of 3\")])],1)],1)],1)]},proxy:true}])}),_c('iq-card',{scopedSlots:_vm._u([{key:\"headerTitle\",fn:function(){return [_c('h4',{staticClass:\"card-title\"},[_vm._v(\"Equal-width multi-row\")])]},proxy:true},{key:\"headerAction\",fn:function(){return [_c('a',{directives:[{name:\"b-toggle\",rawName:\"v-b-toggle.collapse-5\",modifiers:{\"collapse-5\":true}}],staticClass:\"text-primary float-right\",attrs:{\"role\":\"button\"}},[_c('i',{staticClass:\"ri-code-s-slash-line\"})])]},proxy:true},{key:\"body\",fn:function(){return [_c('p',[_vm._v(\"Create equal-width columns that span multiple rows by inserting a \"),_c('code',[_vm._v(\".w-100\")]),_vm._v(\" where you want the columns to break to a new line. Make the breaks responsive by mixing the \"),_c('code',[_vm._v(\".w-100\")]),_vm._v(\" with some \"),_c('a',{attrs:{\"href\":\"/docs/4.3/utilities/display/\"}},[_vm._v(\"responsive display utilities\")]),_vm._v(\".\")]),_c('b-collapse',{staticClass:\"mb-2\",attrs:{\"id\":\"collapse-5\"}},[_c('div',{staticClass:\"card\"},[_c('kbd',{staticClass:\"bg-dark\"},[_c('pre',{staticClass:\"text-white\",attrs:{\"id\":\"grid-5\"}},[_vm._v(\"                    \"),_c('code',[_vm._v(\"\\n<div class=\\\"iq-example-row\\\">\\n  <b-container fluid>\\n    <b-row>\\n      <b-col>col</b-col>\\n      <b-col>col</b-col>\\n      <div class=\\\"w-100\\\"></div>\\n      <b-col>col</b-col>\\n      <b-col>col</b-col>\\n    </b-row>\\n  </b-container>\\n</div>\\n\")])])])])]),_c('div',{staticClass:\"iq-example-row\"},[_c('b-container',{attrs:{\"fluid\":\"\"}},[_c('b-row',[_c('b-col',[_vm._v(\"col\")]),_c('b-col',[_vm._v(\"col\")]),_c('div',{staticClass:\"w-100\"}),_c('b-col',[_vm._v(\"col\")]),_c('b-col',[_vm._v(\"col\")])],1)],1)],1)]},proxy:true}])}),_c('iq-card',{scopedSlots:_vm._u([{key:\"headerTitle\",fn:function(){return [_c('h4',{staticClass:\"card-title\"},[_vm._v(\"Responsive classes\")])]},proxy:true},{key:\"headerAction\",fn:function(){return [_c('a',{directives:[{name:\"b-toggle\",rawName:\"v-b-toggle.collapse-6\",modifiers:{\"collapse-6\":true}}],staticClass:\"text-primary float-right\",attrs:{\"role\":\"button\"}},[_c('i',{staticClass:\"ri-code-s-slash-line\"})])]},proxy:true},{key:\"body\",fn:function(){return [_c('p',[_vm._v(\"Bootstrap’s grid includes five tiers of predefined classes for building complex responsive layouts. Customize the size of your columns on extra small, small, medium, large, or extra large devices however you see fit.\")]),_c('h4',{staticClass:\"card-title\"},[_vm._v(\"All breakpoints\")]),_c('p',[_vm._v(\"For grids that are the same from the smallest of devices to the largest, use the \"),_c('code',[_vm._v(\".col\")]),_vm._v(\" and \"),_c('code',[_vm._v(\".col-*\")]),_vm._v(\" classes. Specify a numbered class when you need a particularly sized column; otherwise, feel free to stick to \"),_c('code',[_vm._v(\".col\")]),_vm._v(\".\")]),_c('b-collapse',{staticClass:\"mb-2\",attrs:{\"id\":\"collapse-6\"}},[_c('div',{staticClass:\"card\"},[_c('kbd',{staticClass:\"bg-dark\"},[_c('pre',{staticClass:\"text-white\",attrs:{\"id\":\"grid-6\"}},[_vm._v(\"                    \"),_c('code',[_vm._v(\"\\n<div class=\\\"iq-example-row\\\">\\n  <b-container fluid>\\n    <b-row class=\\\"mb-3\\\">\\n      <b-col>col</b-col>\\n      <b-col>col</b-col>\\n      <b-col>col</b-col>\\n      <b-col>col</b-col>\\n    </b-row>\\n    <b-row>\\n      <b-col cols=\\\"8\\\">cols=\\\"8\\\"</b-col>\\n      <b-col cols=\\\"4\\\">cols=\\\"4\\\"</b-col>\\n    </b-row>\\n  </b-container>\\n</div>\\n\")])])])])]),_c('div',{staticClass:\"iq-example-row\"},[_c('b-container',{attrs:{\"fluid\":\"\"}},[_c('b-row',{staticClass:\"mb-3\"},[_c('b-col',[_vm._v(\"col\")]),_c('b-col',[_vm._v(\"col\")]),_c('b-col',[_vm._v(\"col\")]),_c('b-col',[_vm._v(\"col\")])],1),_c('b-row',[_c('b-col',{attrs:{\"cols\":\"8\"}},[_vm._v(\"cols=\\\"8\\\"\")]),_c('b-col',{attrs:{\"cols\":\"4\"}},[_vm._v(\"cols=\\\"4\\\"\")])],1)],1)],1)]},proxy:true}])}),_c('iq-card',{scopedSlots:_vm._u([{key:\"headerTitle\",fn:function(){return [_c('h4',{staticClass:\"card-title\"},[_vm._v(\"Stacked to horizontal\")])]},proxy:true},{key:\"headerAction\",fn:function(){return [_c('a',{directives:[{name:\"b-toggle\",rawName:\"v-b-toggle.collapse-7\",modifiers:{\"collapse-7\":true}}],staticClass:\"text-primary float-right\",attrs:{\"role\":\"button\"}},[_c('i',{staticClass:\"ri-code-s-slash-line\"})])]},proxy:true},{key:\"body\",fn:function(){return [_c('p',[_vm._v(\"Using a single set of \"),_c('code',[_vm._v(\".col-sm-*\")]),_vm._v(\" classes, you can create a basic grid system that starts out stacked and becomes horizontal at the small breakpoint (\"),_c('code',[_vm._v(\"sm\")]),_vm._v(\").\")]),_c('b-collapse',{staticClass:\"mb-2\",attrs:{\"id\":\"collapse-7\"}},[_c('div',{staticClass:\"card\"},[_c('kbd',{staticClass:\"bg-dark\"},[_c('pre',{staticClass:\"text-white\",attrs:{\"id\":\"grid-7\"}},[_vm._v(\"                    \"),_c('code',[_vm._v(\"\\n<div class=\\\"iq-example-row\\\">\\n  <b-container fluid>\\n    <b-row class=\\\"mb-3\\\">\\n      <b-col sm=\\\"8\\\">sm=\\\"8\\\"</b-col>\\n      <b-col sm=\\\"4\\\">sm=\\\"4\\\"</b-col>\\n    </b-row>\\n    <b-row>\\n      <b-col sm>sm</b-col>\\n      <b-col sm>sm</b-col>\\n      <b-col sm>sm</b-col>\\n    </b-row>\\n  </b-container>\\n</div>\\n\")])])])])]),_c('div',{staticClass:\"iq-example-row\"},[_c('b-container',{attrs:{\"fluid\":\"\"}},[_c('b-row',{staticClass:\"mb-3\"},[_c('b-col',{attrs:{\"sm\":\"8\"}},[_vm._v(\"sm=\\\"8\\\"\")]),_c('b-col',{attrs:{\"sm\":\"4\"}},[_vm._v(\"sm=\\\"4\\\"\")])],1),_c('b-row',[_c('b-col',{attrs:{\"sm\":\"\"}},[_vm._v(\"sm\")]),_c('b-col',{attrs:{\"sm\":\"\"}},[_vm._v(\"sm\")]),_c('b-col',{attrs:{\"sm\":\"\"}},[_vm._v(\"sm\")])],1)],1)],1)]},proxy:true}])}),_c('iq-card',{scopedSlots:_vm._u([{key:\"headerTitle\",fn:function(){return [_c('h4',{staticClass:\"card-title\"},[_vm._v(\"Mix and match\")])]},proxy:true},{key:\"headerAction\",fn:function(){return [_c('a',{directives:[{name:\"b-toggle\",rawName:\"v-b-toggle.collapse-8\",modifiers:{\"collapse-8\":true}}],staticClass:\"text-primary float-right\",attrs:{\"role\":\"button\"}},[_c('i',{staticClass:\"ri-code-s-slash-line\"})])]},proxy:true},{key:\"body\",fn:function(){return [_c('p',[_vm._v(\"Don’t want your columns to simply stack in some grid tiers? Use a combination of different classes for each tier as needed. See the example below for a better idea of how it all works.\")]),_c('b-collapse',{staticClass:\"mb-2\",attrs:{\"id\":\"collapse-8\"}},[_c('div',{staticClass:\"card\"},[_c('kbd',{staticClass:\"bg-dark\"},[_c('pre',{staticClass:\"text-white\",attrs:{\"id\":\"grid-8\"}},[_vm._v(\"                    \"),_c('code',[_vm._v(\"\\n<div class=\\\"iq-example-row\\\">\\n  <b-container fluid>\\n    <!-- Stack the columns on mobile by making one full-width and the other half-width -->\\n    <b-row class=\\\"mb-3\\\">\\n      <b-col cols=\\\"12\\\" md=\\\"8\\\">cols=\\\"12\\\" md=\\\"8\\\"</b-col>\\n      <b-col cols=\\\"6\\\" md=\\\"4\\\">cols=\\\"6\\\" md=\\\"4\\\"</b-col>\\n    </b-row>\\n    <!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->\\n    <b-row class=\\\"mb-3\\\">\\n      <b-col cols=\\\"6\\\" md=\\\"4\\\">cols=\\\"6\\\" md=\\\"4\\\"</b-col>\\n      <b-col cols=\\\"6\\\" md=\\\"4\\\">cols=\\\"6\\\" md=\\\"4\\\"</b-col>\\n      <b-col cols=\\\"6\\\" md=\\\"4\\\">cols=\\\"6\\\" md=\\\"4\\\"</b-col>\\n    </b-row>\\n    <!-- Columns are always 50% wide, on mobile and desktop -->\\n    <b-row>\\n      <b-col cols=\\\"6\\\">cols=\\\"6\\\"</b-col>\\n      <b-col cols=\\\"6\\\">cols=\\\"6\\\"</b-col>\\n    </b-row>\\n  </b-container>\\n</div>\\n\")])])])])]),_c('div',{staticClass:\"iq-example-row\"},[_c('b-container',{attrs:{\"fluid\":\"\"}},[_c('b-row',{staticClass:\"mb-3\"},[_c('b-col',{attrs:{\"cols\":\"12\",\"md\":\"8\"}},[_vm._v(\"cols=\\\"12\\\" md=\\\"8\\\"\")]),_c('b-col',{attrs:{\"cols\":\"6\",\"md\":\"4\"}},[_vm._v(\"cols=\\\"6\\\" md=\\\"4\\\"\")])],1),_c('b-row',{staticClass:\"mb-3\"},[_c('b-col',{attrs:{\"cols\":\"6\",\"md\":\"4\"}},[_vm._v(\"cols=\\\"6\\\" md=\\\"4\\\"\")]),_c('b-col',{attrs:{\"cols\":\"6\",\"md\":\"4\"}},[_vm._v(\"cols=\\\"6\\\" md=\\\"4\\\"\")]),_c('b-col',{attrs:{\"cols\":\"6\",\"md\":\"4\"}},[_vm._v(\"cols=\\\"6\\\" md=\\\"4\\\"\")])],1),_c('b-row',[_c('b-col',{attrs:{\"cols\":\"6\"}},[_vm._v(\"cols=\\\"6\\\"\")]),_c('b-col',{attrs:{\"cols\":\"6\"}},[_vm._v(\"cols=\\\"6\\\"\")])],1)],1)],1)]},proxy:true}])}),_c('iq-card',{scopedSlots:_vm._u([{key:\"headerTitle\",fn:function(){return [_c('h4',{staticClass:\"card-title\"},[_vm._v(\"Gutters\")])]},proxy:true},{key:\"headerAction\",fn:function(){return [_c('a',{directives:[{name:\"b-toggle\",rawName:\"v-b-toggle.collapse-9\",modifiers:{\"collapse-9\":true}}],staticClass:\"text-primary float-right\",attrs:{\"role\":\"button\"}},[_c('i',{staticClass:\"ri-code-s-slash-line\"})])]},proxy:true},{key:\"body\",fn:function(){return [_c('p',[_vm._v(\"Gutters can be responsively adjusted by breakpoint-specific padding and negative margin utility classes. To change the gutters in a given row, pair a negative margin utility on the \"),_c('code',[_vm._v(\".row\")]),_vm._v(\" and matching padding utilities on the \"),_c('code',[_vm._v(\".col\")]),_vm._v(\"s. The \"),_c('code',[_vm._v(\".container\")]),_vm._v(\" or \"),_c('code',[_vm._v(\".container-fluid\")]),_vm._v(\" parent may need to be adjusted too to avoid unwanted overflow, using again matching padding utility.\")]),_c('p',[_vm._v(\"Here’s an example of customizing the Bootstrap grid at the large (\"),_c('code',[_vm._v(\"lg\")]),_vm._v(\") breakpoint and above. We’ve increased the \"),_c('code',[_vm._v(\".col\")]),_vm._v(\" padding with \"),_c('code',[_vm._v(\".px-lg-5\")]),_vm._v(\", counteracted that with \"),_c('code',[_vm._v(\".mx-lg-n5\")]),_vm._v(\" on the parent \"),_c('code',[_vm._v(\".row\")]),_vm._v(\" and then adjusted the \"),_c('code',[_vm._v(\".container\")]),_vm._v(\" wrapper with \"),_c('code',[_vm._v(\".px-lg-5\")]),_vm._v(\".\")]),_c('b-collapse',{staticClass:\"mb-2\",attrs:{\"id\":\"collapse-9\"}},[_c('div',{staticClass:\"card\"},[_c('kbd',{staticClass:\"bg-dark\"},[_c('pre',{staticClass:\"text-white\",attrs:{\"id\":\"grid-9\"}},[_vm._v(\"                    \"),_c('code',[_vm._v(\"\\n<div class=\\\"iq-example-row\\\">\\n  <b-container fluid class=\\\"px-lg-5\\\">\\n    <b-row class=\\\"mx-lg-n5\\\">\\n      <b-col class=\\\"py-3 px-lg-5 border bg-light\\\">Custom column padding</b-col>\\n      <b-col class=\\\"py-3 px-lg-5 border bg-light\\\">Custom column padding</b-col>\\n    </b-row>\\n  </b-container>\\n</div>\\n\")])])])])]),_c('div',{staticClass:\"iq-example-row\"},[_c('b-container',{staticClass:\"px-lg-5\",attrs:{\"fluid\":\"\"}},[_c('b-row',{staticClass:\"mx-lg-n5\"},[_c('b-col',{staticClass:\"py-3 px-lg-5 border bg-light\"},[_vm._v(\"Custom column padding\")]),_c('b-col',{staticClass:\"py-3 px-lg-5 border bg-light\"},[_vm._v(\"Custom column padding\")])],1)],1)],1)]},proxy:true}])}),_c('iq-card',{scopedSlots:_vm._u([{key:\"headerTitle\",fn:function(){return [_c('h4',{staticClass:\"card-title\"},[_vm._v(\"Alignment\")])]},proxy:true},{key:\"headerAction\",fn:function(){return [_c('a',{directives:[{name:\"b-toggle\",rawName:\"v-b-toggle.collapse-10\",modifiers:{\"collapse-10\":true}}],staticClass:\"text-primary float-right\",attrs:{\"role\":\"button\"}},[_c('i',{staticClass:\"ri-code-s-slash-line\"})])]},proxy:true},{key:\"body\",fn:function(){return [_c('p',[_vm._v(\"Use flexbox alignment utilities to vertically and horizontally align columns. \"),_c('strong',[_vm._v(\"Internet Explorer 10-11 do not support vertical alignment of flex items when the flex container has a \"),_c('code',[_vm._v(\"min-height\")]),_vm._v(\" as shown below.\")]),_vm._v(\" \"),_c('a',{attrs:{\"href\":\"https://github.com/philipwalton/flexbugs#flexbug-3\"}},[_vm._v(\"See Flexbugs #3 for more details.\")])]),_c('h4',{staticClass:\"mb-3\"},[_vm._v(\"Vertical alignment\")]),_c('b-collapse',{staticClass:\"mb-2\",attrs:{\"id\":\"collapse-10\"}},[_c('div',{staticClass:\"card\"},[_c('kbd',{staticClass:\"bg-dark\"},[_c('pre',{staticClass:\"text-white\",attrs:{\"id\":\"grid-10\"}},[_vm._v(\"                    \"),_c('code',[_vm._v(\"\\n<div class=\\\"iq-example-row iq-example-row-flex-cols\\\">\\n  <b-container fluid>\\n    <b-row align-v=\\\"start\\\">\\n      <b-col>One of three columns</b-col>\\n      <b-col>One of three columns</b-col>\\n      <b-col>One of three columns</b-col>\\n    </b-row>\\n    <b-row align-v=\\\"center\\\">\\n      <b-col>One of three columns</b-col>\\n      <b-col>One of three columns</b-col>\\n      <b-col>One of three columns</b-col>\\n    </b-row>\\n    <b-row align-v=\\\"end\\\">\\n      <b-col>One of three columns</b-col>\\n      <b-col>One of three columns</b-col>\\n      <b-col>One of three columns</b-col>\\n    </b-row>\\n  </b-container>\\n  <b-container fluid>\\n    <b-row>\\n      <b-col align-self=\\\"start\\\">One of three columns</b-col>\\n      <b-col align-self=\\\"center\\\">One of three columns</b-col>\\n      <b-col align-self=\\\"end\\\">One of three columns</b-col>\\n    </b-row>\\n  </b-container>\\n</div>\\n\")])])])])]),_c('div',{staticClass:\"iq-example-row iq-example-row-flex-cols\"},[_c('b-container',{attrs:{\"fluid\":\"\"}},[_c('b-row',{attrs:{\"align-v\":\"start\"}},[_c('b-col',[_vm._v(\"One of three columns\")]),_c('b-col',[_vm._v(\"One of three columns\")]),_c('b-col',[_vm._v(\"One of three columns\")])],1),_c('b-row',{attrs:{\"align-v\":\"center\"}},[_c('b-col',[_vm._v(\"One of three columns\")]),_c('b-col',[_vm._v(\"One of three columns\")]),_c('b-col',[_vm._v(\"One of three columns\")])],1),_c('b-row',{attrs:{\"align-v\":\"end\"}},[_c('b-col',[_vm._v(\"One of three columns\")]),_c('b-col',[_vm._v(\"One of three columns\")]),_c('b-col',[_vm._v(\"One of three columns\")])],1)],1),_c('b-container',{attrs:{\"fluid\":\"\"}},[_c('b-row',[_c('b-col',{attrs:{\"align-self\":\"start\"}},[_vm._v(\"One of three columns\")]),_c('b-col',{attrs:{\"align-self\":\"center\"}},[_vm._v(\"One of three columns\")]),_c('b-col',{attrs:{\"align-self\":\"end\"}},[_vm._v(\"One of three columns\")])],1)],1)],1)]},proxy:true}])}),_c('iq-card',{scopedSlots:_vm._u([{key:\"headerTitle\",fn:function(){return [_c('h4',{staticClass:\"card-title\"},[_vm._v(\"Horizontal alignment\")])]},proxy:true},{key:\"headerAction\",fn:function(){return [_c('a',{directives:[{name:\"b-toggle\",rawName:\"v-b-toggle.collapse-11\",modifiers:{\"collapse-11\":true}}],staticClass:\"text-primary float-right\",attrs:{\"role\":\"button\"}},[_c('i',{staticClass:\"ri-code-s-slash-line\"})])]},proxy:true},{key:\"body\",fn:function(){return [_c('p',[_vm._v(\"Create equal-width columns that span multiple rows by inserting a \"),_c('code',[_vm._v(\".w-100\")]),_vm._v(\" where you want the columns to break to a new line. Make the breaks responsive by mixing the \"),_c('code',[_vm._v(\".w-100\")]),_vm._v(\" with some \"),_c('a',{attrs:{\"href\":\"/docs/4.3/utilities/display/\"}},[_vm._v(\"responsive display utilities\")]),_vm._v(\".\")]),_c('b-collapse',{staticClass:\"mb-2\",attrs:{\"id\":\"collapse-11\"}},[_c('div',{staticClass:\"card\"},[_c('kbd',{staticClass:\"bg-dark\"},[_c('pre',{staticClass:\"text-white\",attrs:{\"id\":\"grid-11\"}},[_vm._v(\"                    \"),_c('code',[_vm._v(\"\\n<div class=\\\"iq-example-row\\\">\\n  <b-container fluid>\\n    <b-row align-h=\\\"start\\\" class=\\\"mb-3\\\">\\n      <b-col cols=\\\"4\\\">One of two columns</b-col>\\n      <b-col cols=\\\"4\\\">One of two columns</b-col>\\n    </b-row>\\n    <b-row align-h=\\\"center\\\" class=\\\"mb-3\\\">\\n      <b-col cols=\\\"4\\\">One of two columns</b-col>\\n      <b-col cols=\\\"4\\\">One of two columns</b-col>\\n    </b-row>\\n    <b-row align-h=\\\"end\\\" class=\\\"mb-3\\\">\\n      <b-col cols=\\\"4\\\">One of two columns</b-col>\\n      <b-col cols=\\\"4\\\">One of two columns</b-col>\\n    </b-row>\\n    <b-row align-h=\\\"around\\\" class=\\\"mb-3\\\">\\n      <b-col cols=\\\"4\\\">One of two columns</b-col>\\n      <b-col cols=\\\"4\\\">One of two columns</b-col>\\n    </b-row>\\n    <b-row align-h=\\\"between\\\" class=\\\"mb-3\\\">\\n      <b-col cols=\\\"4\\\">One of two columns</b-col>\\n      <b-col cols=\\\"4\\\">One of two columns</b-col>\\n    </b-row>\\n  </b-container>\\n</div>\\n\")])])])])]),_c('div',{staticClass:\"iq-example-row\"},[_c('b-container',{attrs:{\"fluid\":\"\"}},[_c('b-row',{staticClass:\"mb-3\",attrs:{\"align-h\":\"start\"}},[_c('b-col',{attrs:{\"cols\":\"4\"}},[_vm._v(\"One of two columns\")]),_c('b-col',{attrs:{\"cols\":\"4\"}},[_vm._v(\"One of two columns\")])],1),_c('b-row',{staticClass:\"mb-3\",attrs:{\"align-h\":\"center\"}},[_c('b-col',{attrs:{\"cols\":\"4\"}},[_vm._v(\"One of two columns\")]),_c('b-col',{attrs:{\"cols\":\"4\"}},[_vm._v(\"One of two columns\")])],1),_c('b-row',{staticClass:\"mb-3\",attrs:{\"align-h\":\"end\"}},[_c('b-col',{attrs:{\"cols\":\"4\"}},[_vm._v(\"One of two columns\")]),_c('b-col',{attrs:{\"cols\":\"4\"}},[_vm._v(\"One of two columns\")])],1),_c('b-row',{staticClass:\"mb-3\",attrs:{\"align-h\":\"around\"}},[_c('b-col',{attrs:{\"cols\":\"4\"}},[_vm._v(\"One of two columns\")]),_c('b-col',{attrs:{\"cols\":\"4\"}},[_vm._v(\"One of two columns\")])],1),_c('b-row',{staticClass:\"mb-3\",attrs:{\"align-h\":\"between\"}},[_c('b-col',{attrs:{\"cols\":\"4\"}},[_vm._v(\"One of two columns\")]),_c('b-col',{attrs:{\"cols\":\"4\"}},[_vm._v(\"One of two columns\")])],1)],1)],1)]},proxy:true}])})],1)],1)],1)\n}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<template>\n  <b-container fluid>\n    <b-row>\n      <b-col sm=\"12\">\n        <iq-card>\n          <template v-slot:headerTitle>\n            <h4 class=\"card-title\">Grid options</h4>\n          </template>\n          <template v-slot:body>\n            <p>See how aspects of the Bootstrap grid system work across multiple devices with a handy table..</p>\n            <table class=\"table table-bordered table-striped\">\n              <thead>\n                <tr>\n                  <th></th>\n                  <th class=\"text-center\">\n                    Extra small<br>\n                    <small>&lt;576px</small>\n                  </th>\n                  <th class=\"text-center\">\n                    Small<br>\n                    <small>≥576px</small>\n                  </th>\n                  <th class=\"text-center\">\n                    Medium<br>\n                    <small>≥768px</small>\n                  </th>\n                  <th class=\"text-center\">\n                    Large<br>\n                    <small>≥992px</small>\n                  </th>\n                  <th class=\"text-center\">\n                    Extra large<br>\n                    <small>≥1200px</small>\n                  </th>\n                </tr>\n              </thead>\n              <tbody>\n                <tr>\n                  <th class=\"text-nowrap text-left\" scope=\"row\">Max container width</th>\n                  <td>None (auto)</td>\n                  <td>540px</td>\n                  <td>720px</td>\n                  <td>960px</td>\n                  <td>1140px</td>\n                </tr>\n                <tr>\n                  <th class=\"text-nowrap text-left\" scope=\"row\">Prop</th>\n                  <td><code>cols=\"*\"</code></td>\n                  <td><code>sm=\"*\"</code></td>\n                  <td><code>md=\"*\"</code></td>\n                  <td><code>lg=\"*\"</code></td>\n                  <td><code>xl=\"*\"</code></td>\n                </tr>\n                <tr>\n                  <th class=\"text-nowrap text-left\" scope=\"row\"># of columns</th>\n                  <td colspan=\"5\">12</td>\n                </tr>\n                <tr>\n                  <th class=\"text-nowrap text-left\" scope=\"row\">Gutter width</th>\n                  <td colspan=\"5\">30px (15px on each side of a column)</td>\n                </tr>\n                <tr>\n                  <th class=\"text-nowrap text-left\" scope=\"row\">Nestable</th>\n                  <td colspan=\"5\">Yes</td>\n                </tr>\n                <tr>\n                  <th class=\"text-nowrap text-left\" scope=\"row\">Offset</th>\n                  <td><code>offset=\"*\"</code></td>\n                  <td><code>offset-sm=\"*\"</code></td>\n                  <td><code>offset-md=\"*\"</code></td>\n                  <td><code>offset-lg=\"*\"</code></td>\n                  <td><code>offset-xl=\"*\"</code></td>\n                </tr>\n                <tr>\n                  <th class=\"text-nowrap text-left\" scope=\"row\">Column ordering</th>\n                  <td><code>order=\"*\"</code></td>\n                  <td><code>order-sm=\"*\"</code></td>\n                  <td><code>order-md=\"*\"</code></td>\n                  <td><code>order-lg=\"*\"</code></td>\n                  <td><code>order-xl=\"*\"</code></td>\n                </tr>\n              </tbody>\n            </table>\n          </template>\n        </iq-card>\n        <iq-card>\n          <template v-slot:headerTitle>\n            <h4 class=\"card-title\">Equal-width</h4>\n          </template>\n          <template v-slot:headerAction>\n            <a class=\"text-primary float-right\" v-b-toggle.collapse-2 role=\"button\">\n              <i class=\"ri-code-s-slash-line\" />\n            </a>\n          </template>\n          <template v-slot:body>\n            <p>For example, here are two grid layouts that apply to every device and viewport, from <code>xs</code> to <code>xl</code>. Add any number of unit-less classes for each breakpoint you need and every column will be the same width.</p>\n            <b-collapse id=\"collapse-2\" class=\"mb-2\">\n              <div class=\"card\">\n                <kbd class=\"bg-dark\">\n                  <pre class=\"text-white\" id=\"grid-2\">\n                    <code>\n&lt;div class=\"iq-example-row\"&gt;\n  &lt;b-container fluid&gt;\n    &lt;!-- Stack the columns on mobile by making one full-width and the other half-width --&gt;\n    &lt;b-row class=\"mb-3\"&gt;\n      &lt;b-col cols=\"12\" md=\"8\"&gt; cols=\"12\" md=\"8\"&lt;/b-col&gt;\n      &lt;b-col cols=\"6\" md=\"4\"&gt; cols=\"6\" md=\"4\"&lt;/b-col&gt;\n    &lt;/b-row&gt;\n    &lt;!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop --&gt;\n    &lt;b-row class=\"mb-3\"&gt;\n      &lt;b-col cols=\"6\" md=\"4\"&gt; cols=\"6\" md=\"4\"&lt;/b-col&gt;\n      &lt;b-col cols=\"6\" md=\"4\"&gt; cols=\"6\" md=\"4\"&lt;/b-col&gt;\n      &lt;b-col cols=\"6\" md=\"4\"&gt; cols=\"6\" md=\"4\"&lt;/b-col&gt;\n    &lt;/b-row&gt;\n    &lt;!-- Columns are always 50% wide, on mobile and desktop --&gt;\n    &lt;b-row&gt;\n      &lt;b-col cols=\"6\"&gt; cols=\"6\"&lt;/b-col&gt;\n      &lt;b-col cols=\"6\"&gt; cols=\"6\"&lt;/b-col&gt;\n    &lt;/b-row&gt;\n  &lt;/b-container&gt;\n&lt;/div&gt;\n</code></pre>\n                </kbd>\n              </div>\n            </b-collapse>\n            <div class=\"iq-example-row\">\n              <b-container fluid>\n                <!-- Stack the columns on mobile by making one full-width and the other half-width -->\n                <b-row class=\"mb-3\">\n                  <b-col cols=\"12\" md=\"8\"> cols=\"12\" md=\"8\"</b-col>\n                  <b-col cols=\"6\" md=\"4\"> cols=\"6\" md=\"4\"</b-col>\n                </b-row>\n                <!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->\n                <b-row class=\"mb-3\">\n                  <b-col cols=\"6\" md=\"4\"> cols=\"6\" md=\"4\"</b-col>\n                  <b-col cols=\"6\" md=\"4\"> cols=\"6\" md=\"4\"</b-col>\n                  <b-col cols=\"6\" md=\"4\"> cols=\"6\" md=\"4\"</b-col>\n                </b-row>\n                <!-- Columns are always 50% wide, on mobile and desktop -->\n                <b-row>\n                  <b-col cols=\"6\"> cols=\"6\"</b-col>\n                  <b-col cols=\"6\"> cols=\"6\"</b-col>\n                </b-row>\n              </b-container>\n            </div>\n          </template>\n        </iq-card>\n        <iq-card>\n          <template v-slot:headerTitle>\n            <h4 class=\"card-title\">Setting one column width</h4>\n          </template>\n          <template v-slot:headerAction>\n            <a class=\"text-primary float-right\" v-b-toggle.collapse-3 role=\"button\">\n              <i class=\"ri-code-s-slash-line\" />\n            </a>\n          </template>\n          <template v-slot:body>\n            <p>Auto-layout for flexbox grid columns also means you can set the width of one column and have the sibling columns automatically resize around it. You may use predefined grid classes (as shown below), grid mixins, or inline widths. Note that the other columns will resize no matter the width of the center column.</p>\n            <b-collapse id=\"collapse-3\" class=\"mb-2\">\n              <div class=\"card\">\n                <kbd class=\"bg-dark\">\n                  <pre class=\"text-white\" id=\"grid-3\">\n                    <code>\n&lt;div class=\"iq-example-row\"&gt;\n  &lt;b-container fluid&gt;\n    &lt;b-row class=\"mb-3\"&gt;\n      &lt;b-col&gt;1 of 3&lt;/b-col&gt;\n      &lt;b-col cols=\"6\"&gt;2 of 3 (wider)&lt;/b-col&gt;\n      &lt;b-col&gt;3 of 3&lt;/b-col&gt;\n    &lt;/b-row&gt;\n    &lt;b-row&gt;\n      &lt;b-col&gt;1 of 3&lt;/b-col&gt;\n      &lt;b-col cols=\"5\"&gt;2 of 3 (wider)&lt;/b-col&gt;\n      &lt;b-col&gt;3 of 3&lt;/b-col&gt;\n    &lt;/b-row&gt;\n  &lt;/b-container&gt;\n&lt;/div&gt;\n</code></pre>\n                </kbd>\n              </div>\n            </b-collapse>\n            <div class=\"iq-example-row\">\n              <b-container fluid>\n                <b-row class=\"mb-3\">\n                  <b-col>1 of 3</b-col>\n                  <b-col cols=\"6\">2 of 3 (wider)</b-col>\n                  <b-col>3 of 3</b-col>\n                </b-row>\n                <b-row>\n                  <b-col>1 of 3</b-col>\n                  <b-col cols=\"5\">2 of 3 (wider)</b-col>\n                  <b-col>3 of 3</b-col>\n                </b-row>\n              </b-container>\n            </div>\n          </template>\n        </iq-card>\n        <iq-card>\n          <template v-slot:headerTitle>\n            <h4 class=\"card-title\">Variable width content</h4>\n          </template>\n          <template v-slot:headerAction>\n            <a class=\"text-primary float-right\" v-b-toggle.collapse-4 role=\"button\">\n              <i class=\"ri-code-s-slash-line\" />\n            </a>\n          </template>\n          <template v-slot:body>\n            <p>Use <code>col-{breakpoint}-auto</code> classes to size columns based on the natural width of their content.</p>\n            <b-collapse id=\"collapse-4\" class=\"mb-2\">\n              <div class=\"card\">\n                <kbd class=\"bg-dark\">\n                  <pre class=\"text-white\" id=\"grid-4\">\n                    <code>\n&lt;div class=\"iq-example-row\"&gt;\n  &lt;b-container fluid&gt;\n    &lt;b-row class=\"justify-content-md-center mb-3\"&gt;\n      &lt;b-col col lg=\"2\"&gt;1 of 3&lt;/b-col&gt;\n      &lt;b-col md=\"auto\"&gt;Variable width content&lt;/b-col&gt;\n      &lt;b-col col lg=\"2\"&gt;3 of 3&lt;/b-col&gt;\n    &lt;/b-row&gt;\n    &lt;b-row&gt;\n      &lt;b-col&gt;1 of 3&lt;/b-col&gt;\n      &lt;b-col md=\"auto\"&gt;Variable width content&lt;/b-col&gt;\n      &lt;b-col col lg=\"2\"&gt;3 of 3&lt;/b-col&gt;\n    &lt;/b-row&gt;\n  &lt;/b-container&gt;\n&lt;/div&gt;\n</code></pre>\n                </kbd>\n              </div>\n            </b-collapse>\n            <div class=\"iq-example-row\">\n              <b-container fluid>\n                <b-row class=\"justify-content-md-center mb-3\">\n                  <b-col col lg=\"2\">1 of 3</b-col>\n                  <b-col md=\"auto\">Variable width content</b-col>\n                  <b-col col lg=\"2\">3 of 3</b-col>\n                </b-row>\n                <b-row>\n                  <b-col>1 of 3</b-col>\n                  <b-col md=\"auto\">Variable width content</b-col>\n                  <b-col col lg=\"2\">3 of 3</b-col>\n                </b-row>\n              </b-container>\n            </div>\n          </template>\n        </iq-card>\n        <iq-card>\n          <template v-slot:headerTitle>\n            <h4 class=\"card-title\">Equal-width multi-row</h4>\n          </template>\n          <template v-slot:headerAction>\n            <a class=\"text-primary float-right\" v-b-toggle.collapse-5 role=\"button\">\n              <i class=\"ri-code-s-slash-line\" />\n            </a>\n          </template>\n          <template v-slot:body>\n            <p>Create equal-width columns that span multiple rows by inserting a <code>.w-100</code> where you want the columns to break to a new line. Make the breaks responsive by mixing the <code>.w-100</code> with some <a href=\"/docs/4.3/utilities/display/\">responsive display utilities</a>.</p>\n            <b-collapse id=\"collapse-5\" class=\"mb-2\">\n              <div class=\"card\">\n                <kbd class=\"bg-dark\">\n                  <pre class=\"text-white\" id=\"grid-5\">\n                    <code>\n&lt;div class=\"iq-example-row\"&gt;\n  &lt;b-container fluid&gt;\n    &lt;b-row&gt;\n      &lt;b-col&gt;col&lt;/b-col&gt;\n      &lt;b-col&gt;col&lt;/b-col&gt;\n      &lt;div class=\"w-100\"&gt;&lt;/div&gt;\n      &lt;b-col&gt;col&lt;/b-col&gt;\n      &lt;b-col&gt;col&lt;/b-col&gt;\n    &lt;/b-row&gt;\n  &lt;/b-container&gt;\n&lt;/div&gt;\n</code></pre>\n                </kbd>\n              </div>\n            </b-collapse>\n            <div class=\"iq-example-row\">\n              <b-container fluid>\n                <b-row>\n                  <b-col>col</b-col>\n                  <b-col>col</b-col>\n                  <div class=\"w-100\"></div>\n                  <b-col>col</b-col>\n                  <b-col>col</b-col>\n                </b-row>\n              </b-container>\n            </div>\n          </template>\n        </iq-card>\n        <iq-card>\n          <template v-slot:headerTitle>\n            <h4 class=\"card-title\">Responsive classes</h4>\n          </template>\n          <template v-slot:headerAction>\n            <a class=\"text-primary float-right\" v-b-toggle.collapse-6 role=\"button\">\n              <i class=\"ri-code-s-slash-line\" />\n            </a>\n          </template>\n          <template v-slot:body>\n            <p>Bootstrap’s grid includes five tiers of predefined classes for building complex responsive layouts. Customize the size of your columns on extra small, small, medium, large, or extra large devices however you see fit.</p>\n            <h4 class=\"card-title\">All breakpoints</h4>\n            <p>For grids that are the same from the smallest of devices to the largest, use the <code>.col</code> and <code>.col-*</code> classes. Specify a numbered class when you need a particularly sized column; otherwise, feel free to stick to <code>.col</code>.</p>\n            <b-collapse id=\"collapse-6\" class=\"mb-2\">\n              <div class=\"card\">\n                <kbd class=\"bg-dark\">\n                  <pre class=\"text-white\" id=\"grid-6\">\n                    <code>\n&lt;div class=\"iq-example-row\"&gt;\n  &lt;b-container fluid&gt;\n    &lt;b-row class=\"mb-3\"&gt;\n      &lt;b-col&gt;col&lt;/b-col&gt;\n      &lt;b-col&gt;col&lt;/b-col&gt;\n      &lt;b-col&gt;col&lt;/b-col&gt;\n      &lt;b-col&gt;col&lt;/b-col&gt;\n    &lt;/b-row&gt;\n    &lt;b-row&gt;\n      &lt;b-col cols=\"8\"&gt;cols=\"8\"&lt;/b-col&gt;\n      &lt;b-col cols=\"4\"&gt;cols=\"4\"&lt;/b-col&gt;\n    &lt;/b-row&gt;\n  &lt;/b-container&gt;\n&lt;/div&gt;\n</code></pre>\n                </kbd>\n              </div>\n            </b-collapse>\n            <div class=\"iq-example-row\">\n              <b-container fluid>\n                <b-row class=\"mb-3\">\n                  <b-col>col</b-col>\n                  <b-col>col</b-col>\n                  <b-col>col</b-col>\n                  <b-col>col</b-col>\n                </b-row>\n                <b-row>\n                  <b-col cols=\"8\">cols=\"8\"</b-col>\n                  <b-col cols=\"4\">cols=\"4\"</b-col>\n                </b-row>\n              </b-container>\n            </div>\n          </template>\n        </iq-card>\n        <iq-card>\n          <template v-slot:headerTitle>\n            <h4 class=\"card-title\">Stacked to horizontal</h4>\n          </template>\n          <template v-slot:headerAction>\n            <a class=\"text-primary float-right\" v-b-toggle.collapse-7 role=\"button\">\n              <i class=\"ri-code-s-slash-line\" />\n            </a>\n          </template>\n          <template v-slot:body>\n            <p>Using a single set of <code>.col-sm-*</code> classes, you can create a basic grid system that starts out stacked and becomes horizontal at the small breakpoint (<code>sm</code>).</p>\n            <b-collapse id=\"collapse-7\" class=\"mb-2\">\n              <div class=\"card\">\n                <kbd class=\"bg-dark\">\n                  <pre class=\"text-white\" id=\"grid-7\">\n                    <code>\n&lt;div class=\"iq-example-row\"&gt;\n  &lt;b-container fluid&gt;\n    &lt;b-row class=\"mb-3\"&gt;\n      &lt;b-col sm=\"8\"&gt;sm=\"8\"&lt;/b-col&gt;\n      &lt;b-col sm=\"4\"&gt;sm=\"4\"&lt;/b-col&gt;\n    &lt;/b-row&gt;\n    &lt;b-row&gt;\n      &lt;b-col sm&gt;sm&lt;/b-col&gt;\n      &lt;b-col sm&gt;sm&lt;/b-col&gt;\n      &lt;b-col sm&gt;sm&lt;/b-col&gt;\n    &lt;/b-row&gt;\n  &lt;/b-container&gt;\n&lt;/div&gt;\n</code></pre>\n                </kbd>\n              </div>\n            </b-collapse>\n            <div class=\"iq-example-row\">\n              <b-container fluid>\n                <b-row class=\"mb-3\">\n                  <b-col sm=\"8\">sm=\"8\"</b-col>\n                  <b-col sm=\"4\">sm=\"4\"</b-col>\n                </b-row>\n                <b-row>\n                  <b-col sm>sm</b-col>\n                  <b-col sm>sm</b-col>\n                  <b-col sm>sm</b-col>\n                </b-row>\n              </b-container>\n            </div>\n          </template>\n        </iq-card>\n        <iq-card>\n          <template v-slot:headerTitle>\n            <h4 class=\"card-title\">Mix and match</h4>\n          </template>\n          <template v-slot:headerAction>\n            <a class=\"text-primary float-right\" v-b-toggle.collapse-8 role=\"button\">\n              <i class=\"ri-code-s-slash-line\" />\n            </a>\n          </template>\n          <template v-slot:body>\n            <p>Don’t want your columns to simply stack in some grid tiers? Use a combination of different classes for each tier as needed. See the example below for a better idea of how it all works.</p>\n            <b-collapse id=\"collapse-8\" class=\"mb-2\">\n              <div class=\"card\">\n                <kbd class=\"bg-dark\">\n                  <pre class=\"text-white\" id=\"grid-8\">\n                    <code>\n&lt;div class=\"iq-example-row\"&gt;\n  &lt;b-container fluid&gt;\n    &lt;!-- Stack the columns on mobile by making one full-width and the other half-width --&gt;\n    &lt;b-row class=\"mb-3\"&gt;\n      &lt;b-col cols=\"12\" md=\"8\"&gt;cols=\"12\" md=\"8\"&lt;/b-col&gt;\n      &lt;b-col cols=\"6\" md=\"4\"&gt;cols=\"6\" md=\"4\"&lt;/b-col&gt;\n    &lt;/b-row&gt;\n    &lt;!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop --&gt;\n    &lt;b-row class=\"mb-3\"&gt;\n      &lt;b-col cols=\"6\" md=\"4\"&gt;cols=\"6\" md=\"4\"&lt;/b-col&gt;\n      &lt;b-col cols=\"6\" md=\"4\"&gt;cols=\"6\" md=\"4\"&lt;/b-col&gt;\n      &lt;b-col cols=\"6\" md=\"4\"&gt;cols=\"6\" md=\"4\"&lt;/b-col&gt;\n    &lt;/b-row&gt;\n    &lt;!-- Columns are always 50% wide, on mobile and desktop --&gt;\n    &lt;b-row&gt;\n      &lt;b-col cols=\"6\"&gt;cols=\"6\"&lt;/b-col&gt;\n      &lt;b-col cols=\"6\"&gt;cols=\"6\"&lt;/b-col&gt;\n    &lt;/b-row&gt;\n  &lt;/b-container&gt;\n&lt;/div&gt;\n</code></pre>\n                </kbd>\n              </div>\n            </b-collapse>\n            <div class=\"iq-example-row\">\n              <b-container fluid>\n                <!-- Stack the columns on mobile by making one full-width and the other half-width -->\n                <b-row class=\"mb-3\">\n                  <b-col cols=\"12\" md=\"8\">cols=\"12\" md=\"8\"</b-col>\n                  <b-col cols=\"6\" md=\"4\">cols=\"6\" md=\"4\"</b-col>\n                </b-row>\n                <!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->\n                <b-row class=\"mb-3\">\n                  <b-col cols=\"6\" md=\"4\">cols=\"6\" md=\"4\"</b-col>\n                  <b-col cols=\"6\" md=\"4\">cols=\"6\" md=\"4\"</b-col>\n                  <b-col cols=\"6\" md=\"4\">cols=\"6\" md=\"4\"</b-col>\n                </b-row>\n                <!-- Columns are always 50% wide, on mobile and desktop -->\n                <b-row>\n                  <b-col cols=\"6\">cols=\"6\"</b-col>\n                  <b-col cols=\"6\">cols=\"6\"</b-col>\n                </b-row>\n              </b-container>\n            </div>\n          </template>\n        </iq-card>\n        <iq-card>\n          <template v-slot:headerTitle>\n            <h4 class=\"card-title\">Gutters</h4>\n          </template>\n          <template v-slot:headerAction>\n            <a class=\"text-primary float-right\" v-b-toggle.collapse-9 role=\"button\">\n              <i class=\"ri-code-s-slash-line\" />\n            </a>\n          </template>\n          <template v-slot:body>\n            <p>Gutters can be responsively adjusted by breakpoint-specific padding and negative margin utility classes. To change the gutters in a given row, pair a negative margin utility on the <code>.row</code> and matching padding utilities on the <code>.col</code>s. The <code>.container</code> or <code>.container-fluid</code> parent may need to be adjusted too to avoid unwanted overflow, using again matching padding utility.</p>\n            <p>Here’s an example of customizing the Bootstrap grid at the large (<code>lg</code>) breakpoint and above. We’ve increased the <code>.col</code> padding with <code>.px-lg-5</code>, counteracted that with <code>.mx-lg-n5</code> on the parent <code>.row</code> and then adjusted the <code>.container</code> wrapper with <code>.px-lg-5</code>.</p>\n            <b-collapse id=\"collapse-9\" class=\"mb-2\">\n              <div class=\"card\">\n                <kbd class=\"bg-dark\">\n                  <pre class=\"text-white\" id=\"grid-9\">\n                    <code>\n&lt;div class=\"iq-example-row\"&gt;\n  &lt;b-container fluid class=\"px-lg-5\"&gt;\n    &lt;b-row class=\"mx-lg-n5\"&gt;\n      &lt;b-col class=\"py-3 px-lg-5 border bg-light\"&gt;Custom column padding&lt;/b-col&gt;\n      &lt;b-col class=\"py-3 px-lg-5 border bg-light\"&gt;Custom column padding&lt;/b-col&gt;\n    &lt;/b-row&gt;\n  &lt;/b-container&gt;\n&lt;/div&gt;\n</code></pre>\n                </kbd>\n              </div>\n            </b-collapse>\n            <div class=\"iq-example-row\">\n              <b-container fluid class=\"px-lg-5\">\n                <b-row class=\"mx-lg-n5\">\n                  <b-col class=\"py-3 px-lg-5 border bg-light\">Custom column padding</b-col>\n                  <b-col class=\"py-3 px-lg-5 border bg-light\">Custom column padding</b-col>\n                </b-row>\n              </b-container>\n            </div>\n          </template>\n        </iq-card>\n        <iq-card>\n          <template v-slot:headerTitle>\n            <h4 class=\"card-title\">Alignment</h4>\n          </template>\n          <template v-slot:headerAction>\n            <a class=\"text-primary float-right\" v-b-toggle.collapse-10 role=\"button\">\n              <i class=\"ri-code-s-slash-line\" />\n            </a>\n          </template>\n          <template v-slot:body>\n            <p>Use flexbox alignment utilities to vertically and horizontally align columns. <strong>Internet Explorer 10-11 do not support vertical alignment of flex items when the flex container has a <code>min-height</code> as shown below.</strong> <a href=\"https://github.com/philipwalton/flexbugs#flexbug-3\">See Flexbugs #3 for more details.</a></p>\n            <h4 class=\"mb-3\">Vertical alignment</h4>\n            <b-collapse id=\"collapse-10\" class=\"mb-2\">\n              <div class=\"card\">\n                <kbd class=\"bg-dark\">\n                  <pre class=\"text-white\" id=\"grid-10\">\n                    <code>\n&lt;div class=\"iq-example-row iq-example-row-flex-cols\"&gt;\n  &lt;b-container fluid&gt;\n    &lt;b-row align-v=\"start\"&gt;\n      &lt;b-col&gt;One of three columns&lt;/b-col&gt;\n      &lt;b-col&gt;One of three columns&lt;/b-col&gt;\n      &lt;b-col&gt;One of three columns&lt;/b-col&gt;\n    &lt;/b-row&gt;\n    &lt;b-row align-v=\"center\"&gt;\n      &lt;b-col&gt;One of three columns&lt;/b-col&gt;\n      &lt;b-col&gt;One of three columns&lt;/b-col&gt;\n      &lt;b-col&gt;One of three columns&lt;/b-col&gt;\n    &lt;/b-row&gt;\n    &lt;b-row align-v=\"end\"&gt;\n      &lt;b-col&gt;One of three columns&lt;/b-col&gt;\n      &lt;b-col&gt;One of three columns&lt;/b-col&gt;\n      &lt;b-col&gt;One of three columns&lt;/b-col&gt;\n    &lt;/b-row&gt;\n  &lt;/b-container&gt;\n  &lt;b-container fluid&gt;\n    &lt;b-row&gt;\n      &lt;b-col align-self=\"start\"&gt;One of three columns&lt;/b-col&gt;\n      &lt;b-col align-self=\"center\"&gt;One of three columns&lt;/b-col&gt;\n      &lt;b-col align-self=\"end\"&gt;One of three columns&lt;/b-col&gt;\n    &lt;/b-row&gt;\n  &lt;/b-container&gt;\n&lt;/div&gt;\n</code></pre>\n                </kbd>\n              </div>\n            </b-collapse>\n            <div class=\"iq-example-row iq-example-row-flex-cols\">\n              <b-container fluid>\n                <b-row align-v=\"start\">\n                  <b-col>One of three columns</b-col>\n                  <b-col>One of three columns</b-col>\n                  <b-col>One of three columns</b-col>\n                </b-row>\n                <b-row align-v=\"center\">\n                  <b-col>One of three columns</b-col>\n                  <b-col>One of three columns</b-col>\n                  <b-col>One of three columns</b-col>\n                </b-row>\n                <b-row align-v=\"end\">\n                  <b-col>One of three columns</b-col>\n                  <b-col>One of three columns</b-col>\n                  <b-col>One of three columns</b-col>\n                </b-row>\n              </b-container>\n              <b-container fluid>\n                <b-row>\n                  <b-col align-self=\"start\">One of three columns</b-col>\n                  <b-col align-self=\"center\">One of three columns</b-col>\n                  <b-col align-self=\"end\">One of three columns</b-col>\n                </b-row>\n              </b-container>\n            </div>\n          </template>\n        </iq-card>\n        <iq-card>\n          <template v-slot:headerTitle>\n            <h4 class=\"card-title\">Horizontal alignment</h4>\n          </template>\n          <template v-slot:headerAction>\n            <a class=\"text-primary float-right\" v-b-toggle.collapse-11 role=\"button\">\n              <i class=\"ri-code-s-slash-line\" />\n            </a>\n          </template>\n          <template v-slot:body>\n          <p>Create equal-width columns that span multiple rows by inserting a <code>.w-100</code> where you want the columns to break to a new line. Make the breaks responsive by mixing the <code>.w-100</code> with some <a href=\"/docs/4.3/utilities/display/\">responsive display utilities</a>.</p>\n            <b-collapse id=\"collapse-11\" class=\"mb-2\">\n              <div class=\"card\">\n                <kbd class=\"bg-dark\">\n                  <pre class=\"text-white\" id=\"grid-11\">\n                    <code>\n&lt;div class=\"iq-example-row\"&gt;\n  &lt;b-container fluid&gt;\n    &lt;b-row align-h=\"start\" class=\"mb-3\"&gt;\n      &lt;b-col cols=\"4\"&gt;One of two columns&lt;/b-col&gt;\n      &lt;b-col cols=\"4\"&gt;One of two columns&lt;/b-col&gt;\n    &lt;/b-row&gt;\n    &lt;b-row align-h=\"center\" class=\"mb-3\"&gt;\n      &lt;b-col cols=\"4\"&gt;One of two columns&lt;/b-col&gt;\n      &lt;b-col cols=\"4\"&gt;One of two columns&lt;/b-col&gt;\n    &lt;/b-row&gt;\n    &lt;b-row align-h=\"end\" class=\"mb-3\"&gt;\n      &lt;b-col cols=\"4\"&gt;One of two columns&lt;/b-col&gt;\n      &lt;b-col cols=\"4\"&gt;One of two columns&lt;/b-col&gt;\n    &lt;/b-row&gt;\n    &lt;b-row align-h=\"around\" class=\"mb-3\"&gt;\n      &lt;b-col cols=\"4\"&gt;One of two columns&lt;/b-col&gt;\n      &lt;b-col cols=\"4\"&gt;One of two columns&lt;/b-col&gt;\n    &lt;/b-row&gt;\n    &lt;b-row align-h=\"between\" class=\"mb-3\"&gt;\n      &lt;b-col cols=\"4\"&gt;One of two columns&lt;/b-col&gt;\n      &lt;b-col cols=\"4\"&gt;One of two columns&lt;/b-col&gt;\n    &lt;/b-row&gt;\n  &lt;/b-container&gt;\n&lt;/div&gt;\n</code></pre>\n                </kbd>\n              </div>\n            </b-collapse>\n            <div class=\"iq-example-row\">\n              <b-container fluid>\n                <b-row align-h=\"start\" class=\"mb-3\">\n                  <b-col cols=\"4\">One of two columns</b-col>\n                  <b-col cols=\"4\">One of two columns</b-col>\n                </b-row>\n                <b-row align-h=\"center\" class=\"mb-3\">\n                  <b-col cols=\"4\">One of two columns</b-col>\n                  <b-col cols=\"4\">One of two columns</b-col>\n                </b-row>\n                <b-row align-h=\"end\" class=\"mb-3\">\n                  <b-col cols=\"4\">One of two columns</b-col>\n                  <b-col cols=\"4\">One of two columns</b-col>\n                </b-row>\n                <b-row align-h=\"around\" class=\"mb-3\">\n                  <b-col cols=\"4\">One of two columns</b-col>\n                  <b-col cols=\"4\">One of two columns</b-col>\n                </b-row>\n                <b-row align-h=\"between\" class=\"mb-3\">\n                  <b-col cols=\"4\">One of two columns</b-col>\n                  <b-col cols=\"4\">One of two columns</b-col>\n                </b-row>\n              </b-container>\n            </div>\n          </template>\n        </iq-card>\n      </b-col>\n    </b-row>\n  </b-container>\n</template>\n<script>\nimport { core } from '../../config/pluginInit'\nexport default {\n  name: 'UiGrid',\n  mounted () {\n    core.index()\n  }\n}\n</script>\n","import mod from \"-!../../../node_modules/cache-loader/dist/cjs.js??ref--13-0!../../../node_modules/thread-loader/dist/cjs.js!../../../node_modules/babel-loader/lib/index.js!../../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./UiGrid.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../../node_modules/cache-loader/dist/cjs.js??ref--13-0!../../../node_modules/thread-loader/dist/cjs.js!../../../node_modules/babel-loader/lib/index.js!../../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./UiGrid.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./UiGrid.vue?vue&type=template&id=e76f0104&\"\nimport script from \"./UiGrid.vue?vue&type=script&lang=js&\"\nexport * from \"./UiGrid.vue?vue&type=script&lang=js&\"\n\n\n/* normalize component */\nimport normalizer from \"!../../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n  script,\n  render,\n  staticRenderFns,\n  false,\n  null,\n  null,\n  null\n  \n)\n\nexport default component.exports"],"sourceRoot":""}