Bootsrap

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