Classes and CSS CHEATSHEET

Bootstrap

Changes in Bootstrap versions 4

Here are some of the main changes beetwen Bootstrap versions that can affect templates and reports. To read more about it you can check here.

Grid system

• XS grid classes have been modified to not require the infix. Instead of *.col-xs-6, it’s now .col-6. All other grid tiers require the infix (sm, md, lg, xl).
• OFFSET classes have changed the syntax. Instead of .col-[infix]-offset-*, it’s now offset-[infix]-*. For example: .col-md-offset-2 is now offset-md-2. As explained in the previous point, xs do not require the infix in offset classes either, for example: .col-xs-offset-2 is now offset-2

Tables

• Renamed .table-condensed to .table-sm.

Forms

• Renamed .control-label to .col-form-labe.

Buttons

• Renamed .btn-default to .btn-secondary.

Labels and badges

• Renamed .label to .badge. Classes like label label-success are now badge badge-success.

Useful Bootstrap classes

Text transform

• text-lowercase: Set text to lowercase
• text-uppercase: Set text to uppercase
• text-capitalize: Capitalize the first letter of each word

Text alignment

• text-left: Left aligned text on all viewport sizes
• text-center: Center aligned text on all viewport sizes
• text-right: Right aligned text on all viewport sizes

To change the style according to the viewport size, text-[infix]-[position] can be used, for example: text-md-left, text-lg-right.