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
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
Auto
Auto
Auto
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-* |