Bootstrap
A cheatsheet by @rstacruz|Refreshed 7 months ago.Refresh|View source on Github

Screen sizes

Screen sizes

         768          992                1200
'     '     '     '     '     '     '     '     '
<---------^------------^------------------^--------->
     xs         sm              md             lg
   (phone)   (tablet)        (laptop)       (desktop)

Min:

@media (min-width: @screen-sm-min) // >= 768px (small tablet)
@media (min-width: @screen-md-min) // >= 992px (medium laptop)
@media (min-width: @screen-lg-min) // >= 1200px (large desktop)

Max:

@media (max-width: @screen-xs-max) { // < 768px (xsmall phone)
@media (max-width: @screen-sm-max) { // < 992px (small tablet)
@media (max-width: @screen-md-max) { // < 1200px (medium laptop)

Columns

Columns

.container
.container-fluid
.col-xs-1
.col-sm-1
.col-md-1
.col-lg-1
.col-md-offset-1

Mixins:

@include make-xs-column(12);
@include make-sm-column(6);
@include make-md-column(3);
@include make-lg-column(3);
@include make-sm-column-offset(1);
@include make-sm-column-push(1);
@include make-sm-column-pull(1);

Utilities

Utilities

.pull-left
.pull-right
.hidden-{xs,sm,md,lg}
.visible-{xs,sm,md,lg}
.visible-{xs,sm,md,lg,print}-{block,inline,inline-block}
.center-block  /* margin: auto */
.clearfix
.text-{center,left,right,justify,nowrap}
.text-{lowercase,uppercase,capitalize}
.show
.hidden

Tooltip

Tooltip

<span
  data-toggle='tooltip'
  title='tooltip'
  data-placement='left|top|bottom|right'>
$(function () {
  $('[data-toogle~="tooltip"]').tooltip()
})

Input groups

Input groups

.input-group
    input.form-control(type='text')
    .input-group-addon years