Grid Component Test
Basic Responsive Grid
Resize your browser to see the responsive behavior
xs=12 sm=6 md=4
xs=12 sm=6 md=4
xs=12 sm=6 md=4
Different Spacing
No Spacing
1
2
3
Large Spacing
1
2
3
Auto-sizing and Flexible Widths
Auto width
xs=6
Flexible (xs=true)
Grid Alignment
Justify Content Center
Centered
Items
Space Between
Left
Right
Grid Offsets
xs=4
xs=4 offset=4
xs=3 offset=2
Nested Grids
Main Content (xs=12 md=8)
Nested 1
Nested 2
Sidebar
(xs=12 md=4)
Dashboard Layout Example
Dashboard Header
1,234
Users
5,678
Orders
$12,345
Revenue
98.5%
Uptime
Chart Area
(xs=12 lg=8)
Recent Activity
User John signed up
Order #1234 completed
Payment received