Grid
Judia Builder
Choose your themes & layouts etc.
Select Layouts
Choose your layout.
Vertical
Horizontal
Color Scheme
Choose Light or Dark Scheme.
Light
Dark
Brand
Card Layout
Choose borderless or border layout.
Borderless
Border
Layout Width
Choose Fluid or Boxed layout.
Fluid
Boxed
Layout Position
Choose Fixed or Scrollable Layout Position.
Topbar Color
Choose Light, Dark or Brand Topbar Color.
Light
Dark
Brand
Topbar Images
Choose Topbar Images.
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 | 1.25rem (.625rem 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>