Single Column
<divclass="row gutters"><divclass="col-12">Column</div></div>
Two Columns
<divclass="row gutters"><divclass="col-6">Column</div><divclass="col-6">Column</div></div>
Three Columns
<divclass="row gutters"><divclass="col-4">Column</div><divclass="col-4">Column</div><divclass="col-4">Column</div></div>
Four Columns
<divclass="row gutters"><divclass="col-3">Column</div><divclass="col-3">Column</div><divclass="col-3">Column</div><divclass="col-3">Column</div></div>
Six Columns
<divclass="row gutters"><divclass="col-2">Column</div><divclass="col-2">Column</div><divclass="col-2">Column</div><divclass="col-2">Column</div><divclass="col-2">Column</div><divclass="col-2">Column</div></div>
Twelve Columns
<divclass="row gutters"><divclass="col-1">Column</div><divclass="col-1">Column</div><divclass="col-1">Column</div><divclass="col-1">Column</div><divclass="col-1">Column</div><divclass="col-1">Column</div><divclass="col-1">Column</div><divclass="col-1">Column</div><divclass="col-1">Column</div><divclass="col-1">Column</div><divclass="col-1">Column</div><divclass="col-1">Column</div></div>
Different Column Sizes
<divclass="row gutters"><divclass="col-2">Column</div><divclass="col-4">Column</div><divclass="col-6">Column</div><divclass="col-4">Column</div><divclass="col-5">Column</div><divclass="col-3">Column</div></div>
Justify content start
Use justify-content utilities on flexbox containers to change the alignment of flex items on the main axis (the x-axis to start, y-axis if flex-direction: column). Choose from start (browser default), end, center, between, or around.
<divclass="row gutters justify-content-start"><divclass="col-2">Column</div><divclass="col-2">Column</div><divclass="col-2">Column</div></div>
Justify content end
Use justify-content utilities on flexbox containers to change the alignment of flex items on the main axis (the x-axis to start, y-axis if flex-direction: column). Choose from start (browser default), end, center, between, or around.
<divclass="row gutters justify-content-end"><divclass="col-2">Column</div><divclass="col-2">Column</div><divclass="col-2">Column</div></div>
Justify content center
Use justify-content utilities on flexbox containers to change the alignment of flex items on the main axis (the x-axis to start, y-axis if flex-direction: column). Choose from start (browser default), end, center, between, or around.
<divclass="row gutters justify-content-center"><divclass="col-2">Column</div><divclass="col-2">Column</div><divclass="col-2">Column</div></div>
Justify content between
Use justify-content utilities on flexbox containers to change the alignment of flex items on the main axis (the x-axis to start, y-axis if flex-direction: column). Choose from start (browser default), end, center, between, or around.
<divclass="row gutters justify-content-between"><divclass="col-2">Column</div><divclass="col-2">Column</div><divclass="col-2">Column</div></div>
Justify content around
Use justify-content utilities on flexbox containers to change the alignment of flex items on the main axis (the x-axis to start, y-axis if flex-direction: column). Choose from start (browser default), end, center, between, or around.
<divclass="row gutters justify-content-around"><divclass="col-2">Column</div><divclass="col-2">Column</div><divclass="col-2">Column</div></div>
No Gutters
The gutters between columns in our predefined grid classes can be removed with .no-gutters. This removes the negative margins from .row and the horizontal padding from all immediate children columns.
<divclass="row no-gutters"><divclass="col-4">Column</div><divclass="col-4">Column</div><divclass="col-4">Column</div></div>
Column sizes at different breakpoints
Resize the screen to view column sizes.
<divclass="row gutters"><divclass="col-xl-4 col-lg-6 col-md-6 col-sm-4 col-12">Column</div><divclass="col-xl-4 col-lg-6 col-md-6 col-sm-4 col-12">Column</div><divclass="col-xl-4 col-lg-12 col-md-12 col-sm-4 col-12">Column</div></div>