Grid Components

Grid components.

Container

Usage

Example

col-lg-5

col-md-4

col-sm-3

Script


  return (
    <CContainer>
      <CRow>
        <CCol lg="5" className="bg-success py-3">
          col-lg-5
        </CCol>
        <CCol md="4" className="bg-warning py-3">
          col-md-4
        </CCol>
        <CCol sm="3" className="bg-danger py-3">
          col-sm-3
        </CCol>
      </CRow>
    </CContainer>
  )

# Container API

Name	Type	Default Value
tag	any	div
main HTML tag name
className	string
user classes for the main HTML tag
innerRef	(object \| Function \| string)
ref to the main tag
fluid	boolean
set fluid type

Row

# Row API

Name	Type	Default Value
tag	any	div
main HTML tag name
className	string
user classes for the main HTML tag
innerRef	(object \| Function \| string)
ref to the main tag
gutters	boolean	true
render gutters
form	boolean
render form-row
alignHorizontal	string
set justify-content-* class
alignVertical	string
set align-* class

Col

# Col API

Name	Type	Default Value
tag	any	div
main HTML tag name
className	string
user classes for the main HTML tag
innerRef	(object \| Function \| string)
ref to the main tag
widths	any[]	["xs","sm","md","lg","xl"]
set of available widths