Show Menu

Bootstrap 4 (2019) ver 2 Cheat Sheet by

Bootstrap 4 Class references
bootstrap

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-group
card-deck
card-c­olumns

Carousel

carousel
slide
carous­el-­inner
carous­el-item
carous­el-item active
carous­el-­caption
carous­el-item active
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

Displa­y/P­osition

float-left
float-­right
mx-auto
d-block
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

Typography

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

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
 

Colour

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

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)

Download the Bootstrap 4 (2019) ver 2 Cheat Sheet

2 Pages
//media.cheatography.com/storage/thumb/liezeln_bootstrap-4-2019-ver-2.750.jpg

PDF (recommended)

Alternative Downloads

Share This Cheat Sheet!

 

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