Breakpoints

Name	Infix	Min-width	Max-width
Extra small	none	< 576px	575.98px
Small	`sm`	≥ 576px	767.98px
Medium	`md`	≥ 768px	991.98px
Large	`lg`	≥ 992px	1199.98px
Extra large	`xl`	≥ 1200px	1399.98px
Extra extra large	`xxl`	≥ 1400px	—

Use breakpoint infixes with classes like col-md-6, d-lg-none, mt-sm-3, etc.

Containers

Class	xs	sm	md	lg	xl	xxl
`.container`	100%	540px	720px	960px	1140px	1320px
`.container-sm`	100%	540px	720px	960px	1140px	1320px
`.container-md`	100%	100%	720px	960px	1140px	1320px
`.container-lg`	100%	100%	100%	960px	1140px	1320px
`.container-xl`	100%	100%	100%	100%	1140px	1320px
`.container-xxl`	100%	100%	100%	100%	100%	1320px
`.container-fluid`	100%	100%	100%	100%	100%	100%

Grid System

12-column grid using flexbox. Wrap columns in .row inside a container.

col

col-4

col-8

col-sm-6 col-md-4

col-sm-12 col-md-4

Class pattern	Description
`.col`	Auto-width, equal columns
`.col-{1–12}`	Explicit column width
`.col-{bp}-{1–12}`	Responsive column width
`.col-auto`	Fit content width
`.row-cols-{n}`	Set number of cols per row
`.row-cols-{bp}-{n}`	Responsive cols per row
`.offset-{n}`	Offset column by n
`.offset-{bp}-{n}`	Responsive offset
`.order-{0–5}` / `.order-first` / `.order-last`	Column ordering

Gutters

Class	Description
`.g-{0–5}`	Both axis gutters
`.gx-{0–5}`	Horizontal gutters
`.gy-{0–5}`	Vertical gutters
`.g-{bp}-{0–5}`	Responsive gutters

Gutter sizes: 0=0, 1=.25rem, 2=.5rem, 3=1rem, 4=1.5rem, 5=3rem

Flexbox Utilities

Class	CSS
`.d-flex`	display: flex
`.d-inline-flex`	display: inline-flex
`.flex-row` / `.flex-row-reverse`	flex-direction: row / row-reverse
`.flex-column` / `.flex-column-reverse`	flex-direction: column / column-reverse
`.flex-wrap` / `.flex-nowrap` / `.flex-wrap-reverse`	flex-wrap values
`.flex-fill`	flex: 1 1 auto
`.flex-grow-0` / `.flex-grow-1`	flex-grow
`.flex-shrink-0` / `.flex-shrink-1`	flex-shrink
`.justify-content-start/end/center/between/around/evenly`	justify-content
`.align-items-start/end/center/baseline/stretch`	align-items
`.align-self-start/end/center/baseline/stretch/auto`	align-self
`.align-content-start/end/center/between/around/stretch`	align-content
`.order-{0–5}` / `.order-first` / `.order-last`	order
`.gap-{0–5}` / `.row-gap-{0–5}` / `.column-gap-{0–5}`	gap / row-gap / column-gap

All flex utilities support responsive infixes, e.g. .justify-content-md-center

Typography

h1. Heading small muted

h2. Heading

h3. Heading

h4. Heading

h5. Heading

h6. Heading

Lead paragraph — stands out with .lead

Normal paragraph with highlight, ~~deleted text~~, inserted text, bold, italic, HTML, citation, Ctrl+S, inline code, sample output.

Underlined.

Strikethrough.

Small text using <small> or .small class

A quote looks like this.

Someone famous in Source Title

Class	Effect
`.h1`–`.h6`	Apply heading styles to any element
`.lead`	Larger, lighter paragraph
`.small`	80% font size
`.mark`	Highlight background
`.text-muted`	Muted text color
`.text-truncate`	Truncate with ellipsis (requires overflow hidden)
`.text-break`	Break long words
`.font-monospace`	Monospace font family
`.fw-bold` / `.fw-semibold` / `.fw-normal` / `.fw-light`	font-weight 700 / 600 / 400 / 300
`.fst-italic` / `.fst-normal`	font-style
`.lh-1` / `.lh-sm` / `.lh-base` / `.lh-lg`	line-height: 1 / 1.25 / 1.5 / 2
`.fs-1`–`.fs-6`	Font size (maps to h1–h6 sizes)
`.text-decoration-none/underline/line-through`	text-decoration
`.text-lowercase` / `.text-uppercase` / `.text-capitalize`	text-transform
`.text-wrap` / `.text-nowrap`	white-space: normal / nowrap
`.text-start` / `.text-center` / `.text-end`	text-align (support breakpoint infixes)
`.text-reset`	Inherit parent color

Display Headings

Display 1

Display 2

Display 3

Display 4

Display 5

Display 6

Classes: .display-1 through .display-6

Images

Class	Effect
`.img-fluid`	max-width: 100%; height: auto — responsive image
`.img-thumbnail`	Rounded border, padding, white bg
`.rounded`	Rounded corners
`.rounded-circle`	Circular crop
`.float-start` / `.float-end`	Float image left/right

Tables

#	Name	Status
1	Alice	Active
2	Bob	Pending
3	Carol	Inactive

Class	Effect
`.table`	Base table (required)
`.table-striped`	Zebra-striped rows
`.table-striped-columns`	Zebra-striped columns
`.table-hover`	Hover row highlight
`.table-bordered`	Borders on all sides
`.table-borderless`	No borders
`.table-sm`	Half padding
`.table-responsive`	Horizontal scroll wrapper
`.table-responsive-{bp}`	Responsive scroll below breakpoint
`.table-{color}`	Contextual color on <table>, <tr>, <th>, <td>
`.table-dark` / `.table-light`	Dark/light table variant
`.caption-top`	Move <caption> to top

Contextual colors for rows/cells: .table-primary .table-secondary .table-success .table-danger .table-warning .table-info .table-light .table-dark

Figures

<figure class="figure">
  <img src="..." class="figure-img img-fluid rounded" alt="...">
  <figcaption class="figure-caption text-end">Caption here.</figcaption>
</figure>

Form Controls

Email address

We'll never share your email.

Large input

Small input

Textarea

Plaintext (readonly)

Disabled

Class	Effect
`.form-label`	Label styling (margin-bottom)
`.form-control`	Text input, textarea, file input styling
`.form-control-lg` / `.form-control-sm`	Large/small size modifier
`.form-control-plaintext`	Readonly plain text, no border/bg
`.form-text`	Help text below input

Select

Classes: .form-select, .form-select-lg, .form-select-sm

Checks & Radios

Checked checkbox

Unchecked

Disabled

Radio 1

Radio 2

Toggle switch (checked)

Inline 1

Inline 2

Class	Effect
`.form-check`	Wrapper for checkbox/radio
`.form-check-input`	The input element
`.form-check-label`	The label element
`.form-check-inline`	Inline (side-by-side)
`.form-switch`	Toggle switch style (add to .form-check wrapper)
`.btn-check`	Visually hidden input for button-style toggle

Range

Range input

Class: .form-range

Input Groups

@

.00 USD

$

Large

Small

Wrapper: .input-group — Sizes: .input-group-sm / .input-group-lg — Addon: .input-group-text

Floating Labels

Email address

Works with selects

Wrapper: .form-floating — The placeholder attribute is required on the input.

Validation

Valid

Looks good!

Invalid

Please provide a valid value.

Agree to terms

Must agree!

Class / Attribute	Effect
`.is-valid` / `.is-invalid`	Manual validation state on input
`.valid-feedback` / `.invalid-feedback`	Shown message block
`.valid-tooltip` / `.invalid-tooltip`	Tooltip-style feedback (parent needs position:relative)
`.was-validated` on <form>	Browser native validation display

Alerts

Primary alert

Secondary alert

Success alert

Danger alert

Warning alert

Info alert

Light alert

Dark alert

Dismissible! Click the × to close.

Alert with a link inside.

Base: .alert .alert-{color} — Dismissible: add .alert-dismissible .fade .show and data-bs-dismiss="alert" on button — Link: .alert-link

Badges

Primary Secondary Success Danger Warning Info Light Dark

Pill Primary Pill Success

Base: .badge .bg-{color} — Pill: add .rounded-pill

Buttons

Link button

Class	Effect
`.btn`	Base button (required)
`.btn-{color}`	Solid filled button
`.btn-outline-{color}`	Outline button
`.btn-lg` / `.btn-sm`	Size variants
`.active`	Active/pressed state
`disabled` attribute	Disabled state
`.btn-close`	× close button (no text)

Button Groups

Wrappers: .btn-group / .btn-group-vertical — Sizes: .btn-group-sm / .btn-group-lg

Cards

Card Header

Card Title

Card Subtitle

Some quick example text.

Go somewhere

Card Footer

Primary Card

With text-bg-primary utility.

Border Colored

border-success class.

Card with list group inside:

Item 1
Item 2

Class	Effect
`.card`	Card container
`.card-body`	Main content area (padding)
`.card-title` / `.card-subtitle`	Title/subtitle inside card-body
`.card-text`	Paragraph inside card-body
`.card-link`	Link inside card-body
`.card-header` / `.card-footer`	Top/bottom sections
`.card-img-top` / `.card-img-bottom`	Image cap
`.card-img-overlay`	Position content over image
`.text-bg-{color}`	Colored card with appropriate text
`.card-group`	Flush/joined card group

Carousel

Slide 1

Slide 2

Class / Attribute	Effect
`.carousel .slide`	Outer wrapper; .slide enables animation
`.carousel-inner`	Slides wrapper
`.carousel-item`	Individual slide; first needs .active
`.carousel-indicators`	Dot indicators
`.carousel-control-prev/next`	Arrow controls
`.carousel-control-prev/next-icon`	SVG arrow icon
`.carousel-caption`	Text overlay on slide
`.carousel-fade`	Fade instead of slide transition
`data-bs-ride="carousel"`	Auto-play on load
`data-bs-interval="{ms}"`	Per-item interval (default 5000)

Collapse

Toggle via link

Collapsible content. Starts shown (.show).

Attribute / Class	Effect
`data-bs-toggle="collapse"`	On the trigger element
`data-bs-target="#id"`	Target element (button)
`href="#id"`	Target element (link)
`.collapse`	On the collapsible element
`.show`	Initially expanded
`.collapsing`	Added during transition (auto)
`.accordion`	Accordion wrapper
`.accordion-item / .accordion-header / .accordion-button / .accordion-body`	Accordion parts
`data-bs-parent="#accordionId"`	Close others when one opens

Dropdowns

Class / Attribute	Effect
`.dropdown`	Wrapper (position:relative)
`.dropup / .dropstart / .dropend`	Direction variant on wrapper
`.dropdown-toggle`	Add caret to trigger button
`data-bs-toggle="dropdown"`	On trigger button
`.dropdown-menu`	The <ul> menu
`.dropdown-menu-end`	Right-align the menu
`.dropdown-menu-{bp}-start/end`	Responsive alignment
`.dropdown-item`	Menu items (a or button)
`.dropdown-header`	Non-interactive heading
`.dropdown-divider`	Horizontal rule separator
`.active / .disabled`	Item states
`.dropdown-item-text`	Plain non-interactive text

List Group

Active item
Normal item
Disabled item
Actionable (hover)
With badge 14

Link item (active) Link item

Horizontal
List
Group

Contextual colors:

Primary
Success
Danger
Warning

Class	Effect
`.list-group`	Wrapper (ul or div)
`.list-group-item`	Each item
`.list-group-item-action`	Hover/focus states for a/button
`.list-group-flush`	Remove border-radius and outer borders
`.list-group-numbered`	Auto-numbered with CSS counters
`.list-group-horizontal`	Horizontal layout
`.list-group-horizontal-{bp}`	Responsive horizontal
`.list-group-item-{color}`	Contextual color

Modal

Class / Attribute	Effect
`data-bs-toggle="modal"` + `data-bs-target="#id"`	Trigger button
`.modal .fade`	Modal wrapper; .fade enables animation
`.modal-dialog`	Sizing/centering wrapper
`.modal-dialog-centered`	Vertically centered
`.modal-dialog-scrollable`	Scrollable body
`.modal-sm / .modal-lg / .modal-xl`	Size variants (add to .modal-dialog)
`.modal-fullscreen`	Full screen modal
`.modal-fullscreen-{bp}-down`	Full screen below breakpoint
`.modal-content`	White rounded box
`.modal-header / .modal-body / .modal-footer`	Sections
`.modal-title`	Title in header
`data-bs-dismiss="modal"`	Close button
`data-bs-backdrop="static"`	Prevent backdrop close

JS API

var myModal = new bootstrap.Modal(document.getElementById('myModal'))
myModal.show()
myModal.hide()
myModal.toggle()
myModal.dispose()
// Events: show.bs.modal, shown.bs.modal, hide.bs.modal, hidden.bs.modal

Navbar

Class	Effect
`.navbar`	Base navbar
`.navbar-expand-{bp}`	Expand at breakpoint (collapse below)
`.navbar-dark`	Light text/icons for dark backgrounds
`.navbar-light`	Dark text/icons for light backgrounds
`.navbar-brand`	Logo/brand link
`.navbar-toggler`	Hamburger toggle button
`.navbar-toggler-icon`	Hamburger icon inside toggler
`.navbar-collapse`	Collapsible content wrapper
`.navbar-nav`	<ul> nav links container
`.nav-item / .nav-link`	li / a inside navbar-nav
`.navbar-text`	Plain text in navbar
`.sticky-top`	Sticky positioning
`.fixed-top / .fixed-bottom`	Fixed position

Navs & Tabs

Tabs with tabpanel:

Tab 1 content here.

Tab 2 content here.

Class	Effect
`.nav`	Base nav (ul or div)
`.nav-tabs`	Tabbed style
`.nav-pills`	Pill style
`.nav-underline`	Underline style (v5.3+)
`.nav-fill`	Fill available space proportionally
`.nav-justified`	Fill with equal widths
`.nav-item / .nav-link`	li / a inside .nav
`data-bs-toggle="tab"`	Enable tab switching
`.tab-content / .tab-pane`	Tabpanel wrapper and panels
`.fade .show .active`	Add to tab-pane for transitions

Offcanvas

Content here. Slides in from the left.

Class	Effect
`.offcanvas`	Offcanvas container
`.offcanvas-start`	Slide from left
`.offcanvas-end`	Slide from right
`.offcanvas-top`	Slide from top
`.offcanvas-bottom`	Slide from bottom
`.offcanvas-header / .offcanvas-title / .offcanvas-body`	Structural parts
`data-bs-toggle="offcanvas"`	On trigger
`data-bs-scroll="true"`	Allow body scroll when open
`data-bs-backdrop="false"`	Disable backdrop

Pagination

Wrapper: .pagination — Item: .page-item — Link: .page-link — States: .active / .disabled — Sizes: .pagination-sm / .pagination-lg

Popovers

Attribute	Effect
`data-bs-toggle="popover"`	Enable popover
`data-bs-title="..."`	Popover header
`data-bs-content="..."`	Popover body
`data-bs-placement="top/bottom/left/right"`	Direction
`data-bs-trigger="hover focus click"`	Trigger type(s)
`data-bs-html="true"`	Allow HTML in content

JS init (required)

var popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]')
var popoverList = [...popoverTriggerList].map(function(el) { return new bootstrap.Popover(el) })

Progress

25%

50%

75%

Class	Effect
`.progress`	Outer track; set height with style
`.progress-bar`	The fill; set width with style
`.progress-bar-striped`	Stripe pattern
`.progress-bar-animated`	Animated stripes
`.bg-{color}`	Bar color

Scrollspy

<!-- On scrollable container: -->
<body data-bs-spy="scroll" data-bs-target="#navbar" data-bs-offset="70" data-bs-smooth-scroll="true">

<!-- Or on a div: -->
<div data-bs-spy="scroll" data-bs-target="#list-example" style="height:200px; overflow-y:scroll">
  <h4 id="s1">Section 1</h4>...
</div>

<!-- Nav must have href matching the section IDs -->
<nav id="list-example">
  <a class="nav-link" href="#s1">Section 1</a>
</nav>

Attributes: data-bs-spy="scroll" on target, data-bs-target="#navId", data-bs-offset (px), data-bs-smooth-scroll="true"

Spinners

Border spinner: .spinner-border — Grow spinner: .spinner-grow — Sizes: .spinner-border-sm / .spinner-grow-sm — Colors via .text-{color}

Toasts

<div class="toast-container position-fixed bottom-0 end-0 p-3">
  <div id="myToast" class="toast" role="alert">
    <div class="toast-header">
      <strong class="me-auto">Title</strong>
      <small>Just now</small>
      <button type="button" class="btn-close" data-bs-dismiss="toast"></button>
    </div>
    <div class="toast-body">Message here.</div>
  </div>
</div>

var toastEl = document.getElementById('myToast')
var toast = new bootstrap.Toast(toastEl)
toast.show()
// Options: autohide (true), delay (5000ms)
// data-bs-autohide="false" to keep open

Tooltips

Attribute	Effect
`data-bs-toggle="tooltip"`	Mark element
`data-bs-title="..."`	Tooltip text
`data-bs-placement="top/bottom/left/right/auto"`	Direction
`data-bs-html="true"`	HTML in tooltip
`data-bs-trigger="hover focus"`	Trigger event(s)

JS init (required)

var tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
var tooltipList = [...tooltipTriggerList].map(function(el) { return new bootstrap.Tooltip(el) })

Spacing (Margin & Padding)

Format: .{property}{sides}-{size} — responsive: .{property}{sides}-{bp}-{size}

Property	Sides	Size
`m` = margin `p` = padding	blank = all `t` = top `b` = bottom `s` = start (left) `e` = end (right) `x` = horizontal `y` = vertical	`0` = 0 `1` = .25rem `2` = .5rem `3` = 1rem `4` = 1.5rem `5` = 3rem `auto` = auto (margin only)

Examples: .mt-3 (margin-top 1rem), .px-2 (padding-left/right .5rem), .mx-auto (center block), .ms-md-4 (responsive margin-start)

Sizing

Class	CSS
`.w-25 / .w-50 / .w-75 / .w-100`	width: 25% / 50% / 75% / 100%
`.w-auto`	width: auto
`.mw-100`	max-width: 100%
`.vw-100`	width: 100vw
`.min-vw-100`	min-width: 100vw
`.h-25 / .h-50 / .h-75 / .h-100`	height: 25% / 50% / 75% / 100%
`.h-auto`	height: auto
`.mh-100`	max-height: 100%
`.vh-100`	height: 100vh
`.min-vh-100`	min-height: 100vh

Display

Format: .d-{value} or .d-{bp}-{value}

Class	CSS
`.d-none`	display: none
`.d-inline`	display: inline
`.d-inline-block`	display: inline-block
`.d-block`	display: block
`.d-grid`	display: grid
`.d-inline-grid`	display: inline-grid
`.d-table`	display: table
`.d-table-cell`	display: table-cell
`.d-table-row`	display: table-row
`.d-flex`	display: flex
`.d-inline-flex`	display: inline-flex
`.d-print-{value}`	Print-only display value

Hide at breakpoint: .d-none .d-md-block (hidden below md) — Show only at sm: .d-sm-block .d-md-none

Position

Class	CSS
`.position-static`	position: static
`.position-relative`	position: relative
`.position-absolute`	position: absolute
`.position-fixed`	position: fixed
`.position-sticky`	position: sticky
`.sticky-top / .sticky-bottom`	sticky top/bottom with top:0/bottom:0
`.sticky-{bp}-top/bottom`	Responsive sticky
`.fixed-top / .fixed-bottom`	Fixed at top/bottom of viewport
`.top-0 / .top-50 / .top-100`	top: 0 / 50% / 100%
`.bottom-0 / .bottom-50 / .bottom-100`	bottom
`.start-0 / .start-50 / .start-100`	left (LTR) / right (RTL)
`.end-0 / .end-50 / .end-100`	right (LTR) / left (RTL)
`.translate-middle`	transform: translate(-50%, -50%)
`.translate-middle-x / .translate-middle-y`	X or Y only

Centering trick: .position-absolute .top-50 .start-50 .translate-middle

Borders

border border-primary border-success border-danger border-0

border-top border-end border-bottom border-start

border-2 border-3 border-4 border-5

rounded rounded-0 rounded-1 rounded-2 rounded-3 rounded-4 rounded-5 circle pill

rounded-top rounded-bottom rounded-start rounded-end

Class	Effect
`.border`	Add 1px border all sides
`.border-{0–5}`	Border width
`.border-{color}`	Border color
`.border-top/end/bottom/start`	Single side border on
`.border-top-0/end-0/bottom-0/start-0`	Single side border off
`.border-opacity-{10/25/50/75/100}`	Border opacity
`.rounded`	Default border-radius
`.rounded-{0–5}`	Border-radius scale
`.rounded-circle`	50% border-radius
`.rounded-pill`	Pill shape (50rem radius)
`.rounded-top/end/bottom/start`	One side rounded

Shadows

shadow-none

shadow-sm

shadow (default)

shadow-lg

Classes: .shadow-none / .shadow-sm / .shadow / .shadow-lg

Colors & Backgrounds

text-primary

text-secondary

text-success

text-danger

text-warning

text-info

text-body

text-muted

text-black

text-white

bg-primary

bg-secondary

bg-success

bg-danger

bg-warning

bg-info

bg-light

bg-dark

bg-body

bg-transparent

text-bg-primary (auto contrast)

text-bg-success

text-bg-danger

text-bg-warning

bg-opacity-75

bg-opacity-50

bg-opacity-25

bg-opacity-10

Class pattern	Effect
`.text-{color}`	Text color (primary/secondary/success/danger/warning/info/light/dark/body/muted/white/black/white-50/black-50)
`.text-opacity-{25/50/75/100}`	Text opacity
`.bg-{color}`	Background color
`.bg-opacity-{10/25/50/75/100}`	Background opacity
`.bg-gradient`	Add gradient to bg color
`.text-bg-{color}`	Background + auto-contrast text color
`.link-{color}`	Color a link + hover state
`.link-opacity-{10/25/50/75/100}`	Link opacity
`.link-underline-{color}`	Underline color only

Overflow

Class	CSS
`.overflow-auto`	overflow: auto
`.overflow-hidden`	overflow: hidden
`.overflow-visible`	overflow: visible
`.overflow-scroll`	overflow: scroll
`.overflow-x-auto/hidden/visible/scroll`	overflow-x
`.overflow-y-auto/hidden/visible/scroll`	overflow-y

Visibility & Accessibility

Class	Effect
`.visible`	visibility: visible
`.invisible`	visibility: hidden (still takes space)
`.d-none`	display: none (no space)
`.visually-hidden`	Hidden visually but available to screen readers
`.visually-hidden-focusable`	Hidden until focused (skip nav)
`.stretched-link`	Make containing block clickable (extend link)
`.clearfix`	Clearfix float hack
`.float-start / .float-end / .float-none`	Float utilities (support bp infixes)
`.pe-none / .pe-auto`	pointer-events: none / auto
`.user-select-none/all/auto`	user-select

Z-index

Class	z-index	Use case
`.z-n1`	-1	Behind content
`.z-0`	0
`.z-1`	1	Slightly above
`.z-2`	2
`.z-3`	3
CSS var `--bs-zindex-dropdown`	1000	Dropdowns
CSS var `--bs-zindex-sticky`	1020	Sticky elements
CSS var `--bs-zindex-fixed`	1030	Fixed navbars
CSS var `--bs-zindex-offcanvas-backdrop`	1040	Offcanvas backdrop
CSS var `--bs-zindex-offcanvas`	1045	Offcanvas
CSS var `--bs-zindex-modal-backdrop`	1050	Modal backdrop
CSS var `--bs-zindex-modal`	1055	Modal
CSS var `--bs-zindex-popover`	1070	Popovers
CSS var `--bs-zindex-tooltip`	1080	Tooltips
CSS var `--bs-zindex-toast`	1090	Toasts

JavaScript API — Common Patterns

CDN include

<!-- Bundle (includes Popper) -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.js"></script>

<!-- Separate: Popper first, then Bootstrap -->
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.js"></script>

Universal patterns

// Instantiate
var myComponent = new bootstrap.Modal(el, options)

// Get existing instance (returns null if none)
var instance = bootstrap.Modal.getInstance(el)

// Get or create
var instance = bootstrap.Modal.getOrCreateInstance(el)

// Dispose
instance.dispose()

Component — Options & Events

Component	Key Options	Key Events
Modal	backdrop (bool/static), keyboard, focus	show.bs.modal, shown.bs.modal, hide.bs.modal, hidden.bs.modal
Collapse	parent, toggle	show.bs.collapse, shown.bs.collapse, hide.bs.collapse, hidden.bs.collapse
Dropdown	autoClose (true/false/inside/outside), boundary, display, offset, popperConfig	show.bs.dropdown, shown.bs.dropdown, hide.bs.dropdown, hidden.bs.dropdown
Tooltip	animation, container, delay, html, placement, selector, title, trigger, offset	show.bs.tooltip, shown.bs.tooltip, hide.bs.tooltip, hidden.bs.tooltip
Popover	Same as tooltip + content, sanitize, allowList	show.bs.popover, shown.bs.popover, hide.bs.popover, hidden.bs.popover
Toast	animation, autohide (true), delay (5000)	show.bs.toast, shown.bs.toast, hide.bs.toast, hidden.bs.toast
Carousel	interval (5000), keyboard, pause (hover), ride (false/carousel), touch, wrap	slide.bs.carousel, slid.bs.carousel
Offcanvas	backdrop (true/false/static), keyboard, scroll	show.bs.offcanvas, shown.bs.offcanvas, hide.bs.offcanvas, hidden.bs.offcanvas
Tab	—	show.bs.tab, shown.bs.tab, hide.bs.tab, hidden.bs.tab
Alert	—	close.bs.alert, closed.bs.alert
Scrollspy	offset, method (auto/offset/position), rootMargin, smoothScroll, threshold, target	activate.bs.scrollspy

Event listener pattern

var myModalEl = document.getElementById('myModal')
myModalEl.addEventListener('shown.bs.modal', function(event) {
  // do something when fully shown
})

// Event object for carousel has: direction, relatedTarget, from, to
var myCarouselEl = document.getElementById('myCarousel')
myCarouselEl.addEventListener('slid.bs.carousel', function(event) {
  console.log(event.to)
})

data-bs-* attribute reference

Attribute	Equivalent JS option
`data-bs-toggle="modal"`	Triggers Modal.show()
`data-bs-dismiss="modal\|alert\|offcanvas"`	Triggers hide()
`data-bs-target="#id"`	target option
`data-bs-interval="3000"`	Carousel interval option
`data-bs-ride="carousel"`	Carousel ride option
`data-bs-backdrop="static"`	Modal backdrop option
`data-bs-keyboard="false"`	Modal keyboard option
`data-bs-config='{...}'`	JSON options object (v5.2+)

Bootstrap 5.3 — Complete Reference

Breakpoints

Containers

Grid System

Gutters

Flexbox Utilities

Typography

h1. Heading small muted

h2. Heading

h3. Heading

h4. Heading

h5. Heading

h6. Heading

Display Headings

Images

Tables

Figures

Form Controls

Select

Checks & Radios

Range

Input Groups

Floating Labels

Validation

Alerts

Badges

Buttons

Button Groups

Cards

Card Title

Card Subtitle

Primary Card

Border Colored

Carousel

Collapse

Dropdowns

Section

List Group

Modal

Modal Title

JS API

Navbar

Navs & Tabs

Offcanvas

Offcanvas Title

Pagination

Popovers

JS init (required)

Progress

Scrollspy

Spinners

Toasts

Tooltips

JS init (required)

Spacing (Margin & Padding)

Sizing

Display

Position

Borders

Shadows

Colors & Backgrounds

Overflow

Visibility & Accessibility

Z-index

JavaScript API — Common Patterns

CDN include

Universal patterns

Component — Options & Events

Event listener pattern

data-bs-* attribute reference