12-Column Grid Test
Mode 1: Auto-fit Grid (default)
Items divide equally without any column classes. Just add items to the grid.
Auto-fit
Auto-fit
Auto-fit
Mode 2: 12-Column Explicit Layout
Use col-* classes (1-12) for precise column spans. Total must equal 12 per row.
Equal Halves
col-6
col-6
Thirds
col-4
col-4
col-4
Mixed Layout
col-3 (25%)
col-6 (50%)
col-3 (25%)
Sidebar Layout
col-4 Sidebar
col-8 Main Content
Responsive: col-* with col-md-* breakpoints
Mobile-first: base col-* classes apply to all screens, col-md-* overrides at 768px+
Half mobile, third tablet+ (col-6 col-md-4)
50% mobile, 33% tablet+
50% mobile, 33% tablet+
50% mobile, 33% tablet+
Full mobile, half tablet+ (col-12 col-md-6)
100% mobile, 50% tablet+
100% mobile, 50% tablet+
Summary
- Auto-fit: Use
.gridwithout column classes for equal-width items - 12-Column: Use
col-1tocol-12for explicit layouts (sums to 12) - Responsive: Use
col-md-*to override at 768px breakpoint