Bootstrap Class Reference & Examples

click here

Grid System

.row, .col-md-*, .container

.col-md-4

Buttons

.btn, .btn-primary, .btn-danger, etc.

Alerts

.alert, .alert-danger, .alert-success, etc.

This is an info alert

This is a danger alert

This is a warning alert

Typography

.display-1 to .display-6, .lead, .text-*

Display 4

This is a lead paragraph

Muted text

Primary text

Forms

.form-control, .form-label, .btn

Image Viewer

Click image to open modal

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 -- adges -- badge -- badge-danger -- badge-dark -- badge-info -- badge-light -- badge-pill -- badge-primary -- badge-secondary -- badge-success -- badge-warning -- orders -- 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 -- readcrumbs -- breadcrumb -- breadcrumb-item -- utton Groups -- btn-group -- btn-group (nested) -- btn-group-lg -- btn-group-sm -- btn-group-vertical -- btn-toolbar -- utton Modifiers -- active button -- btn-block -- btn-lg -- btn-sm -- checkbox as button -- disabled button -- radio as button -- uttons -- 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 -- ards -- 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 -- arousel -- 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 -- ollapse -- accordion -- collapse -- olors -- 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 -- ustom Forms -- custom-checkbox -- custom-file -- custom-radio -- custom-range -- custom-select -- custom-switch -- isplay -- 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 -- ropdowns -- 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) -- igure -- figure -- figure-caption -- figure-img -- lexbox -- 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 -- orm Input Groups -- checkbox -- dropdown -- input-group -- input-group-append -- input-group-lg -- input-group-prepend -- input-group-sm -- radio -- segmented buttons -- orms -- orm (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 -- rid -- 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 -- mages -- img-fluid -- img-thumbnail -- umbotron -- jumbotron -- jumbotron-fluid -- ist 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 -- ist 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 -- edia Objects -- d-flex align-self-center -- d-flex align-self-end -- d-flex align-self-start -- media -- nested media -- right aligned media -- isc -- 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 -- odal -- modal -- modal fade -- modal-dialog-centered -- modal-lg -- modal-sm -- modal-xl -- odals -- modal-body -- modal-content -- 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 -- avbar -- 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 -- avs -- 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 -- agination -- page-item active -- page-item disabled -- pagination -- pagination-lg -- pagination-sm -- opover -- dismissible popover -- popovers -- ositioning -- 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 -- rogress -- 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-* -- crollspy -- data-spy -- izing -- 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 -- pacing -- 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 -- pinner -- spinner-border -- spinner-border text-* -- spinner-border-sm -- spinner-grow -- spinner-grow text-* -- spinner-grow-sm -- ables -- 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 -- ext -- 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 -- oast -- toast-body -- toast-header -- oasts -- toast -- ooltips -- tooltip -- ypography -- 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 -- ootstrap 4 & 5 Bootstrap Editor Bootstrap Components Bootstrap Templates Stuck on where to begin? Try Shuffle AI