to see output.
<div class="container">
<div class="row">
<div class="bg-primary col">
Column
</div>
<div class="bg-success col">
Column
</div>
<div class="bg-danger col">
Column
</div>
</div>
</div>
This result in to three align div a left sidebar, content div and right sidebar.
Note i added extra class of bg-* so you can see the output on html editor
Bootstrap divided the grid in to 12 equal parts. as 1 to 12, so all col or offset sum should be 12.
Now we see the example with col unequal division
<div class="container">
<div class="row">
<div class="bg-primary col-2">
Column
</div>
<div class="bg-success col-4">
Column
</div>
<div class="bg-danger col-6">
Column
</div>
</div>
</div>
Note: col-2 + col-4 + col-6 = col-12
Grid Options
To make responsive design on different devices bootstrap grid options are divided into six categories
- Extra small (xs), target class col-*
- Small (sm), target class col-sm-*
- Medium (md), target class col-md-*
- Large (lg), target class col-lg-*
- Extra Large (xl), target class col-xl-*
- Extra extra large (xxl), target class col-xxl-*
Here * represent 1 to 12 numbers
Example 1
<div class="row">
<div class="bg-success col-12"></div>
</div>
This result in to single grid horizontally beucase it is col-12
Example 2
<div class="row">
<div class="bg-success col-6"></div>
<div class="bg-success col-6></div>
</div>
