Grid
Bootstrap's flexbox based grid is used to build layouts of all shapes and sizes using a twelve column system.
This is a simple demo of the grid options. For more details on the available Bootstrap grid options, see https://getbootstrap.com/docs/4.1/layout/grid/
There are five default grid breakpoints available for building layouts the are responsive across different sizes of media devices.
| Class prefix | Grid breakpoints (px) | Breakpoint max width (px) |
|---|---|---|
xs |
0px | 320px |
sm |
600px | 601px |
md |
768px | 769px |
lg |
1023px | 1024px |
xl |
1199px | 1200px |
12
6
6
4
4
4
3
3
3
3
2
2
2
2
2
2
1
1
1
1
1
1
1
1
1
1
1
1
grid\grid.hbs
<section class="grid-example">
<div class="container">
<div class="row">
<div class="col-12">
<div class="inner">12</div>
</div>
</div>
<div class="row">
<div class="col-6">
<div class="inner">6</div>
</div>
<div class="col-6">
<div class="inner">6</div>
</div>
</div>
<div class="row">
<div class="col-4">
<div class="inner">4</div>
</div>
<div class="col-4">
<div class="inner">4</div>
</div>
<div class="col-4">
<div class="inner">4</div>
</div>
</div>
<div class="row">
<div class="col-3">
<div class="inner">3</div>
</div>
<div class="col-3">
<div class="inner">3</div>
</div>
<div class="col-3">
<div class="inner">3</div>
</div>
<div class="col-3">
<div class="inner">3</div>
</div>
</div>
<div class="row">
<div class="col-2">
<div class="inner">2</div>
</div>
<div class="col-2">
<div class="inner">2</div>
</div>
<div class="col-2">
<div class="inner">2</div>
</div>
<div class="col-2">
<div class="inner">2</div>
</div>
<div class="col-2">
<div class="inner">2</div>
</div>
<div class="col-2">
<div class="inner">2</div>
</div>
</div>
<div class="row">
<div class="col-1">
<div class="inner">1</div>
</div>
<div class="col-1">
<div class="inner">1</div>
</div>
<div class="col-1">
<div class="inner">1</div>
</div>
<div class="col-1">
<div class="inner">1</div>
</div>
<div class="col-1">
<div class="inner">1</div>
</div>
<div class="col-1">
<div class="inner">1</div>
</div>
<div class="col-1">
<div class="inner">1</div>
</div>
<div class="col-1">
<div class="inner">1</div>
</div>
<div class="col-1">
<div class="inner">1</div>
</div>
<div class="col-1">
<div class="inner">1</div>
</div>
<div class="col-1">
<div class="inner">1</div>
</div>
<div class="col-1">
<div class="inner">1</div>
</div>
</div>
</div>
</section>
Source:
template/assets/scss/_grid.scss