Layout
Grid system and containers for responsive layouts.
Container
Containers center your content and provide responsive max-widths.
<div class="ui-container">...</div> <!-- Responsive max-width -->
<div class="ui-container-fluid">...</div> <!-- Full width -->Grid System
12-column flexbox grid system.
col-12
col-6
col-6
col-4
col-4
col-4
col-3
col-3
col-3
col-3
<div class="ui-row">
<div class="ui-col-12">Full width</div>
</div>
<div class="ui-row">
<div class="ui-col-6">Half</div>
<div class="ui-col-6">Half</div>
</div>
<div class="ui-row">
<div class="ui-col-4">Third</div>
<div class="ui-col-4">Third</div>
<div class="ui-col-4">Third</div>
</div>Responsive Grid
Use breakpoint prefixes: sm, md, lg, xl.
Responsive
Responsive
Responsive
<div class="ui-row">
<div class="ui-col-12 ui-col-md-6 ui-col-lg-4">...</div>
<div class="ui-col-12 ui-col-md-6 ui-col-lg-4">...</div>
<div class="ui-col-12 ui-col-md-12 ui-col-lg-4">...</div>
</div>Auto Columns
Use ui-col for equal-width columns that auto-distribute.
Auto
Auto
Auto
<div class="ui-row">
<div class="ui-col">Auto</div>
<div class="ui-col">Auto</div>
<div class="ui-col">Auto</div>
</div>Row Gap
Add vertical spacing between rows with ui-row-gap-*.
<div class="ui-row ui-row-gap-3">
<!-- Gap between wrapped rows -->
</div>Breakpoints
| Breakpoint | Min Width | Class Prefix |
|---|---|---|
| Default | 0 | ui-col-* |
| Small | 640px | ui-col-sm-* |
| Medium | 768px | ui-col-md-* |
| Large | 1024px | ui-col-lg-* |
| Extra Large | 1280px | ui-col-xl-* |
CSS Classes Reference
| Class | Description |
|---|---|
.ui-container |
Responsive max-width container |
.ui-container-fluid |
Full-width container |
.ui-row |
Flex row container |
.ui-col |
Auto-width column |
.ui-col-{1-12} |
Fixed-width column (1-12) |
.ui-col-{bp}-{1-12} |
Responsive column (sm, md, lg, xl) |
.ui-row-gap-{0-8} |
Vertical gap between rows |