Alerts Forms Navbar Utility: Display

alert-primary form-group navbar d-*-block

alert-secondary form-inline navbar-brand d-*-flex
alert-success form using the grid navbar with form d-*-inline
alert-info form-control navbar-text d-*-inline-block
alert-warning form-control-lg navbar-dark bg-dark d-*-inline-flex
alert-danger form-control-sm navbar-light d-*-none
alert-light form-control-file navbar fixed-top d-*-table
alert-dark form-control-plaintext navbar fixed-bottom d-*-table-cell
alert-link form-check navbar sticky-top d-print-...
alert-dismissible form-check-inline collapse navbar-collapse
alert-heading disabled items navbar-toggler
readonly navbar-expand-* Utility: Flexbox
flex-*-column
Badges flex-*-column-reverse
badge Form Input Groups Pagination flex-*-row
badge-pill input-group pagination flex-*-row-reverse
badge-primary input-group-prepend page-item disabled flex-*-nowrap
badge-secondary input-group-append page-item active flex-*-wrap
badge-success input-group-sm pagination-lg flex-*-wrap-reverse
badge-info input-group-lg pagination-sm justify-content-*-start
badge-warning checkbox justify-content-*-end
badge-danger radio justify-content-*-center
badge-light dropdown Popover justify-content-*-between
badge-dark segmented buttons popovers justify-content-*-around
dismissible popover align-content-*-start
align-content-*-end
Breadcrumbs Custom Forms Progress align-content-*-center
breadcrumb custom-checkbox progress align-content-*-around
custom-radio progress-bar align-content-*-stretch
custom-select progress-bar with label align-items-*-start
Buttons custom-file progress-bar with height align-items-*-end
btn-primary progress-bar bg-* align-items-*-center
btn-secondary multiple progress-bar align-items-*-baseline
btn-success Grid progress-bar-striped align-items-*-stretch
btn-info container progress-bar-striped bg-* align-self-*-start
btn-warning container-fluid progress-bar-animated align-self-*-end
btn-danger row align-self-*-center
btn-light col-# ( <576px) align-self-*-baseline
btn-dark col-sm-# ( ≥576px) Scrollspy align-self-*-stretch
btn-link col-md-# ( ≥768px) data-spy order-*-#
btn-outline-primary col-lg-# ( ≥992px)
btn-outline-secondary col-xl-# ( ≥1200px)
btn-outline-success col Tables Utility: Misc
btn-outline-info col-* table close
btn-outline-warning no-gutters thead-light embed-responsive
btn-outline-danger offset-*-# thead-dark invisible
btn-outline-light order-# table-striped visible
btn-outline-dark nested columns table-bordered sr-only
table-hover sr-only-focusable
table-sm
Button Groups Images table-*-responsive
btn-group img-fluid table-reflow Utility: Positioning
btn-group-lg img-thumbnail table-active align-*
btn-group-sm table-primary clearfix
btn-group-vertical table-secondary fixed-top
btn-group (nested) Jumbotron table-success fixed-bottom
btn-toolbar jumbotron table-info sticky-top
jumbotron-fluid table-warning float-*-left
table-danger float-*-right
Button Modifiers table-light float-*-none
btn-lg List Group table-dark Utility: Sizing
btn-sm list-group w-100
btn-block list-group-item active h-100
active button list-group-item disabled Tooltips mw-100
disabled button list-group-item-action tooltip mh-100
checkbox as button list-group-item-primary
radio as button list-group-item-secondary
list-group-item-success Typography Utility: Spacing
list-group-item-info display-# (1-4) m-1 / m-*-#
Cards list-group-item-warning lead mt-1 / mt-*-#
card list-group-item-danger blockquote mr-1 / mr-*-#
card-body list-group-item-light blockquote-footer mb-1 / mb-*-#
card-title list-group-item-dark blockquote-reverse ml-1 / ml-*-#
card-subtitle list-group with badges list-unstyled mx-1 / mx-*-#
card-text list-group with d-flex list-inline my-1 / my-*-#
card-link dl-horizontal p-1 / p-*-#
card-img-top pt-1 / pt-*-#
middle image Media Objects pr-1 / pr-*-#
card-img-bottom media Utility: Borders pb-1 / pb-*-#
card-img-overlay nested media border pl-1 / pl-*-#
list-group d-flex align-self-start border-*-0 px-1 / px-*-#
card-header d-flex align-self-center border-primary py-1 / py-*-#
h*.card-header d-flex align-self-end border-secondary
card-footer right aligned media border-success
card-group border-danger Utility: Text
card-deck border-warning font-weight-bold
card-columns Modal border-info font-weight-normal
card bg-... text-... modal border-light font-italic
modal-dialog-centered border-dark text-justify
modal fade border-white text-nowrap
Carousel modal-lg rounded text-*-left
carousel slide modal-sm rounded-circle text-*-right
carousel-indicators rounded-* text-*-center
carousel-caption text-lowercase
Navs text-uppercase
ul.nav Utility: Colors text-capitalize
Collapse nav.nav bg-primary text-truncate
collapse nav justify-content-* bg-secondary text-muted
accordion nav flex-column bg-success text-hide
nav-tabs bg-info
nav-pills bg-warning
Dropdowns nav-fill bg-danger
dropdown nav-justified bg-light
dropdown (split) nav with flex utils bg-dark
dropup nav-tabs with dropdown bg-white
dropup (split) nav-pills with dropdown text-primary
dropright text-secondary
dropleft text-success
dropdown-header text-info
dropdown-divider text-warning
dropdown-item disabled text-danger
dropdown-menu-right text-light
text-dark
text-white
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) { ... }

// Extra small devices (portrait phones, less than 576px)

@media (max-width: 575.98px) { ... }

// Small devices (landscape phones, less than 768px)

@media (max-width: 767.98px) { ... }

// Medium devices (tablets, less than 992px)

@media (max-width: 991.98px) { ... }

// Large devices (desktops, less than 1200px)

@media (max-width: 1199.98px) { ... }

// Extra large devices (large desktops)

// No media query since the extra-large breakpoint has no upper bound on its width

// Extra small devices (portrait phones, less than 576px)

@media (max-width: 575.98px) { ... }

// Small devices (landscape phones, less than 768px)

@media (max-width: 767.98px) { ... }

// Medium devices (tablets, less than 992px)

@media (max-width: 991.98px) { ... }

// Large devices (desktops, less than 1200px)

@media (max-width: 1199.98px) { ... }

// Extra large devices (large desktops)

// No media query since the extra-large breakpoint has no upper bound on its width