Single Column
<div class="row gutters">
<div class="col-12">Column</div>
</div>
Two Columns
<div class="row gutters">
<div class="col-6">Column</div>
<div class="col-6">Column</div>
</div>
Three Columns
<div class="row gutters">
<div class="col-4">Column</div>
<div class="col-4">Column</div>
<div class="col-4">Column</div>
</div>
Four Columns
<div class="row gutters">
<div class="col-3">Column</div>
<div class="col-3">Column</div>
<div class="col-3">Column</div>
<div class="col-3">Column</div>
</div>
Six Columns
<div class="row gutters">
<div class="col-2">Column</div>
<div class="col-2">Column</div>
<div class="col-2">Column</div>
<div class="col-2">Column</div>
<div class="col-2">Column</div>
<div class="col-2">Column</div>
</div>
Twelve Columns
<div class="row gutters">
<div class="col-1">Column</div>
<div class="col-1">Column</div>
<div class="col-1">Column</div>
<div class="col-1">Column</div>
<div class="col-1">Column</div>
<div class="col-1">Column</div>
<div class="col-1">Column</div>
<div class="col-1">Column</div>
<div class="col-1">Column</div>
<div class="col-1">Column</div>
<div class="col-1">Column</div>
<div class="col-1">Column</div>
</div>
Different Column Sizes
<div class="row gutters">
<div class="col-2">Column</div>
<div class="col-4">Column</div>
<div class="col-6">Column</div>
<div class="col-4">Column</div>
<div class="col-5">Column</div>
<div class="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.
<div class="row gutters justify-content-start">
<div class="col-2">Column</div>
<div class="col-2">Column</div>
<div class="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.
<div class="row gutters justify-content-end">
<div class="col-2">Column</div>
<div class="col-2">Column</div>
<div class="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.
<div class="row gutters justify-content-center">
<div class="col-2">Column</div>
<div class="col-2">Column</div>
<div class="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.
<div class="row gutters justify-content-between">
<div class="col-2">Column</div>
<div class="col-2">Column</div>
<div class="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.
<div class="row gutters justify-content-around">
<div class="col-2">Column</div>
<div class="col-2">Column</div>
<div class="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.
<div class="row no-gutters">
<div class="col-4">Column</div>
<div class="col-4">Column</div>
<div class="col-4">Column</div>
</div>
Column sizes at different breakpoints
Resize the screen to view column sizes.
<div class="row gutters">
<div class="col-xl-4 col-md-6 col-sm-4 col-12">Column</div>
<div class="col-xl-4 col-md-6 col-sm-4 col-12">Column</div>
<div class="col-xl-4 col-md-12 col-sm-4 col-12">Column</div>
</div>