Columns
Responsive Style's columns system uses containers, rows and columns for layout alignment. Built with flexbox, it provides a 12-column responsive columns. Key principles:
- Columns created via
.row > .colstructure - Content should be placed within
.colelements - Column spans 1-12 (e.g. 3 equal columns use
<div class="col" />) - Excess columns wrap to new row when total exceeds 12
- Add responsive prefixes like
.sm:col-4for breakpoint-specific layouts
Basic Columns
Use predefined .row and .col classes with parent .container for centered layouts:
Horizontal Alignment
Control column alignment with .justify-content-* + responsive prefixes:
Vertical Alignment
Adjust vertical alignment using .align-items-* classes:
Or apply individual alignment with .align-self-*:
Column Ordering
Control visual order with .order-* classes (responsive supported):
Use special .order-first and .order-last utilities:
Column Offsets
Shift columns with .offset-* classes:
Quick Reference
| Class | Styles |
|---|---|
.row | display: flex; flex-wrap: wrap; |
.col | flex: 1 0 0; |
.col-1 | width: 8.33333333% |
.col-2 | width: 16.66666667% |
.col-3 | width: 25% |
.col-4 | width: 33.33333333% |
.col-5 | width: 41.66666667% |
.col-6 | width: 50% |
.col-7 | width: 58.33333333% |
.col-8 | width: 66.66666667% |
.col-9 | width: 75% |
.col-10 | width: 83.33333333% |
.col-11 | width: 91.66666667% |
.col-12 | width: 100% |
.offset-1 | margin-left: 8.33333333% |
.offset-2 | margin-left: 16.66666667% |
.offset-3 | margin-left: 25% |
.offset-4 | margin-left: 33.33333333% |
.offset-5 | margin-left: 41.66666667% |
.offset-6 | margin-left: 50% |
.offset-7 | margin-left: 58.33333333% |
.offset-8 | margin-left: 66.66666667% |
.offset-9 | margin-left: 75% |
.offset-10 | margin-left: 83.33333333% |
.offset-11 | margin-left: 91.66666667% |
All classes support responsive prefixes like
sm:,md:,lg:,xl:etc.