Grid
Grid Options
See how aspects of the Bootstrap grid system work across multiple devices with a handy table.
|
xs <576px |
sm ≥576px |
md ≥768px |
lg ≥992px |
xl ≥1200px |
xxl ≥1400px |
|
|---|---|---|---|---|---|---|
| Grid behavior | Horizontal at all times | Collapsed to start, horizontal above breakpoints | ||||
| Max container width | None (auto) | 540px | 720px | 960px | 1140px | 1320px |
| Class prefix | col- |
col-sm- |
col-md- |
col-lg- |
col-xl- |
col-xxl- |
| # of columns | 12 | |||||
| Gutter width | 24px (12px on each side of a column) | |||||
| Custom gutters | Yes | |||||
| Nestable | Yes | |||||
| Offsets | Yes | |||||
| Column ordering | Yes | |||||
Vertical alignment (align-items-start)
Use align-items-start class to vertically align-items at the start.
HTML Preview
<!-- Vertical alignment (align-items-start) -->
<div class="row align-items-start">
<div class="col-sm-4">
...
</div>
<div class="col-sm-4">
...
</div>
<div class="col-sm-4">
...
</div>
</div>
Vertical alignment (align-items-center)
Use align-items-center class to vertically align-items at the center.
HTML Preview
<!-- Vertical alignment (align-items-center) -->
<div class="row align-items-center">
<div class="col-sm-4">
...
</div>
<div class="col-sm-4">
...
</div>
<div class="col-sm-4">
...
</div>
</div>
Vertical alignment (align-items-end)
Use align-items-end class to vertically align-items at the end.
HTML Preview
<!-- Vertical alignment (align-items-end) -->
<div class="row align-items-end">
<div class="col-sm-4">
...
</div>
<div class="col-sm-4">
...
</div>
<div class="col-sm-4">
...
</div>
</div>
Align Self
Use the align-self-start,align-self-center, or align-self-end class respectively to vertically align items with a different position.
HTML Preview
<!-- Align Self -->
<div class="row">
<div class="col-sm-4 align-self-start">
...
</div>
<div class="col-sm-4 align-self-center">
...
</div>
<div class="col-sm-4 align-self-end">
...
</div>
</div>Horizontal Alignment
Use the justify-content-start,justify-content-center, or justify-content-end class respectively to horizontally align items with a different position.
HTML Preview
<!-- Horizontal Alignment --> <div class="row justify-content-start"> <div class="col-sm-4"> ... </div> </div><div class="row justify-content-center"> <div class="col-sm-4"> ... </div> </div><div class="row justify-content-end"> <div class="col-sm-4"> ... </div> </div>
Steex Builder
Choose your themes & layouts etc.
Layout
Choose your layout
Vertical
Horizontal
Two Column
Theme
Choose your suitable Theme.
Default
Material
Creative
Minimal
Modern
Interaction
Color Scheme
Choose Light or Dark Scheme.
Light
Dark
Coming Soon
Brand
Layout Width
Choose Fluid or Boxed layout.
Fluid
Boxed
Layout Position
Choose Fixed or Scrollable Layout Position.
Topbar Color
Choose Light or Dark Topbar Color.