- 12 column system
- 5 default responsive tiers
- Sass variables and mixins
- dozens of predefined classes
- uses a series of containers, rows and columns to layout and align content
- fully reponsive
create 3 equal-width columns on small, medium, large and extra large devices using predefined grid classes (cols are centered in the page with the parent .container)
<div class="container">
<div class="row">
<div class="col-sm">
One of three columns
</div>
<div class="col-sm">
One of three columns
</div>
<div class="col-sm">
One of three columns
</div>
</div>
</div>
# 1. .container
# - provide a means to center and horizontally pad your site's contents
# - .container : for a reponsive pixel width
# - .container-fluid : width: 100% across all viewport and device sizes
# 2. .row
# - Rows are wrappers for columns.
# 3. .col
# - content must be placed within columns
# - only columns may be immediate children of rows.
# - grid columns without a specified width will automatically layout as equal width columns.
# - Column classes indicate the number of columns you’d like to use out of the possible 12 per row. (e.g. .col-4 : 3 equal-width cols per row)
# flexible to parent
# - Column widths are set in percentages, so they’re always fluid and sized relative to their parent element.
# - Columns have horizontal padding to create the gutters between individual column
# - you can remove the margin from rows and padding from columns with .no-gutters on the .row.
# responsive layout
# - five grid breakpoints, one for each responsive breakpoint: all breakpoints (extra small), small, medium, large, and extra large.
# - Grid breakpoints are based on minimum width media queries, meaning apply to that one breakpoint and all those above it
# - (e.g., .col-sm-4 applies to small, medium, large, and extra large devices, but not the first xs breakpoint).
# - You can use predefined grid classes (like .col-4) or Sass mixins for more semantic markup.
