Grid System
Breakpoints
| Breakpoint prefix | Class | Dimensions |
|---|---|---|
| Extra small | `none` | ≥0px |
| Small |
sm
|
≥576px |
| Medium |
md
|
≥768px |
| Large |
lg
|
≥992px |
| Extra large |
xl
|
≥1200px |
| Ultra |
ultra
|
≥1440px |
Basic usage
Title
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ex tempore enim ipsa, ullam aspernatur ipsam porro nemo, veniam praesentium, dolorem explicabo neque nobis sapiente quis.
Title
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ex tempore enim ipsa, ullam aspernatur ipsam porro nemo, veniam praesentium, dolorem explicabo neque nobis sapiente quis.
Title
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ex tempore enim ipsa, ullam aspernatur ipsam porro nemo, veniam praesentium, dolorem explicabo neque nobis sapiente quis.
Title
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ex tempore enim ipsa, ullam aspernatur ipsam porro nemo, veniam praesentium, dolorem explicabo neque nobis sapiente quis.
Title
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ex tempore enim ipsa, ullam aspernatur ipsam porro nemo, veniam praesentium, dolorem explicabo neque nobis sapiente quis.
<div class="container">
<div class="row"> /* add gapless class if you don't want gap */
<div class="xl:col-3 lg:col-4 md:col-6 col-12">
<!-- column content -->
</div>
</div>
<div class="row">
<div class="xl:col-3 lg:col-4 md:col-6 col-12">
<!-- column content -->
</div>
</div>
</div>