### 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

    .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

    .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

### Modal

    <a data-toggle='modal' data-target='#new'>

    #new.modal.fade(role='dialog')
      .modal-dialog // .modal-lg, .modal-sm
        .modal-content
          .modal-header
            %h4.modal-title hello
            %button.close{type: 'button', data: { dismiss: 'modal' }}
              %span{'aria-hidden' => true}!= "&times;"
              %span.sr-only Close
          .modal-body
            ...
          .modal-footer
            ...

### Modal via ajax (Rails)

    %button.btn{data: { |
      toggle: 'modal', |
      target: '#chooseTheme', |
      remote: '/path/to/remote'}
      Change Theme

    .modal.fade#chooseTheme
      .modal-dialog.modal-xl
        .modal-content
          .modal-header
            %h4.modal-title Choose a theme

          .modal-body
            .spinner-panel.-lg
              %i

### Tooltip

    <span
      data-toggle='tooltip'
      title='tooltip'
      data-placement='left|top|bottom|right'>

    $(function () {
      $('[data-toogle~="tooltip"]').tooltip()
    })

### Input groups

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

0 Comments for this cheatsheet. Write yours!