| container | container for the grid. |
<div class="container">content</div> |
|---|
| container-fluid | fluid container for full-width. |
<div class="container-fluid">full-width container</div> |
|---|
| row | row elements of the grid. |
<div class="row">
... column elements for the row
</div> |
|---|
| col-# ( <576px) | a column with specified width. |
<div class="col-2">
<div class="col-4">
<div class="col-8"> |
|---|
| col-sm-# ( ≥576px) | small columns with specified width. |
<div class="col-sm-2"> <div class="col-sm-4">
<div class="col-sm-8"> |
|---|
| col-md-# ( ≥768px) | medium column. |
<div class="col-md-2">
<div class="col-md-4"> |
|---|
| col-lg-# ( ≥992px) | large column |
<div class="col-lg-2">
<div class="col-lg-4">
<div class="col-lg-8"> |
|---|
| col-xl-# ( ≥1200px) | extra large column. |
<div class="col-xl-2">
<div class="col-xl-4">
<div class="col-xl-8"> |
|---|
| col | equal size column. |
<div class="col"> |
|---|
| col-* | equal width columns – col-sm, col-md, col-lg, col-xl. |
<div class="col-xl"> |
|---|
| no-gutters | remove horizontal padding between columns and margins between rows. |
<div class="row no-gutters">... column definitions</div> |
|---|
| offset-*-# | small, medium, large or extra large offsets with size. |
<div class="col-3 offset-6"><div class="col-md-3 offset-md-6"> |
|---|
| order-# | order in which the column should appear. |
<div class="col order-md-2">Ordered column</div><div class="col order-1"> |
|---|
| nested columns | columns inside column. |
<div class="row">
<div class="col-sm-10"> Level 1: small column with 10 <div class="row"> <div class="col-8 col-sm-3"> Nested column </div>
<div class="col-4 col-sm-3"> Nested column </div> </div> </div></div> |
|---|
