Show Menu
Cheatography

Bootstrap 5 (2022) ver 1.0 Cheat Sheet by

Bootstrap 5 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
d-grid

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, body, muted, white)
bg-*
(primary, secondary, success, danger, warning, info, light, dark, white, transp­arent)
border OR
border-* (top, end, bottom, start)
border-*
(primary, secondary, success, danger, warning, info, light, dark, white)
 

Displa­y/P­osition

float-­start
float-end
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)
col-xxl-# (>= 1400px

Images

img-fluid
rounded
rounded-* (top, end, bottom, start, circle)
img-th­umbnail

Navs

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

Nav alignment

nav-fill
justif­y-c­ont­ent­-center
justif­y-c­ont­ent-end
flex-c­olumn

Navbar

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

Shadows

shadow­-none
shadow-sm
shadow
shadow-lg

Spacing

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

Forms

form-label
form-c­ontrol
form-check
form-c­hec­k-label
form-c­hec­k-input
form-c­ont­rol-sm
form-c­ont­rol-lg
form-s­elect

Utility Classes

text-* (start, end, center)
text-l­owe­rcase
text-u­ppe­rcase
text-c­api­talize
fw-bold
fw-normal
fst-italic
fst-normal

Typography

h1, h2, h3, h4, h5, h6
display-# (1-4)
lead
blockquote
blockq­uot­e-f­ooter
list-u­nstyled
list-i­nline
list-i­nli­ne-item

Tables

table
table-­striped
table-(*) (primary, secondary, success, danger, warning, info, light, dark)
*Can be applied to table, tr, td, & th
 

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