Container
- class="container": fixed-width, centered
- class="container-fluid": full-width, small margin
The Grid System
- class="row": defines a 12-column group
- class="col-*-*": defines a cell spanning one or more columns
- 12 columns
.col-md-1.col-md-1.col-md-1.col-md-1.col-md-1.col-md-1.col-md-1.col-md-1.col-md-1.col-md-1.col-md-1.col-md-1
.col-md-8.col-md-4
.col-md-4.col-md-4.col-md-4
.col-md-6.col-md-6
.col-xs-*:
Phones (<768px)
.col-sm-*:
Tablets (≥768px)
.col-md-*:
Desktops (≥992px)
.col-lg-*:
Desktops (≥1200px)
Helper classes
- pull-right
- text-right
- visible-*
- hidden-*
- clearfix
Tables
- class="table"
- class="table table-striped"
- class="table table-hover"
Forms
- div around each row: class="form-group"
- each input control: class="form-control"
- if many controls in a row: class="input-group"
- Note: Do not mix form groups directly with input groups.
Instead, nest the input group inside of the form group.
Other controls
- Alerts
- Icons (removed in 4.0)
- Pagination
- Badges
- Jumbotron
- Progress bars
- Panel, Well, Thumbnail (Cards in 4.0)
- Drop-downs
- Button groups
- Button drop-downs
JavaScript controls
Require
jQuery
- Scrollspy
- Tab
- Tooltip
- Carousel
- Modal
