Quick Reference

Bootstrap Cheat Sheet — Complete Reference

Welcome to the ultimate Bootstrap cheat sheet! This comprehensive reference consolidates every class, component, utility, and concept from our Bootstrap tutorial series. Use it as a quick reference during development, interview preparation, or when building your next project.

Pro Tip: Bookmark this page! It's your one-stop reference for all Bootstrap classes. The responsive breakpoints apply to most utilities: sm (≥576px), md (≥768px), lg (≥992px), xl (≥1200px), xxl (≥1400px).

1. Grid System

Bootstrap's 12-column responsive grid is the foundation of all layouts.

Class	Description	Example
`.container`	Fixed-width container (responsive)	`<div class="container">`
`.container-fluid`	Full-width container (100% width)	`<div class="container-fluid">`
`.container-{breakpoint}`	Fixed-width until breakpoint	`.container-md`, `.container-lg`
`.row`	Horizontal group of columns	`<div class="row">`
`.col`	Auto-width column (equal distribution)	`<div class="col">`
`.col-{number}`	Column spanning 1-12 columns	`.col-4`, `.col-8`
`.col-{breakpoint}-{number}`	Responsive column	`.col-md-6`, `.col-lg-4`
`.col-auto`	Column sized to content	`<div class="col-auto">`
`.offset-{number}`	Push column right by number of columns	`.offset-4` (centers a col-4)
`.offset-{breakpoint}-{number}`	Responsive offset	`.offset-md-3`
`.order-{number}`	Change visual order (0-5)	`.order-2`, `.order-first`
`.order-{breakpoint}-{number}`	Responsive ordering	`.order-md-1`
`.row-cols-{number}`	Auto-columns per row	`.row-cols-2`, `.row-cols-md-3`
`.g-{size}`	Gutters (gap between columns)	`.g-3`, `.g-5`
`.gx-{size}`	Horizontal gutters only	`.gx-4`
`.gy-{size}`	Vertical gutters only	`.gy-4`

Grid Breakpoints

Breakpoint	Class Infix	Min Width	Device
Extra Small	none	<576px	Phones
Small	`sm`	≥576px	Large phones
Medium	`md`	≥768px	Tablets
Large	`lg`	≥992px	Desktops
Extra Large	`xl`	≥1200px	Large desktops
Extra Extra Large	`xxl`	≥1400px	Extra large screens

2. Typography

Bootstrap's typography system provides clean, readable text styling.

Class/Element	Description	Example
`<h1>` - `<h6>`	HTML headings	`<h1>Heading</h1>`
`.h1` - `.h6`	Heading styles on any element	`<p class="h3">Looks like h3</p>`
`.display-1` - `.display-6`	Larger display headings	`<h1 class="display-1">`
`.lead`	Emphasized paragraph	`<p class="lead">`
`.text-start`	Left-aligned text	`<p class="text-start">`
`.text-center`	Center-aligned text	`<p class="text-center">`
`.text-end`	Right-aligned text	`<p class="text-end">`
`.text-wrap`	Wrap text normally	`<p class="text-wrap">`
`.text-nowrap`	Prevent text wrapping	`<p class="text-nowrap">`
`.text-truncate`	Truncate with ellipsis	`<p class="text-truncate">`
`.text-lowercase`	Convert to lowercase	`<p class="text-lowercase">`
`.text-uppercase`	Convert to uppercase	`<p class="text-uppercase">`
`.text-capitalize`	Capitalize each word	`<p class="text-capitalize">`
`.fw-bold`	Bold font weight	`<p class="fw-bold">`
`.fw-bolder`	Bolder font weight	`<p class="fw-bolder">`
`.fw-semibold`	Semibold font weight	`<p class="fw-semibold">`
`.fw-normal`	Normal font weight	`<p class="fw-normal">`
`.fw-light`	Light font weight	`<p class="fw-light">`
`.fst-italic`	Italic text	`<p class="fst-italic">`
`.fst-normal`	Normal font style	`<p class="fst-normal">`
`.text-decoration-none`	Remove text decoration	`<a class="text-decoration-none">`
`.text-decoration-underline`	Underline text	`<p class="text-decoration-underline">`
`.text-decoration-line-through`	Strikethrough	`<p class="text-decoration-line-through">`

3. Colors

Bootstrap's contextual color system for text, backgrounds, and borders.

Context	Text Color	Background Color	Border Color
Primary	`.text-primary`	`.bg-primary`	`.border-primary`
Secondary	`.text-secondary`	`.bg-secondary`	`.border-secondary`
Success	`.text-success`	`.bg-success`	`.border-success`
Danger	`.text-danger`	`.bg-danger`	`.border-danger`
Warning	`.text-warning`	`.bg-warning`	`.border-warning`
Info	`.text-info`	`.bg-info`	`.border-info`
Light	`.text-light`	`.bg-light`	`.border-light`
Dark	`.text-dark`	`.bg-dark`	`.border-dark`
Muted	`.text-muted`	—	—
White	`.text-white`	`.bg-white`	`.border-white`
Body	`.text-body`	`.bg-body`	`.border-body`
Transparent	—	`.bg-transparent`	`.border-transparent`

Opacity Utilities: .bg-opacity-10, .bg-opacity-25, .bg-opacity-50, .bg-opacity-75, .bg-opacity-100

Gradient: .bg-gradient (adds gradient to background)

4. Spacing Utilities

Margin (m) and padding (p) with 0-5 scale and auto.

Class Pattern	Description	Examples
`m-{size}`	Margin on all sides	`m-3`, `m-5`
`mt-{size}`	Margin top	`mt-2`, `mt-4`
`mb-{size}`	Margin bottom	`mb-1`, `mb-3`
`ms-{size}`	Margin start (left in LTR)	`ms-3`
`me-{size}`	Margin end (right in LTR)	`me-3`
`mx-{size}`	Margin left & right	`mx-auto` (centers block)
`my-{size}`	Margin top & bottom	`my-4`
`p-{size}`	Padding on all sides	`p-3`, `p-5`
`pt-{size}`	Padding top	`pt-2`, `pt-4`
`pb-{size}`	Padding bottom	`pb-1`, `pb-3`
`ps-{size}`	Padding start	`ps-3`
`pe-{size}`	Padding end	`pe-3`
`px-{size}`	Padding left & right	`px-4`
`py-{size}`	Padding top & bottom	`py-4`

Spacing Scale

Size	Value	Equivalent
`0`	0	0rem (none)
`1`	$spacer × .25	0.25rem (4px)
`2`	$spacer × .5	0.5rem (8px)
`3`	$spacer	1rem (16px)
`4`	$spacer × 1.5	1.5rem (24px)
`5`	$spacer × 3	3rem (48px)
`auto`	auto	Automatic (margin only)

5. Buttons

Use .btn with contextual classes for styled buttons.

Class	Description	Example
`.btn`	Base button class	`<button class="btn">`
`.btn-primary`	Primary button	`<button class="btn btn-primary">`
`.btn-secondary`	Secondary button	`<button class="btn btn-secondary">`
`.btn-success`	Success button	`<button class="btn btn-success">`
`.btn-danger`	Danger button	`<button class="btn btn-danger">`
`.btn-warning`	Warning button	`<button class="btn btn-warning">`
`.btn-info`	Info button	`<button class="btn btn-info">`
`.btn-light`	Light button	`<button class="btn btn-light">`
`.btn-dark`	Dark button	`<button class="btn btn-dark">`
`.btn-link`	Link-style button	`<button class="btn btn-link">`
`.btn-outline-*`	Outline buttons	`.btn-outline-primary`
`.btn-lg`	Large button	`<button class="btn btn-primary btn-lg">`
`.btn-sm`	Small button	`<button class="btn btn-primary btn-sm">`
`.active`	Active state	`<button class="btn btn-primary active">`
`disabled`	Disabled state	`<button disabled>`
`.d-block` + `.w-100`	Full-width button	`<button class="btn btn-primary d-block w-100">`
`.btn-group`	Group of buttons	`<div class="btn-group">`

6. Forms

Form controls with .form-control, labels with .form-label.

Class/Element	Description	Example
`.form-control`	Text input, textarea, select	`<input class="form-control">`
`.form-label`	Label for form controls	`<label class="form-label">`
`.form-text`	Helper text	`<div class="form-text">`
`.form-select`	Select dropdown	`<select class="form-select">`
`.form-check`	Checkbox/radio container	`<div class="form-check">`
`.form-check-input`	Checkbox/radio input	`<input class="form-check-input" type="checkbox">`
`.form-check-label`	Checkbox/radio label	`<label class="form-check-label">`
`.form-switch`	Toggle switch	`<div class="form-check form-switch">`
`.form-range`	Range slider	`<input type="range" class="form-range">`
`.form-floating`	Floating label	`<div class="form-floating">`
`.form-control-lg`	Large input	`<input class="form-control form-control-lg">`
`.form-control-sm`	Small input	`<input class="form-control form-control-sm">`
`.is-valid`	Valid state	`<input class="form-control is-valid">`
`.is-invalid`	Invalid state	`<input class="form-control is-invalid">`
`.valid-feedback`	Validation success message	`<div class="valid-feedback">`
`.invalid-feedback`	Validation error message	`<div class="invalid-feedback">`
`.input-group`	Input with add-ons	`<div class="input-group">`
`.input-group-text`	Text add-on	`<span class="input-group-text">`
`.was-validated`	Form validation trigger	`<form class="was-validated">`

7. Tables

Use .table on any <table> for Bootstrap styling.

Class	Description
`.table`	Base table styling
`.table-striped`	Zebra-striping on rows
`.table-bordered`	Borders on all sides
`.table-hover`	Hover effect on rows
`.table-sm`	Compact table (less padding)
`.table-dark`	Dark theme table
`.table-primary`	Primary-colored row
`.table-secondary`	Secondary-colored row
`.table-success`	Success-colored row
`.table-danger`	Danger-colored row
`.table-warning`	Warning-colored row
`.table-info`	Info-colored row
`.table-light`	Light-colored row
`.table-responsive`	Scrollable table on small screens
`.table-responsive-{breakpoint}`	Responsive table at specific breakpoint

8. Navbar

Responsive navigation header with .navbar.

Class	Description
`.navbar`	Base navbar container
`.navbar-expand-{breakpoint}`	Breakpoint where navbar expands
`.navbar-brand`	Brand/logo text or image
`.navbar-nav`	Navigation links container
`.nav-item`	Individual nav item
`.nav-link`	Navigation link
`.navbar-toggler`	Hamburger menu button
`.navbar-toggler-icon`	Hamburger icon
`.collapse`	Collapsible content
`.navbar-collapse`	Collapsible navbar section
`.navbar-dark`	Dark theme (light text)
`.navbar-light`	Light theme (dark text)
`.bg-dark`, `.bg-light`	Background colors
`.fixed-top`	Fixed to top of viewport
`.fixed-bottom`	Fixed to bottom of viewport
`.sticky-top`	Sticky when scrolling
`.me-auto`	Push items to the right
`.ms-auto`	Push items to the left

9. Cards

Flexible content container with .card.

Class	Description
`.card`	Base card container
`.card-header`	Card header section
`.card-body`	Main card content
`.card-footer`	Card footer section
`.card-title`	Card title
`.card-text`	Card text content
`.card-img-top`	Image at top of card
`.card-img-bottom`	Image at bottom of card
`.card-img`	Full-width image in card
`.card-img-overlay`	Overlay text on image
`.card-subtitle`	Card subtitle
`.card-link`	Link inside card
`.card-group`	Group of equal-height cards
`.card-deck`	Deck of cards (deprecated)
`.list-group-flush`	List group inside card
`.text-bg-*`	Card with colored background
`.border-*`	Card with colored border
`.h-100`	Card fills container height

10. Modals

Dialog/popup with .modal and data-bs-toggle="modal".

Class/Attribute	Description
`.modal`	Modal container (hidden by default)
`.modal-dialog`	Modal dialog container
`.modal-content`	Modal content wrapper
`.modal-header`	Modal header (title + close button)
`.modal-body`	Modal body content
`.modal-footer`	Modal footer (buttons)
`.modal-title`	Modal title
`.btn-close`	Close button (X)
`.modal-sm`	Small modal
`.modal-lg`	Large modal
`.modal-xl`	Extra large modal
`.modal-fullscreen`	Full-screen modal
`.modal-dialog-scrollable`	Scrollable modal body
`.modal-dialog-centered`	Vertically centered modal
`data-bs-toggle="modal"`	Triggers modal
`data-bs-target="#id"`	Targets modal ID
`data-bs-dismiss="modal"`	Closes modal
`.fade`	Fade animation
`data-bs-backdrop="static"`	Prevents closing on backdrop click
`data-bs-keyboard="false"`	Prevents closing with ESC key

11. Carousel

Image slider/slideshow with .carousel.

Class/Attribute	Description
`.carousel`	Carousel container
`.carousel-inner`	Slides wrapper
`.carousel-item`	Individual slide
`.active`	Active/visible slide
`.carousel-indicators`	Slide indicators (dots)
`.carousel-control-prev`	Previous button
`.carousel-control-next`	Next button
`.carousel-control-prev-icon`	Previous arrow icon
`.carousel-control-next-icon`	Next arrow icon
`.carousel-caption`	Caption overlay on slide
`.carousel-dark`	Dark theme (dark controls)
`.carousel-fade`	Fade transition instead of slide
`data-bs-ride="carousel"`	Autoplay
`data-bs-interval="2000"`	Slide interval (milliseconds)
`data-bs-slide-to="0"`	Slide to specific index

12. Accordion

Expandable sections with .accordion.

Class/Attribute	Description
`.accordion`	Accordion container
`.accordion-item`	Individual accordion item
`.accordion-header`	Header containing toggle button
`.accordion-button`	Toggle button
`.accordion-collapse`	Collapsible content container
`.accordion-body`	Accordion content
`.accordion-flush`	Borderless accordion
`.show`	Expanded/visible state
`.collapsed`	Collapsed state of button
`data-bs-parent="#id"`	Parent accordion (close others)
`data-bs-toggle="collapse"`	Toggle collapse
`data-bs-target="#id"`	Target collapsible content

13. Dropdowns

Contextual menus with .dropdown.

Class/Attribute	Description
`.dropdown`	Dropdown container
`.dropdown-toggle`	Toggle button
`.dropdown-menu`	Dropdown menu container
`.dropdown-item`	Individual menu item
`.dropdown-divider`	Divider line in menu
`.dropdown-header`	Header text in menu
`.dropdown-menu-dark`	Dark dropdown menu
`.dropdown-menu-end`	Right-aligned dropdown menu
`.dropup`	Dropdown opens upward
`.dropend`	Dropdown opens to the right
`.dropstart`	Dropdown opens to the left
`data-bs-toggle="dropdown"`	Triggers dropdown

14. Flexbox Utilities

CSS Flexbox utilities with .d-flex.

Class	Description
`.d-flex`	Flex container (block-level)
`.d-inline-flex`	Flex container (inline-level)
`.flex-row`	Horizontal direction (default)
`.flex-row-reverse`	Horizontal reversed
`.flex-column`	Vertical direction
`.flex-column-reverse`	Vertical reversed
`.flex-wrap`	Wrap items to next line
`.flex-nowrap`	No wrap (default)
`.flex-wrap-reverse`	Wrap reversed
`.justify-content-start`	Items at start (left)
`.justify-content-end`	Items at end (right)
`.justify-content-center`	Items centered
`.justify-content-between`	Space between items
`.justify-content-around`	Space around items
`.justify-content-evenly`	Evenly distributed space
`.align-items-start`	Items at top
`.align-items-end`	Items at bottom
`.align-items-center`	Items centered vertically
`.align-items-baseline`	Items aligned by baseline
`.align-items-stretch`	Items stretched (default)
`.align-self-start`	Self at top
`.align-self-end`	Self at bottom
`.align-self-center`	Self centered
`.align-self-stretch`	Self stretched
`.align-self-baseline`	Self baseline
`.flex-grow-1`	Item grows to fill space
`.flex-shrink-0`	Item does not shrink
`.flex-fill`	Force equal width items
`.order-0` to `.order-5`	Change visual order
`.order-first`	First (-1)
`.order-last`	Last (6)
`.gap-{size}`	Gap between flex items

15. Display Utilities

Control element visibility and display behavior.

Class	Description
`.d-none`	Hidden (display: none)
`.d-block`	Block element
`.d-inline`	Inline element
`.d-inline-block`	Inline-block element
`.d-flex`	Flex container
`.d-inline-flex`	Inline flex container
`.d-grid`	Grid container
`.d-table`	Table element
`.d-table-cell`	Table cell
`.d-table-row`	Table row
`.visible`	Visible (default)
`.invisible`	Invisible (still takes space)

Responsive Display: Use .d-{breakpoint}-{value} (e.g., .d-md-none, .d-lg-block)

16. Positioning Utilities

Control element positioning with .position-*.

Class	Description
`.position-static`	Default static position
`.position-relative`	Relative position
`.position-absolute`	Absolute position
`.position-fixed`	Fixed position (viewport)
`.position-sticky`	Sticky position
`.top-0`	Top: 0
`.bottom-0`	Bottom: 0
`.start-0`	Left: 0
`.end-0`	Right: 0
`.top-50`	Top: 50%
`.start-50`	Left: 50%
`.translate-middle`	Transform: translate(-50%, -50%)
`.translate-middle-x`	Transform: translateX(-50%)
`.translate-middle-y`	Transform: translateY(-50%)
`.z-0` to `.z-3`	Z-index values

17. Sizing & Borders

Element sizing and border utilities.

Class	Description
`.w-25`, `.w-50`, `.w-75`, `.w-100`	Width percentage
`.mw-100`	Max-width: 100%
`.h-25`, `.h-50`, `.h-75`, `.h-100`	Height percentage
`.mh-100`	Max-height: 100%
`.min-vw-100`	Min-width: 100vw
`.min-vh-100`	Min-height: 100vh
`.vw-100`	Width: 100vw
`.vh-100`	Height: 100vh
`.border`	Border
`.border-0`	No border
`.border-top`, `.border-bottom`	Border on specific side
`.border-start`, `.border-end`	Border on specific side
`.border-{color}`	Border color
`.border-opacity-10` to `.border-opacity-100`	Border opacity
`.rounded`	Rounded corners
`.rounded-0`	No rounding
`.rounded-top`, `.rounded-bottom`	Rounded specific side
`.rounded-circle`	Circle shape
`.rounded-pill`	Pill shape
`.shadow`	Box shadow
`.shadow-sm`	Small shadow
`.shadow-lg`	Large shadow
`.shadow-none`	No shadow

18. Sass Theming Variables

Key Sass variables for customizing Bootstrap themes.

Variable	Description	Default
`$primary`	Primary brand color	`#0d6efd`
`$secondary`	Secondary color	`#6c757d`
`$success`	Success color	`#198754`
`$danger`	Danger color	`#dc3545`
`$warning`	Warning color	`#ffc107`
`$info`	Info color	`#0dcaf0`
`$light`	Light color	`#f8f9fa`
`$dark`	Dark color	`#212529`
`$font-family-base`	Base font family	`system-ui, -apple-system, ...`
`$font-size-base`	Base font size	`1rem`
`$spacer`	Base spacing unit	`1rem`
`$border-radius`	Base border radius	`.375rem`
`$box-shadow`	Default shadow	`0 .5rem 1rem rgba(0,0,0,.15)`
`$grid-gutter-width`	Grid gutter width	`1.5rem`
`$navbar-padding-y`	Navbar vertical padding	`.5rem`
`$card-border-radius`	Card border radius	`.375rem`

19. Quick Common Patterns

Ready-to-use pattern snippets for common use cases.

Centering Content

<!-- Flexbox center -->
<div class="d-flex justify-content-center align-items-center" style="min-height: 100vh;">
    Centered content
</div>

<!-- Text center -->
<div class="text-center">Centered text</div>

<!-- Block center (margin auto) -->
<div class="mx-auto" style="width: 200px;">Centered block</div>

Spacing Helper

<!-- Consistent spacing -->
<div class="p-3 mb-4 bg-light rounded">Content with spacing</div>

Mobile-First Responsive

<!-- Show/hide on different screens -->
<div class="d-none d-md-block">Visible on medium+</div>
<div class="d-block d-md-none">Visible only on mobile</div>

<!-- Responsive grid -->
<div class="row row-cols-1 row-cols-md-2 row-cols-lg-4">...</div>

Button with Icon

<button class="btn btn-primary">
    <i class="fas fa-plus"></i> Add Item
</button>

Card Grid

<div class="row row-cols-1 row-cols-md-3 g-4">
    <div class="col">
        <div class="card h-100">...</div>
    </div>
</div>

Modal Trigger

<button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#myModal">
    Open Modal
</button>

Navbar with Toggle

<nav class="navbar navbar-expand-lg bg-light">
    <div class="container">
        <a class="navbar-brand" href="#">Brand</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#nav">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="nav">
            <ul class="navbar-nav ms-auto">
                <li class="nav-item"><a class="nav-link" href="#">Home</a></li>
            </ul>
        </div>
    </div>
</nav>

Form Input with Validation

<div class="mb-3">
    <label class="form-label">Email</label>
    <input type="email" class="form-control is-valid" value="user@example.com">
    <div class="valid-feedback">Looks good!</div>
</div>

🎉 Congratulations! You've Mastered Bootstrap! 🎉

You now have a complete reference for Bootstrap. Keep this page bookmarked for quick access during development. Happy building!

PreviousBootstrap Customization — Sass & Theming Next You've completed the series! 🎉

Ready to master Bootstrap?

Master Bootstrap from scratch. Learn how to build modern, responsive websites with this complete frontend framework guide.

Explore Uncodemy