Show Menu
Cheatography
  1. Home >
  2. Programming >

Bootstrap 5.3 (2024) Cheat Sheet by

Bootstrap 5.3 Class References

Alert messages

alert
alert-* (primary, secondary, success, info, warning, dark, light, link)
alert-­dis­mis­sible
alert-link
btn-close

Breadc­rumbs

breadcrumb
breadc­rum­b-item
active

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-group
btn-to­olbar
btn-gr­oup-* (lg, sm)
btn-gr­oup­-ve­rtical
d-grid

Cards

card
card-i­mg-top
card-i­mg-­bottom
card-body
card-title
card-s­ubtitle
card-text
card-link

Carousel

carousel
slide
carous­el-fade
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­/Co­ntext

text-*
(primary, secondary, success, danger, warning, info, light, dark, body, muted, white)
bg-* OR text-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
dropup

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
col-fo­rm-­label

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

List groups

list-group
list-g­rou­p-n­umbered
list-g­rou­p-item
active
disabled

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-nav
navbar­-brand
navbar­-text
collapse
navbar­-co­llapse
navbar­-to­ggler
navbar­-to­ggl­er-icon
fixed-top
fixed-­bottom

Navbar (attri­butes for JavaScript plugins)

data-b­s-t­ogg­le=­"­col­lap­se"
data-b­s-t­arg­et=­"­#*" (* - ID of collap­sable content)
data-b­s-t­hem­e="d­ark­"
 

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

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

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
 

Metadata

  • Languages:
  • Published: 16th October, 2018
  • Last Updated: 26th September, 2024
  • Rated: 5 out of 5 stars based on 6 ratings

Favourited By

grathjen JustMark26

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