Show Menu
Cheatography

Bootstrap 4 (2019) ver 2.2 Cheat Sheet by

Bootstrap 4 Class references

Buttons

btn
btn-*
(primary, secondary, success, info, warning, dark, light, link)
btn-ou­tline-*
(primary, secondary, success, info, warning, danger, dark, light)

Button Modifiers

btn-lg
btn-sm
btn-block

Cards

card
card-body
card-text
card-title
card-s­ubtitle
card-link
card-img
card-h­eader
card-f­ooter
card-group
card-deck
card-c­olumns

Carousel

carousel
slide
carous­el-­inner
carous­el-item
carous­el-item active
carous­el-­caption
carous­el-­con­tro­l-prev
carous­el-­con­tro­l-p­rev­-icon
carous­el-­con­tro­l-next
carous­el-­con­tro­l-n­ext­-icon
carous­el-­ind­icators

Colour

text-*
(primary, secondary, success, danger, warning, info, light, dark)
bg-*
(primary, secondary, success, danger, warning, info, light, dark, white)
border border-*
(primary, secondary, success, danger, warning, info, light, dark)
 

Displa­y/P­osition

float-left
float-­right
d-block
d-inline
d-none

Dropdowns

dropdown
dropdo­wn-­toggle
dropdo­wn-menu
dropdo­wn-item
dropdo­wn-item disabled
dropdo­wn-­header
dropdo­wn-­divider

Grid

container
contai­ner­-fluid
row
col
col-# (< 576px)
col-sm-# (> 576px)
col-md-# (> 768px)
col-lg-# (> 992px)
col-xl-# (> 1200px)

Images

img-fluid
rounded
rounde­d-top
rounde­d-right
rounde­d-b­ottom
rounde­d-left
rounde­d-c­ircle
img-th­umbnail

Jumbotron

jumbotron
jumbot­ron­-fluid

Media Objects

media
media-body
 

Navs

nav
nav-item
nav-link
nav-link active
nav-link disabled
nav-pills
nav-tabs

Nav alignment

nav-fill
nav-ju­stified
justif­y-c­ont­ent­-center
justif­y-c­ont­ent-end

Navbar

navbar
navbar-expand-(*)
(sm, md, lg, xl)
navbar­-light
navbar­-dark
navbar-nav
navbar­-brand
collapse
navbar­-co­llapse
navbar­-to­ggler
navbar­-to­ggl­er-icon
fixed-top
fixed-­bottom

Shadows

shadow­-none
shadow-sm
shadow
shadow-lg

Sizing

w-25, w-50, w-75, w-100, w-auto
h-25, h-50, h-75, h-100, h-auto
mw-#
mh-#
min-vw-#
min-vh-#
vw-#
vh-#
 

Spacing

{prope­rty­}{s­ide­s}-­{br­eak­poi­nt}­-{size}
property: m, p
sides: t, b, l, r, x, y, blank
breakp­oint: sm, md, lg, xl
size: 0, 1, 2, 3, 4, 5, auto
size for negative margins: n1, n2, n3, n4, n5

Forms

form-group
form-text
form-c­ontrol
form-c­ont­rol­-label
form-check
form-c­hec­k-label
form-c­hec­k-input
form-c­hec­k-i­nline
form-c­ont­rol-sm
form-c­ont­rol-lg
form-i­nline
form-c­ont­rol-*
(primary, secondary, success, danger, warning, info, light, dark)

Utility Classes

text-j­ustify
text-n­owrap
text-(­*)-left
text-(­*)-­right
text-(­*)-­center
text-l­owe­rcase
text-u­ppe­rcase
text-c­api­talize
font-w­eig­ht-bold
font-w­eig­ht-­normal
font-i­talic

Typography

display-# (1-4)
lead
small
blockquote
blockq­uot­e-f­ooter
list-u­nstyled
list-i­nline
list-i­nli­ne-item

Help Us Go Positive!

We offset our carbon usage with Ecologi. Click the link below to help us!

We offset our carbon footprint via Ecologi
 

Comments

No comments yet. Add yours below!

Add a Comment

Your Comment

Please enter your name.

    Please enter your email address

      Please enter your Comment.

          Related Cheat Sheets

            Bootstrap Glyphicons Cheat Sheet by James Croft