Alerts
alert-primary
alert-secondary
alert-success
alert-info
alert-warning
alert-danger
alert-light
alert-dark
alert-link
alert-dismissible
alert-heading
Badges
badge
badge-pill
badge-primary
badge-secondary
badge-success
badge-info
badge-warning
badge-danger
badge-light
badge-dark
Breadcrumbs
breadcrumb
btn-primary
btn-secondary
btn-success
btn-info
btn-warning
btn-danger
btn-light
btn-dark
btn-link
btn-outline-primary
btn-outline-secondary
btn-outline-success
btn-outline-info
btn-outline-warning
btn-outline-danger
btn-outline-light
btn-outline-dark
btn-group
btn-group-lg
btn-group-sm
btn-group-vertical
btn-group (nested)
btn-toolbar
btn-lg
btn-sm
btn-block
active button
disabled button
checkbox as button
radio as button
Cards
card
card-body
card-title
card-subtitle
card-text
card-link
card-img-top
middle image
card-img-bottom
card-img-overlay
list-group
card-header
h*.card-header
card-footer
card-group
card-deck
card-columns
card bg-... text-...
Carousel
carousel slide
carousel-indicators
carousel-caption
Collapse
collapse
accordion
Dropdowns
dropdown
dropdown (split)
dropup
dropup (split)
dropright
dropleft
dropdown-header
dropdown-divider
dropdown-item disabled
dropdown-menu-right
form-group
form-inline
form using the grid
form-control
form-control-lg
form-control-sm
form-control-file
form-control-plaintext
form-check
form-check-inline
disabled items
readonly
input-group
input-group-prepend
input-group-append
input-group-sm
input-group-lg
checkbox
radio
dropdown
segmented buttons
custom-checkbox
custom-radio
custom-select
custom-file
Grid
container
container-fluid
row
col-
col-sm-
col-md-
col-lg-
col-xl-
col
col-*
no-gutters
offset-*-
order-
nested columns
Images
img-fluid
img-thumbnail
Jumbotron
jumbotron
jumbotron-fluid
List Group
list-group
list-group-item active
list-group-item disabled
list-group-item-action
list-group-item-primary
list-group-item-secondary
list-group-item-success
list-group-item-info
list-group-item-warning
list-group-item-danger
list-group-item-light
list-group-item-dark
list-group with badges
list-group with d-flex
media
nested media
d-flex align-self-start
d-flex align-self-center
d-flex align-self-end
right aligned media
Modal
modal
modal-dialog-centered
modal fade
modal-lg
modal-sm
Navs
ul.nav
nav.nav
nav justify-content-*
nav flex-column
nav-tabs
nav-pills
nav-fill
nav-justified
nav with flex utils
nav-tabs with dropdown
nav-pills with dropdown
Navbar
navbar
navbar-brand
navbar with form
navbar-text
navbar-dark bg-dark
navbar-light
navbar fixed-top
navbar fixed-bottom
navbar sticky-top
collapse navbar-collapse
navbar-toggler
navbar-expand-*
pagination
page-item disabled
page-item active
pagination-lg
pagination-sm
Popover
popovers
dismissible popover
Progress
progress
progress-bar
progress-bar with label
progress-bar with height
progress-bar bg-*
multiple progress-bar
progress-bar-striped
progress-bar-striped bg-*
progress-bar-animated
data-spy
Tables
table
thead-light
thead-dark
table-striped
table-bordered
table-hover
table-sm
table-*-responsive
table-reflow
table-active
table-primary
table-secondary
table-success
table-info
table-warning
table-danger
table-light
table-dark
tooltip
Typography
display-# (1-4)
lead
blockquote
blockquote-footer
blockquote-reverse
list-unstyled
list-inline
dl-horizontal
Utility: Borders
border
border-*-
border-primary
border-secondary
border-success
border-danger
border-warning
border-info
border-light
border-dark
border-white
rounded
rounded-circle
rounded-*
Utility: Colors
bg-primary
bg-secondary
bg-success
bg-info
bg-warning
bg-danger
bg-light
bg-dark
bg-white
text-primary
text-secondary
text-success
text-info
text-warning
text-danger
text-light
text-dark
text-white
Utility: Display
d-*-block
d-*-flex
d-*-inline
d-*-inline-block
d-*-inline-flex
d-*-none
d-*-table
d-*-table-cell
d-print-...
Utility: Flexbox
flex-*-column
flex-*-column-reverse
flex-*-row
flex-*-row-reverse
flex-*-nowrap
flex-*-wrap
flex-*-wrap-reverse
justify-content-*-start
justify-content-*-end
justify-content-*-center
justify-content-*-between
justify-content-*-around
align-content-*-start
align-content-*-end
align-content-*-center
align-content-*-around
align-content-*-stretch
align-items-*-start
align-items-*-end
align-items-*-center
align-items-*-baseline
align-items-*-stretch
align-self-*-start
align-self-*-end
align-self-*-center
align-self-*-baseline
align-self-*-stretch
order-*-
Utility: Misc
close
embed-responsive
invisible
visible
sr-only
sr-only-focusable
Utility: Positioning
align-*
clearfix
fixed-top
fixed-bottom
sticky-top
float-*-left
float-*-right
float-*-none
Utility: Sizing
w-
h-
mw-
mh-
Utility: Spacing
m-1 / m-*-
mt-1 / mt-*-
mr-1 / mr-*-
mb-1 / mb-*-
ml-1 / ml-*-
mx-1 / mx-*-
my-1 / my-*-
p-1 / p-*-
pt-1 / pt-*-
pr-1 / pr-*-
pb-1 / pb-*-
pl-1 / pl-*-
px-1 / px-*-
py-1 / py-*-
Utility: Text
font-weight-bold
font-weight-normal
font-italic
text-justify
text-nowrap
text-*-left
text-*-right
text-*-center
text-lowercase
text-uppercase
text-capitalize
text-truncate
text-muted
text-hide
Responsive breakpoints
// Extra small devices (portrait phones, less than 576px)
// No media query since this is the default in Bootstrap
// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }
// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }
// Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }
// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }
@media (max-width: 575.98px) { ... }
@media (max-width: 767.98px) { ... }
@media (max-width: 991.98px) { ... }
@media (max-width: 1199.98px) { ... }
@media (max-width: 575.98px) { ... }
@media (max-width: 767.98px) { ... }
@media (max-width: 991.98px) { ... }
@media (max-width: 1199.98px) { ... }
Pdf Version Download
