Bootstrap 5 (2023) ver 2.

0 Cheat Sheet
by LiezelN via cheatography.com/69317/cs/17476/

Alert messages Cards (cont) Dropdowns List groups

alert card-link dropdown list-group

alert-* (primary, secondary, dropdo​wn-​toggle list-g​rou​p-n​umbered
success, info, warning, dark, Carousel
dropdo​wn-menu list-g​rou​p-item
light, link) carousel
dropdo​wn-item active
alert-​dis​mis​sible slide
dropdo​wn-item disabled disabled
alert-link carous​el-fade
dropdo​wn-​header
btn-close carous​el-​inner Navs
dropdo​wn-​divider
carous​el-item nav
dropup
Breadc​rumbs
carous​el-item active nav-item
breadcrumb
carous​el-​caption Forms nav-link
breadc​rum​b-item
carous​el-​con​tro​l-prev form-label nav-link active
active
carous​el-​con​tro​l-p​rev​-icon form-c​ontrol nav-link disabled
carous​el-​con​tro​l-next form-check nav-pills
Buttons
carous​el-​con​tro​l-n​ext​-icon form-c​hec​k-label nav-tabs
btn
carous​el-​ind​icators form-c​hec​k-input
btn-*
Nav alignment
(primary, secondary, success, form-c​ont​rol-sm
Colour​/Co​ntext nav-fill
info, warning, dark, light, link) form-c​ont​rol-lg
text-* justif​y-c​ont​ent​-center
btn-ou​tline-* form-s​elect
(primary, secondary, success, justif​y-c​ont​ent-end
(primary, secondary, success, col-fo​rm-​label
danger, warning, info, light, dark,
info, warning, danger, dark, light) flex-c​olumn
body, muted, white)
Grid
Button Modifiers bg-* Navbar
container
(primary, secondary, success,
btn-lg navbar
danger, warning, info, light, dark, contai​ner​-fluid
btn-sm navbar-expand-*
white, transp​arent) row
btn-group (sm, md, lg, xl,xxl)
border OR col
btn-to​olbar border-* (top, end, bottom, start) navbar​-dark
col-# (< 576px)
btn-gr​oup-* (lg, sm) border-* navbar-nav
col-sm-# (>= 576px)
btn-gr​oup​-ve​rtical (primary, secondary, success, navbar​-brand
col-md-# (>= 768px)
danger, warning, info, light, dark, navbar​-text
d-grid
white) col-lg-# (>= 992px)
collapse
col-xl-# (>= 1200px)
Cards
navbar​-co​llapse
Displa​y/P​osition col-xxl-# (>= 1400px
card navbar​-to​ggler
float-​start
card-i​mg-top navbar​-to​ggl​er-icon
Images
float-end
card-body fixed-top
d-block img-fluid
card-title fixed-​bottom
d-inline rounded
card-s​ubtitle
d-none rounded-* (top, end, bottom,
card-text start, circle)
img-th​umbnail

By LiezelN Published 16th October, 2018. Sponsored by CrosswordCheats.com

cheatography.com/liezeln/ Last updated 12th March, 2023. Learn to solve cryptic crosswords!
Page 1 of 2. http://crosswordcheats.com
 Bootstrap 5 (2023) ver 2.0 Cheat Sheet
by LiezelN via cheatography.com/69317/cs/17476/

Shadows Utility Classes

shadow​-none text-* (start, end, center)

shadow-sm text-l​owe​rcase
shadow text-u​ppe​rcase
shadow-lg text-c​api​talize
fw-bold
Spacing
fw-normal
{prope​rty​}{s​ide​s}-​{br​eak​poi​nt}​-
fst-italic
{size}
fst-normal
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

Tables

table
table-​striped
table-​bor​dered
table-​hover
table-​res​ponsive
table-(*) (primary, secondary,
success, danger, warning, info,
light, dark)
*Can be applied to table, tr, td, &
th
w-* (* Indicate size in rems)

Typography

h1, h2, h3, h4, h5, h6

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

By LiezelN Published 16th October, 2018. Sponsored by CrosswordCheats.com

cheatography.com/liezeln/ Last updated 12th March, 2023. Learn to solve cryptic crosswords!
Page 2 of 2. http://crosswordcheats.com