Bootstrap 5.3 Class References
|
alert
|
|
alert-* (primary, secondary, success, info, warning, dark, light, link)
|
|
alert-dismissible
|
|
alert-link
|
|
btn-close
|
|
border OR
border-* (top, end, bottom, start) |
|
border-*
(primary, secondary, success, danger, warning, info, light, dark, white) |
|
border-0 OR
border-*-0 (top, end, bottom, start) |
|
border-*
(1, 2, 3, 4, 5) |
|
breadcrumb
|
|
breadcrumb-item
|
|
active
|
|
btn
|
|
btn-*
(primary, secondary, success, info, warning, dark, light, link) |
|
btn-outline-*
(primary, secondary, success, info, warning, danger, dark, light) |
|
btn-lg
|
|
btn-sm
|
|
btn-group
|
|
btn-toolbar
|
|
btn-group-* (lg, sm)
|
|
btn-group-vertical
|
|
d-grid
|
|
card
|
|
card-img-top
|
|
card-img-bottom
|
|
card-header
|
|
card-body
|
|
card-footer
|
|
card-title
|
|
card-subtitle
|
|
card-text
|
|
card-link
|
|
carousel
|
|
slide
|
|
carousel-fade
|
|
carousel-inner
|
|
carousel-item
|
|
carousel-item active
|
|
carousel-caption
|
|
carousel-control-prev
|
|
carousel-control-prev-icon
|
|
carousel-control-next
|
|
carousel-control-next-icon
|
|
carousel-indicators
|
|
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, transparent) |
|
float-start
|
|
float-end
|
|
d-block
|
|
d-inline
|
|
d-none
|
|
dropdown
|
|
dropdown-toggle
|
|
dropdown-menu
|
|
dropdown-item
|
|
dropdown-item disabled
|
|
dropdown-header
|
|
dropdown-divider
|
|
dropup
|
|
form-label
|
|
form-control
|
|
form-check
|
|
form-check-label
|
|
form-check-input
|
|
form-control-sm
|
|
form-control-lg
|
|
form-select
|
|
col-form-label
|
|
container
|
|
container-fluid
|
|
row
|
|
col
|
|
col-# (< 576px)
|
|
col-sm-# (>= 576px)
|
|
col-md-# (>= 768px)
|
|
col-lg-# (>= 992px)
|
|
col-xl-# (>= 1200px)
|
|
col-xxl-# (>= 1400px
|
|
img-fluid
|
|
rounded
|
|
rounded-* (top, end, bottom, start, circle)
|
|
img-thumbnail
|
|
list-group
|
|
list-group-numbered
|
|
list-group-item
|
|
active
|
|
disabled
|
|
nav
|
|
nav-item
|
|
nav-link
|
|
nav-link active
|
|
nav-link disabled
|
|
nav-pills
|
|
nav-tabs
|
|
nav-fill
|
|
justify-content-center
|
|
justify-content-end
|
|
flex-column
|
|
navbar
|
|
navbar-expand-*
(sm, md, lg, xl,xxl) |
|
navbar-nav
|
|
navbar-brand
|
|
navbar-text
|
|
collapse
|
|
navbar-collapse
|
|
navbar-toggler
|
|
navbar-toggler-icon
|
|
fixed-top
|
|
fixed-bottom
|
|
data-bs-toggle="collapse"
|
|
data-bs-toggle="dropdown"
|
|
data-bs-target="#*"
(* - ID of collapsable content) |
|
data-bs-theme="dark"
|
|
data-bs-theme="light"
(default value) |
|
shadow-none
|
|
shadow-sm
|
|
shadow
|
|
shadow-lg
|
|
w-* (25, 50, 75, 100, auto)
|
|
h-* (25, 50, 75, 100, auto)
|
|
mw-# (number from 0 to 100)
|
|
mh-# (number from 0 to 100)
|
|
{property}{sides}-{breakpoint}-{size}
|
|
property: m, p
|
|
sides: t, b, s, e, x, y, blank
|
|
breakpoint: sm, md, lg, xl, xxl
|
|
size: 0, 1, 2, 3, 4, 5, auto
|
|
size for negative margins: n1, n2, n3, n4, n5
|
|
table
|
|
table-striped
|
|
table-bordered
|
|
table-hover
|
|
table-responsive
|
|
table-* (primary, secondary, success, danger, warning, info, light, dark)
*Can be applied to table, tr, td, & th |
|
caption-top
|
|
h1, h2, h3, h4, h5, h6
|
|
display-# (1-6)
|
|
lead
|
|
blockquote
|
|
blockquote-footer
|
|
list-unstyled
|
|
list-inline
|
|
list-inline-item
|
|
text-* (start, end, center)
|
|
text-lowercase
|
|
text-uppercase
|
|
text-capitalize
|
|
fw-bold
|
|
fw-normal
|
|
fst-italic
|
|
fst-normal
|
No comments yet.
Cheatography n. The art of mapping complex subjects into clear, instantly navigable reference guides.
