Accordion
.accordion-body .accordion-button .accordion-collapse .accordion-flush .accordion-header .accordion-item .collapsed
Alerts
.alert-danger .alert-dark .alert-dismissible .alert-heading .alert-info .alert-light .alert-link .alert-primary .alert-secondary .alert-success .alert-warning .fade
Badges
.badge .badge-danger .badge-dark .badge-info .badge-light .badge-pill .badge-primary .badge-secondary .badge-success .badge-warning
Borders
.border .border-*-0 .border-1 .border-danger .border-dark .border-info .border-light .border-primary .border-secondary .border-success .border-warning .border-white .rounded .rounded-* .rounded-0 .rounded-1 .rounded-2 .rounded-3 .rounded-bottom .rounded-circle .rounded-end .rounded-pill .rounded-start .rounded-top
Breadcrumbs
.breadcrumb .breadcrumb-item
Button Groups
.btn-group .btn-group (nested) .btn-group-lg .btn-group-sm .btn-group-vertical .btn-toolbar
Button Modifiers
.active button .btn-block .btn-lg .btn-sm .checkbox as button .disabled button .radio as button
Buttons
.btn .btn-close .btn-close-white .btn-danger .btn-dark .btn-info .btn-light .btn-link .btn-outline-danger .btn-outline-dark .btn-outline-info .btn-outline-light .btn-outline-primary .btn-outline-secondary .btn-outline-success .btn-outline-warning .btn-primary .btn-secondary .btn-success .btn-warning
Cards
.card .card bg-… text-… .card-body .card-columns .card-deck .card-footer .card-group .card-header .card-header-pills .card-header-tabs .card-img-bottom .card-img-overlay .card-img-top .card-link .card-subtitle .card-text .card-title .h*.card-header .list-group .middle image .stretched-link
Carousel
.carousel slide .carousel-caption .carousel-control-next .carousel-control-next-icon .carousel-control-prev .carousel-control-prev-icon .carousel-dark .carousel-fade .carousel-indicators .carousel-inner .carousel-item
Collapse
.accordion .collapse
Colors
.bg-body .bg-danger .bg-dark .bg-gradient .bg-info .bg-light .bg-primary .bg-secondary .bg-success .bg-transparent .bg-warning .bg-white .link-danger .link-dark .link-info .link-light .link-primary .link-secondary .link-success .link-warning .text-danger .text-dark .text-info .text-light .text-primary .text-secondary .text-success .text-warning .text-white
Custom Forms
.custom-checkbox .custom-file .custom-radio .custom-range .custom-select .custom-switch
Display
.d-*-block .d-*-flex .d-*-inline .d-*-inline-block .d-*-inline-flex .d-*-none .d-*-table .d-*-table-cell .d-grid .d-lg-grid .d-lg-table-row .d-md-grid .d-md-table-row .d-print-… .d-print-flex .d-print-grid .d-print-inline-flex .d-print-table .d-print-table-cell .d-print-table-row .d-sm-grid .d-sm-table-row .d-table-row .d-xl-grid .d-xl-table-row .d-xxl-block .d-xxl-flex .d-xxl-grid .d-xxl-inline .d-xxl-inline-block .d-xxl-inline-flex .d-xxl-none .d-xxl-table .d-xxl-table-cell .d-xxl-table-row
Dropdowns
.dropdown .dropdown (split) .dropdown-divider .dropdown-header .dropdown-item .dropdown-item disabled .dropdown-item-text .dropdown-menu .dropdown-menu-dark .dropdown-menu-end .dropdown-menu-lg-end .dropdown-menu-lg-start .dropdown-menu-md-end .dropdown-menu-md-start .dropdown-menu-right .dropdown-menu-sm-end .dropdown-menu-sm-start .dropdown-menu-start .dropdown-menu-xl-end .dropdown-menu-xl-start .dropdown-toggle .dropdown-toggle-split .dropleft .dropright .dropup .dropup (split)
Figure
.figure .figure-caption .figure-img
Flexbox
.align-content-*-around .align-content-*-center .align-content-*-end .align-content-*-start .align-content-*-stretch .align-items-*-baseline .align-items-*-center .align-items-*-end .align-items-*-start .align-items-*-stretch .align-self-*-baseline .align-self-*-center .align-self-*-end .align-self-*-start .align-self-*-stretch .flex-*-column .flex-*-column-reverse .flex-*-grow-0 .flex-*-grow-1 .flex-*-nowrap .flex-*-row .flex-*-row-reverse .flex-*-shrink-0 .flex-*-shrink-1 .flex-*-wrap .flex-*-wrap-reverse .flex-fill .flex-lg-fill .flex-md-fill .flex-sm-fill .flex-xl-fill .flex-xxl-column .flex-xxl-column-reverse .flex-xxl-fill .flex-xxl-grow-0 .flex-xxl-grow-1 .flex-xxl-nowrap .flex-xxl-row .flex-xxl-row-reverse .flex-xxl-shrink-0 .flex-xxl-shrink-1 .flex-xxl-wrap .flex-xxl-wrap-reverse .justify-content-*-around .justify-content-*-between .justify-content-*-center .justify-content-*-end .justify-content-*-start .justify-content-around .justify-content-between .justify-content-center .justify-content-end .justify-content-evenly .justify-content-lg-around .justify-content-lg-between .justify-content-lg-center .justify-content-lg-end .justify-content-lg-evenly .justify-content-lg-start .justify-content-md-around .justify-content-md-between .justify-content-md-center .justify-content-md-end .justify-content-md-evenly .justify-content-md-start .justify-content-sm-around .justify-content-sm-between .justify-content-sm-center .justify-content-sm-end .justify-content-sm-evenly .justify-content-sm-start .justify-content-start .justify-content-xl-around .justify-content-xl-between .justify-content-xl-center .justify-content-xl-end .justify-content-xl-evenly .justify-content-xl-start .justify-content-xxl-around .justify-content-xxl-between .justify-content-xxl-center .justify-content-xxl-end .justify-content-xxl-evenly .justify-content-xxl-start .order-*-# .order-0 .order-1 .order-first .order-last .order-lg-0 .order-lg-first .order-lg-last .order-md-0 .order-md-first .order-md-last .order-sm-0 .order-sm-first .order-sm-last .order-xl-0 .order-xl-first .order-xl-last .order-xxl-0 .order-xxl-first .order-xxl-last
Form Input Groups
.checkbox .dropdown .input-group .input-group-append .input-group-lg .input-group-prepend .input-group-sm .radio .segmented buttons
Forms
form (full example) .col-form-label .col-form-label-lg .col-form-label-sm .disabled items .form using the grid .form-check .form-check-inline .form-check-input .form-check-label .form-control .form-control-color .form-control-file .form-control-lg .form-control-plaintext .form-control-range .form-control-sm .form-floating .form-group .form-inline .form-label .form-select .form-select-lg .form-select-sm .form-switch .form-text .input-group-text .is-invalid .is-valid .readonly .valid-feedback .valid-tooltip
Grid
.col .col-* .col-# (<576px) .col-1 .col-10 .col-11 .col-12 .col-2 .col-3 .col-4 .col-5 .col-6 .col-7 .col-8 .col-9 .col-auto .col-lg-# (≥992px) .col-lg-1 .col-md-# (≥768px) .col-md-1 .col-sm-# (≥576px) .col-sm-1 .col-xl-# (≥1200px) .col-xl-1 .col-xxl-1 .container .container-fluid .container-sm .contanier-lg .contanier-md .contanier-xl .contanier-xxl .g-0 .g-lg-0 .g-md-0 .g-sm-0 .g-xl-0 .g-xxl-0 .gap-0 .gap-lg-0 .gap-md-0 .gap-sm-0 .gap-xl-0 .gap-xxl-0 .gx-0 .gx-0 .gx-lg-0 .gx-lg-0 .gx-md-0 .gx-md-0 .gx-sm-0 .gx-sm-0 .gx-xl-0 .gx-xl-0 .gx-xxl-0 .gy-xxl-0 .nested columns .no-gutters .offset-*-# .offset-0 .offset-lg-0 .offset-md-0 .offset-xxl-0 .order-# .row .row-cols-1 .row-cols-auto .row-cols-lg-1 .row-cols-lg-auto .row-cols-md-1 .row-cols-md-auto .row-cols-sm-1 .row-cols-sm-auto .row-cols-xl-1 .row-cols-xl-auto .row-cols-xxl-1 .row-cols-xxl-auto
Images
.img-fluid .img-thumbnail
Jumbotron
.jumbotron .jumbotron-fluid
List Group
.list-group .list-group with badges .list-group with d-flex .list-group-item active .list-group-item disabled .list-group-item-action .list-group-item-danger .list-group-item-dark .list-group-item-info .list-group-item-light .list-group-item-primary .list-group-item-secondary .list-group-item-success .list-group-item-warning
List group
.list-group-flush .list-group-horizontal .list-group-horizontal-lg .list-group-horizontal-md .list-group-horizontal-sm .list-group-horizontal-xl .list-group-horizontal-xxl .list-group-item
Media Objects
.d-flex align-self-center .d-flex align-self-end .d-flex align-self-start .media .nested media .right aligned
media
Misc
.close .embed-responsive .initialism .invisible .overflow-auto .overflow-hidden .overflow-scroll .overflow-visible .pe-auto .pe-none .shadow .shadow-lg .shadow-none .shadow-sm .sr-only .sr-only-focusable .visible .visually-hidden .visually-hidden-focusable
Modal
.modal .modal fade .modal-dialog-centered .modal-lg .modal-sm .modal-xl
Modals
.modal-body .modal-contant .modal-dialog .modal-dialog-scrollable .modal-footer .modal-fullscreen .modal-fullscreen-lg-down .modal-fullscreen-md-down .modal-fullscreen-sm-down .modal-fullscreen-xl-down .modal-fullscreen-xxl-down .modal-header .modal-static .modal-title
Navbar
.collapse navbar-collapse .nav-item .nav-link .navbar .navbar fixed-bottom .navbar fixed-top .navbar sticky-top .navbar with form .navbar-brand .navbar-collapse .navbar-dark .navbar-dark bg-dark .navbar-expand-* .navbar-expand-lg .navbar-expand-md .navbar-expand-sm .navbar-expand-xl .navbar-expand-xxl .navbar-light .navbar-nav .navbar-text .navbar-toggler .navbar-toggler-icon
Navs
.nav flex-column .nav justify-content-* .nav with flex utils .nav-fill .nav-justified .nav-pills .nav-pills with dropdown .nav-tabs .nav-tabs with dropdown .nav.nav .tab-content .tab-pane .ul.nav
Pagination
.page-item active .page-item disabled .pagination .pagination-lg .pagination-sm
Popover
.dismissible popover .popovers
Positioning
.align-* .bottom-0 .bottom-100 .bottom-50 .clearfix .end-0 .end-100 .end-50 .fixed-bottom .fixed-top .float-*-left .float-*-none .float-*-right .float-end .float-lg-end .float-lg-none .float-lg-start .float-md-end .float-md-none .float-md-start .float-none .float-sm-end .float-sm-none .float-sm-start .float-start .float-xl-end .float-xl-none .float-xl-start .float-xxl-end .float-xxl-none .float-xxl-start .position-absolute .position-relative .position-static .start-0 .start-100 .start-50 .sticky-lg-top .sticky-md-top .sticky-sm-top .sticky-top .sticky-xl-top .top-0 .top-100 .top-50 .translate-middle
Progress
.multiple progress-bar .progress .progress-bar .progress-bar bg-* .progress-bar with height .progress-bar with label .progress-bar-animated .progress-bar-striped .progress-bar-striped bg-*
Scrollspy
.data-spy
Sizing
.h-100 .h-25 .h-50 .h-75 .h-auto .mh-100 .min-vw-100 .mw-100 .w-100 .w-100 .w-25 .w-50 .w-75 .w-auto
Spacing
.m-1 / m-*-# .m-auto .m-lg-0 .m-lg-auto .m-md-0 .m-md-auto .m-n1 / m-*-n# .m-sm-0 .m-sm-auto .m-xl-0 .m-xl-auto .m-xxl-0 .m-xxl-auto .mb-1 / mb-*-# .mb-auto .mb-lg-0 .mb-lg-auto .mb-md-0 .mb-md-auto .mb-sm-0 .mb-sm-auto .mb-xl-0 .mb-xl-auto .mb-xxl-0 .mb-xxl-auto .me-auto .me-lg-0 .me-lg-auto .me-md-0 .me-md-auto .me-sm-0 .me-sm-auto .me-xl-0 .me-xl-auto .me-xxl-0 .me-xxl-auto .ml-1 / ml-*-# .mr-1 / mr-*-# .ms-auto .ms-lg-0 .ms-lg-auto .ms-md-0 .ms-md-auto .ms-sm-0 .ms-sm-auto .ms-xl-0 .ms-xl-auto .ms-xxl-0 .ms-xxl-auto .mt-1 / mt-*-# .mt-auto .mt-lg-0 .mt-lg-auto .mt-md-0 .mt-md-auto .mt-sm-0 .mt-sm-auto .mt-xl-0 .mt-xl-auto .mt-xxl-0 .mt-xxl-auto .mx-1 / mx-*-# .mx-auto .mx-lg-0 .mx-lg-auto .mx-md-0 .mx-md-auto .mx-sm-0 .mx-sm-auto .mx-xl-0 .mx-xl-auto .mx-xxl-0 .mx-xxl-auto .my-1 / my-*-# .my-auto .my-lg-0 .my-lg-auto .my-md-0 .my-md-auto .my-sm-0 .my-sm-auto .my-xl-0 .my-xl-auto .my-xxl-0 .my-xxl-auto .p-1 / p-*-# .p-lg-0 .p-md-0 .p-sm-0 .p-xl-0 .p-xxl-0 .pb-0 .pb-1 / pb-*-# .pb-lg-0 .pb-md-0 .pb-sm-0 .pb-xl-0 .pb-xxl-0 .pe-0 .pe-lg-0 .pe-md-0 .pe-sm-0 .pe-xl-0 .pe-xxl-0 .pl-1 / pl-*-# .pr-1 / pr-*-# .ps-0 .ps-lg-0 .ps-md-0 .ps-sm-0 .ps-xl-0 .ps-xxl-0 .pt-0 .pt-1 / pt-*-# .pt-lg-0 .pt-md-0 .pt-sm-0 .pt-xl-0 .pt-xxl-0 .px-0 .px-1 / px-*-# .px-lg-0 .px-md-0 .px-sm-0 .px-xl-0 .px-xxl-0 .py-0 .py-1 / py-*-# .py-lg-0 .py-md-0 .py-sm-0 .py-xl-0 .py-xxl-0
Spinner
.spinner-border .spinner-border text-* .spinner-border-sm .spinner-grow .spinner-grow text-* .spinner-grow-sm
Tables
.caption-top .table .table-*-responsive .table-active .table-bordered .table-borderless .table-danger .table-dark .table-hover .table-info .table-light .table-primary .table-reflow .table-responsive-xxl .table-secondary .table-sm .table-striped .table-success .table-warning .thead-dark .thead-light
Text
.font-italic .font-weight-bold .font-weight-bolder .font-weight-light .font-weight-lighter .font-weight-normal .text-*-center .text-*-left .text-*-right .text-black-50 .text-body .text-capitalize .text-decoration-none .text-hide .text-justify .text-lowercase .text-monospace .text-muted .text-nowrap .text-truncate .text-uppercase .text-white-50
Toast
.toast-body .toast-header
Toasts
.toast
Tooltips
.tooltip
Typography
.blockquote .blockquote-footer .blockquote-reverse .display-# (1-4) .display-1 .display-2 .display-3 .display-4 .display-5 .display-6 .dl-horizontal .font-monospace .fs-1 .fs-2 .fs-3 .fs-4 .fs-4 .fs-5 .fs-6 .fs-lg-1 .fs-md-1 .fs-sm-1 .fst-italic .fst-normal .fw-bolder .fw-light .fw-lighter .fw-normal .h1 .h2 .h3 .h4 .h5 .h6 .lead .lh-1 .lh-base .lh-lg .lh-sm .list-inline .list-unstyled .text-break .text-center .text-decoration-line-through .text-decoration-underline .text-end .text-lg-center .text-lg-end .text-lg-start .text-md-center .text-md-end .text-md-start .text-reset .text-sm-center .text-sm-end .text-sm-start .text-start .text-wrap .text-xl-center .text-xl-end .text-xl-end .text-xl-end .text-xl-start .text-xl-start .text-xl-start .text-xxl-center .text-xxl-end .text-xxl-start