<div class="container-fluid">
<div class='row'>
<div class='col-sm'>class='col-sm'<br>1/4 equal sections</div>
<div class='col-sm'>class='col-sm'<br>1/4 equal sections</div>
<div class='col-sm'>class='col-sm'<br>1/4 equal sections</div>
<div class='col-sm'>class='col-sm'<br>1/4 equal sections</div>
</div>
</div>
You can use the same class to show equal width of 2 or 3 columns.
<div class="container-fluid">
<div class='row'>
<div class='col-1'>col-1</div>
<div class='col-7'>class='col-7'<br>7/12 sections</div>
<div class='col-4'>class='col-4'<br>4/12 sections</div>
</div>
</div>
<div class="container-fluid">
<div class='row'>
<div class='w-50'>class='w-50'<br>50% of full width</div>
<div class='col'>class='col'</div>
<div class='col'>class='col'</div>
</div>
</div>
align-items-start
for top alignalign-items-center
for center alignalign-items-end
for bottom align<div class="container-fluid">
<div class='row align-items-start'>
<div class='w-25 border'>class='w-25'<br><br>25% of full width</div>
<div class='col border'>class='col'</div>
<div class='col border'>class='col'</div>
</div>
<br>
<div class='row align-items-center'>
<div class='w-25 border'>class='w-25'<br><br>25% of full width</div>
<div class='col border'>class='col'</div>
<div class='col border'>class='col'</div>
</div>
<br>
<div class='row align-items-end'>
<div class='w-25 border'>class='w-25'<br><br>25% of full width</div>
<div class='col border'>class='col'</div>
<div class='col border'>class='col'</div>
</div>
</div>
<div class='row align-items-start'>
<div class='col offset-md-2'>class='col offset-md-2'<br>with offset</div>
<div class='col'>class='col'</div>
<div class='col'>class='col'</div>
</div>
</div>
Two columns with offset
<div class="container-fluid">
<div class='row align-items-start'>
<div class='col >class='col </div>
<div class='col offset-md-2'>class='col offset-md-2'<br><br>with offset</div>
</div>
</div>
<div class='container-fluid'>
<div class='row align-items-start'>
<div class='col order-8'> 1st column<br> order-8</div>
<div class='col order-2'> 2nd column<br> order-2</div>
<div class='col' > 3rd column <br> No order</div>
<div class='col order-1'> 4th column<br> order-1</div>
</div>
</div>
Using .order-last
and .order-first
<div class='container-fluid'>
<div class='row align-items-start'>
<div class='col border order-last'> 1st column<br> order-last</div>
<div class='col border' > 2nd column <br> No order</div>
<div class='col border order-first'> 4th column<br> order-first</div>
</div>
</div>
Most Popular JQuery Scripts | |
1 | Two dependant list boxes |
2 | Calendar with Date Selection |
3 | Data change by Slider |
4 | Show & Hide element |