Gutters
Gutters are the padding between your columns, used to responsively space and align content in the Bootstrap React grid system.
How they work#
Gutters are the gaps between column content, created by horizontal
padding
. We setpadding-right
andpadding-left
on each column, and use negativemargin
to offset that at the start and end of each row to align content.Gutters start at
1.5rem
(24px
) wide. This allows us to match our grid to the padding and margin spacers scale.Gutters can be responsively adjusted. Use breakpoint-specific gutter props to modify horizontal gutters, vertical gutters, and all gutters.
Horizontal gutters#
{breakpoint}={{ gutterX: * }}
props can be used to control the horizontal gutter widths. The <CContainer>
or <CContainer fluid>
parent may need to be adjusted if larger gutters are used too to avoid unwanted overflow, using a matching padding utility. For example, in the following example we've increased the padding with .px-4
:
1<CContainer className="px-4">2 <CRow xs={{ gutterX: 5 }}>3 <CCol>4 <div className="p-3 border bg-light">Custom column padding</div>5 </CCol>6 <CCol>7 <div className="p-3 border bg-light">Custom column padding</div>8 </CCol>9 </CRow>10</CContainer>
An alternative solution is to add a wrapper around the <CRow>
with the .overflow-hidden
class:
1<CContainer className="overflow-hidden">2 <CRow xs={{ gutterX: 5 }}>3 <CCol>4 <div className="p-3 border bg-light">Custom column padding</div>5 </CCol>6 <CCol>7 <div className="p-3 border bg-light">Custom column padding</div>8 </CCol>9 </CRow>10</CContainer>
Vertical gutters#
{breakpoint}={{ gutterY: * }}
props can be used to control the vertical gutter widths. Like the horizontal gutters, the vertical gutters can cause some overflow below the <CRow>
at the end of a page. If this occurs, you add a wrapper around <CRow>
with the .overflow-hidden
class:
1<CContainer className="overflow-hidden">2 <CRow xs={{ gutterY: 5 }}>3 <CCol xs={{ span: 6 }}>4 <div className="p-3 border bg-light">Custom column padding</div>5 </CCol>6 <CCol xs={{ span: 6 }}>7 <div className="p-3 border bg-light">Custom column padding</div>8 </CCol>9 <CCol xs={{ span: 6 }}>10 <div className="p-3 border bg-light">Custom column padding</div>11 </CCol>12 <CCol xs={{ span: 6 }}>13 <div className="p-3 border bg-light">Custom column padding</div>14 </CCol>15 </CRow>16</CContainer>
Horizontal & vertical gutters#
{breakpoint}={{ gutter: * }}
props can be used to control the horizontal gutter widths, for the following example we use a smaller gutter width, so there won't be a need to add the .overflow-hidden
wrapper class.
1<CContainer>2 <CRow xs={{ gutter: 2 }}>3 <CCol xs={{ span: 6 }}>4 <div className="p-3 border bg-light">Custom column padding</div>5 </CCol>6 <CCol xs={{ span: 6 }}>7 <div className="p-3 border bg-light">Custom column padding</div>8 </CCol>9 <CCol xs={{ span: 6 }}>10 <div className="p-3 border bg-light">Custom column padding</div>11 </CCol>12 <CCol xs={{ span: 6 }}>13 <div className="p-3 border bg-light">Custom column padding</div>14 </CCol>15 </CRow>16</CContainer>
Row columns gutters#
Gutter props can also be added to row columns. In the following example, we use responsive row columns and responsive gutter props.
1<CContainer>2 <CRow xs={{ cols:2, gutter: 2 }} lg={{ cols: 5, gutter: 3}}>3 <CCol>4 <div className="p-3 border bg-light">Row column</div>5 </CCol>6 <CCol>7 <div className="p-3 border bg-light">Row column</div>8 </CCol>9 <CCol>10 <div className="p-3 border bg-light">Row column</div>11 </CCol>12 <CCol>13 <div className="p-3 border bg-light">Row column</div>14 </CCol>15 <CCol>16 <div className="p-3 border bg-light">Row column</div>17 </CCol>18 <CCol>19 <div className="p-3 border bg-light">Row column</div>20 </CCol>21 <CCol>22 <div className="p-3 border bg-light">Row column</div>23 </CCol>24 <CCol>25 <div className="p-3 border bg-light">Row column</div>26 </CCol>27 <CCol>28 <div className="p-3 border bg-light">Row column</div>29 </CCol>30 <CCol>31 <div className="p-3 border bg-light">Row column</div>32 </CCol>33 </CRow>34</CContainer>
No gutters#
The gutters between columns in our predefined grid props can be removed with {breakpoint}={{ gutter: 0 }}
. This removes the negative margin
s from <CRow>
and the horizontal padding
from all immediate children columns.
Need an edge-to-edge design? Drop the parent <CContainer>
or <CContainer fluid>
.
In practice, here's how it looks. Note you can continue to use this with all other predefined grid props (including column widths, responsive tiers, reorders, and more).
1<div className="docs-example-row">2 <CRow xs={{ gutter: 0 }}>3 <CCol sm={6} md={8}>.col-sm-6 .col-md-8</CCol>4 <CCol xs={6} md={4}>.col-6 .col-md-4</CCol>5 </CRow>6</div>
API#
CContainer#
1import { CContainer } from '@coreui/bootstrap-react'2// or3import CContainer from '@coreui/bootstrap-react/src/components/grid/CContainer'
Property | Description | Type | Default |
---|---|---|---|
className | A string of all className you want applied to the base component. | string | - |
fluid | Set container 100% wide, spanning the entire width of the viewport. | boolean | - |
lg | Set container 100% wide until large breakpoint. | boolean | - |
md | Set container 100% wide until medium breakpoint. | boolean | - |
sm | Set container 100% wide until small breakpoint. | boolean | - |
xl | Set container 100% wide until X-large breakpoint. | boolean | - |
xxl | Set container 100% wide until XX-large breakpoint. | boolean | - |
CRow#
1import { CRow } from '@coreui/bootstrap-react'2// or3import CRow from '@coreui/bootstrap-react/src/components/grid/CRow'
Property | Description | Type | Default |
---|---|---|---|
className | A string of all className you want applied to the base component. | string | - |
lg | The number of columns/offset/order on large devices (<1200px). | {{ cols: 'auto' | number | string } | { gutter: number | string } | { gutterX: number | string } | { gutterY: number | string }} | - |
md | The number of columns/offset/order on medium devices (<992px). | {{ cols: 'auto' | number | string } | { gutter: number | string } | { gutterX: number | string } | { gutterY: number | string }} | - |
sm | The number of columns/offset/order on small devices (<768px). | {{ cols: 'auto' | number | string } | { gutter: number | string } | { gutterX: number | string } | { gutterY: number | string }} | - |
xl | The number of columns/offset/order on X-Large devices (<1400px). | {{ cols: 'auto' | number | string } | { gutter: number | string } | { gutterX: number | string } | { gutterY: number | string }} | - |
xs | The number of columns/offset/order on extra small devices (<576px). | {{ cols: 'auto' | number | string } | { gutter: number | string } | { gutterX: number | string } | { gutterY: number | string }} | - |
xxl | The number of columns/offset/order on XX-Large devices (≥1400px). | {{ cols: 'auto' | number | string } | { gutter: number | string } | { gutterX: number | string } | { gutterY: number | string }} | - |
CCol#
1import { CCol } from '@coreui/bootstrap-react'2// or3import CCol from '@coreui/bootstrap-react/src/components/grid/CCol'
Property | Description | Type | Default |
---|---|---|---|
className | A string of all className you want applied to the base component. | string | - |
lg | The number of columns/offset/order on large devices (<1200px). | { 'auto' | number | string | boolean | { span: 'auto' | number | string | boolean } | { offset: number | string } | { order: 'first' | 'last' | number | string }} | - |
md | The number of columns/offset/order on medium devices (<992px). | { 'auto' | number | string | boolean | { span: 'auto' | number | string | boolean } | { offset: number | string } | { order: 'first' | 'last' | number | string }} | - |
sm | The number of columns/offset/order on small devices (<768px). | { 'auto' | number | string | boolean | { span: 'auto' | number | string | boolean } | { offset: number | string } | { order: 'first' | 'last' | number | string }} | - |
xl | The number of columns/offset/order on X-Large devices (<1400px). | { 'auto' | number | string | boolean | { span: 'auto' | number | string | boolean } | { offset: number | string } | { order: 'first' | 'last' | number | string }} | - |
xs | The number of columns/offset/order on extra small devices (<576px). | { 'auto' | number | string | boolean | { span: 'auto' | number | string | boolean } | { offset: number | string } | { order: 'first' | 'last' | number | string }} | - |
xxl | The number of columns/offset/order on XX-Large devices (≥1400px). | { 'auto' | number | string | boolean | { span: 'auto' | number | string | boolean } | { offset: number | string } | { order: 'first' | 'last' | number | string }} | - |