Framework:
DownloadHire UsGet CoreUI PRO

Support CoreUI Development

CoreUI is an MIT-licensed open source project and is completely free to use. However, the amount of effort needed to maintain and develop new features for the project is not sustainable without proper financial backing.

You can support our Open Source software development in the following ways:

  • Buy the CoreUI PRO, and get access to PRO components, and dedicated support.
  • Became a sponsor, and get your logo on BACKERS.md/README.md files or each site of this documentation
  • Give us a star ⭐️ on Github.

Gutters

Gutters are the padding between your columns, used to responsively space and align content in the CoreUI for React.js grid system.

How they work#

  • Gutters are the gaps between column content, created by horizontal padding. We set padding-right and padding-left on each column, and use negative margin 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:

Custom column padding
Custom column padding
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:

Custom column padding
Custom column padding
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:

Custom column padding
Custom column padding
Custom column padding
Custom column padding
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.

Custom column padding
Custom column padding
Custom column padding
Custom column padding
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.

Row column
Row column
Row column
Row column
Row column
Row column
Row column
Row column
Row column
Row column
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 margins 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).

.col-sm-6 .col-md-8
.col-6 .col-md-4
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/react'
2// or
3import CContainer from '@coreui/react/src/components/grid/CContainer'
PropertyDescriptionTypeDefault
classNameA string of all className you want applied to the base component.string-
fluidSet container 100% wide, spanning the entire width of the viewport.boolean-
lgSet container 100% wide until large breakpoint.boolean-
mdSet container 100% wide until medium breakpoint.boolean-
smSet container 100% wide until small breakpoint.boolean-
xlSet container 100% wide until X-large breakpoint.boolean-
xxlSet container 100% wide until XX-large breakpoint.boolean-

CRow#

1import { CRow } from '@coreui/react'
2// or
3import CRow from '@coreui/react/src/components/grid/CRow'
PropertyDescriptionTypeDefault
classNameA string of all className you want applied to the base component.string-
lgThe number of columns/offset/order on large devices (<1200px).{{ cols: 'auto' | number | string } | { gutter: number | string } | { gutterX: number | string } | { gutterY: number | string }}-
mdThe number of columns/offset/order on medium devices (<992px).{{ cols: 'auto' | number | string } | { gutter: number | string } | { gutterX: number | string } | { gutterY: number | string }}-
smThe number of columns/offset/order on small devices (<768px).{{ cols: 'auto' | number | string } | { gutter: number | string } | { gutterX: number | string } | { gutterY: number | string }}-
xlThe number of columns/offset/order on X-Large devices (<1400px).{{ cols: 'auto' | number | string } | { gutter: number | string } | { gutterX: number | string } | { gutterY: number | string }}-
xsThe number of columns/offset/order on extra small devices (<576px).{{ cols: 'auto' | number | string } | { gutter: number | string } | { gutterX: number | string } | { gutterY: number | string }}-
xxlThe 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/react'
2// or
3import CCol from '@coreui/react/src/components/grid/CCol'
PropertyDescriptionTypeDefault
classNameA string of all className you want applied to the base component.string-
lgThe 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 }}-
mdThe 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 }}-
smThe 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 }}-
xlThe 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 }}-
xsThe 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 }}-
xxlThe 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 }}-
On this page

CoreUI for React is Open Source UI Components Library for React.js.

CoreUI code licensed MIT, docs CC BY 3.0. CoreUI PRO requires a commercial license.