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)
Half mobile, third tablet+
Half mobile, third tablet+
Half mobile, third tablet+
Full mobile, half tablet+ (col-12 col-md-6)
100% mobile, 50% tablet+
100% mobile, 50% tablet+
Edge Cases
Overflow (exceeds 12 columns)
When column spans exceed 12, items wrap to the next row:
col-8
col-8 (wraps)
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