Bootstrap 5 Reference & Cheatsheet

Q: How do I update from Bootstrap 4 to Bootstrap 5?

Replace data- attributes with data-bs-, update spacing classes (ml→ms, mr→me), remove jQuery dependency, and replace form-group with margin utilities.

Q: What is the difference between Bootstrap 5's grid and CSS Grid?

Bootstrap’s flexbox grid is one-dimensional (row OR column). CSS Grid is two-dimensional (rows AND columns). Both are supported in Bootstrap 5.

Q: Can I use Bootstrap Icons without the full Bootstrap framework?

Yes. Bootstrap Icons is a separate library. Add only the icon CSS CDN link — no need for the full Bootstrap CSS.

Q: Does Bootstrap 5 support IE11?

No. Bootstrap 5 dropped Internet Explorer support. It requires modern browsers that support CSS custom properties.

Q: How do I override a Bootstrap style?

Use CSS specificity (add a class or ID), use !important (last resort), or override CSS variables. For Sass users, override variables before importing.

Q: What's the best way to learn Bootstrap?

Build real projects. Start with the grid system, then add components one at a time. Use this reference as a lookup tool while coding.

Web Frameworks

Bootstrap

Bootstrap 5 Reference & Cheatsheet

DodaTech Updated Jun 6, 2026 10 min read

Learning Path

    flowchart LR
    A["Bootstrap Overview"] --> B["Core Concepts"]
    B --> C["Intermediate Topics"]
    C --> D["Advanced Topics"]
    D --> E["Practical Applications"]
    A --> F["You Are Here"]
    style F fill:#f90,color:#fff

A complete Bootstrap 5.3 reference for daily development. Bookmark this page and keep it open while coding — it covers every utility, component pattern, and API you’ll need.

Grid System

<div class="container">
    <div class="row">
        <div class="col-4">33%</div>
        <div class="col-4">33%</div>
        <div class="col-4">33%</div>
    </div>
</div>

Breakpoints

Name	Min Width	Container	Prefix	Example
Extra small	< 576px	100%	`.col-`	`.col-12`
Small	≥ 576px	540px	`.col-sm-`	`.col-sm-6`
Medium	≥ 768px	720px	`.col-md-`	`.col-md-4`
Large	≥ 992px	960px	`.col-lg-`	`.col-lg-3`
Extra large	≥ 1200px	1140px	`.col-xl-`	`.col-xl-2`
XX-Large	≥ 1400px	1320px	`.col-xxl-`	`.col-xxl-1`

Grid Utilities

.g-0 through g-5      <!-- Gutters (spacing between columns) -->
.gx-* / .gy-*         <!-- Horizontal / vertical gutters only -->
.order-first          <!-- Reorder to first position -->
.order-last           <!-- Reorder to last position -->
.order-1 through order-5  <!-- Explicit order -->
.offset-*             <!-- Offset columns to the right -->
.ms-auto              <!-- Push column to right (auto left margin) -->
.me-auto              <!-- Push column to left (auto right margin) -->

Display

.d-none                <!-- Hide completely -->
.d-block               <!-- Block display -->
.d-inline              <!-- Inline display -->
.d-inline-block        <!-- Inline-block display -->
.d-flex                <!-- Flex container -->
.d-inline-flex         <!-- Inline flex container -->
.d-grid                <!-- CSS Grid container -->
.d-table / .d-table-cell

<!-- Responsive: d-{breakpoint}-{value} -->
.d-md-none             <!-- Hidden on md+ -->
.d-lg-flex             <!-- Flex on lg+ -->
.d-print-none          <!-- Hidden when printing -->

Flexbox

.d-flex                                         <!-- Container -->
.flex-row / .flex-column                        <!-- Direction -->
.flex-row-reverse / .flex-column-reverse        <!-- Reversed -->
.flex-wrap / .flex-nowrap                       <!-- Wrapping -->
.justify-content-start/end/center               <!-- Main axis -->
.justify-content-between/around/evenly          <!-- Distribution -->
.align-items-start/end/center                   <!-- Cross axis -->
.align-items-baseline/stretch                   <!-- Cross axis -->
.align-self-*                                   <!-- Per item -->
.flex-grow-1                                    <!-- Grow to fill -->
.flex-shrink-1                                  <!-- Allow shrink -->
.flex-fill                                      <!-- Equal width -->

Spacing

Format: {property}{sides}-{size}

Properties: m (margin), p (padding)

Sides: t (top), b (bottom), s (start), e (end), x (left+right), y (top+bottom), blank (all)

Sizes: 0 (0), 1 (0.25rem), 2 (0.5rem), 3 (1rem), 4 (1.5rem), 5 (3rem), auto

.m-0 through m-5       <!-- Margin all sides -->
.mt-*, mb-*, ms-*, me-*  <!-- Margin top/bottom/start/end -->
.mx-* / .my-*          <!-- Margin x-axis / y-axis -->
.m-auto / .mx-auto     <!-- Auto margin for centering -->
.p-0 through p-5       <!-- Padding all sides -->
.pt-*, pb-*, ps-*, pe-*  <!-- Padding top/bottom/start/end -->
.px-* / .py-*          <!-- Padding x-axis / y-axis -->

Sizing

.w-25 / .w-50 / .w-75 / .w-100    <!-- Width percentages -->
.mw-100                            <!-- Max width 100% -->
.vw-100 / .min-vw-100              <!-- Viewport width -->
.h-25 / .h-50 / .h-75 / .h-100    <!-- Height percentages -->
.mh-100                            <!-- Max height 100% -->
.vh-100 / .min-vh-100              <!-- Viewport height -->

Typography

<h1> through <h6>                     <!-- Semantic headings -->
.h1 through .h6                       <!-- Heading classes -->
.display-1 through .display-6         <!-- Display headings -->
.lead                                 <!-- Lead paragraph -->
.text-start / .text-center / .text-end  <!-- Alignment -->
.text-nowrap / .text-break            <!-- Wrapping -->
.text-truncate                        <!-- Truncate with ellipsis -->
.text-lowercase / .text-uppercase     <!-- Case transform -->
.text-capitalize
.fw-bold / .fw-normal / .fw-light    <!-- Font weight -->
.fst-italic / .fst-normal            <!-- Font style -->
.lh-1 / .lh-sm / .lh-base / .lh-lg   <!-- Line height -->
.font-monospace                       <!-- Monospace -->

Colors

<!-- Text -->
.text-primary / .text-secondary / .text-success
.text-danger / .text-warning / .text-info
.text-light / .text-dark / .text-body
.text-muted / .text-white / .text-black-50 / .text-white-50

<!-- Background -->
.bg-primary / .bg-secondary / .bg-success
.bg-danger / .bg-warning / .bg-info
.bg-light / .bg-dark / .bg-body
.bg-white / .bg-transparent
.bg-gradient

<!-- Opacity -->
.bg-opacity-10 / .bg-opacity-25 / .bg-opacity-50 / .bg-opacity-75
.text-opacity-10 / .text-opacity-25 / .text-opacity-50 / .text-opacity-75

Borders

.border / .border-top / .border-end / .border-bottom / .border-start
.border-0 / .border-top-0 / .border-end-0 / .border-bottom-0 / .border-start-0
.border-primary / .border-secondary / .border-success / .border-danger
.border-warning / .border-info / .border-light / .border-dark / .border-white
.border-1 through .border-5              <!-- Border width -->
.rounded / .rounded-0 through .rounded-5  <!-- Border radius -->
.rounded-circle / .rounded-pill          <!-- Shape -->
.rounded-top / .rounded-end / .rounded-bottom / .rounded-start

Shadows

.shadow-none      <!-- No shadow -->
.shadow-sm        <!-- Small shadow -->
.shadow           <!-- Regular shadow -->
.shadow-lg        <!-- Large shadow -->

Position

.position-static / .position-relative / .position-absolute
.position-fixed / .position-sticky
.fixed-top / .fixed-bottom / .sticky-top
.top-0 / .top-50 / .top-100
.bottom-0 / .bottom-50 / .bottom-100
.start-0 / .start-50 / .start-100
.end-0 / .end-50 / .end-100
.translate-middle / .translate-middle-x / .translate-middle-y

Overflow & Visibility

.overflow-auto / .overflow-hidden / .overflow-visible / .overflow-scroll
.visible / .invisible

Interactions

.pe-auto / .pe-none           <!-- Pointer events -->
.user-select-all / .user-select-auto / .user-select-none

Components Quick Reference

Alert

<div class="alert alert-primary" role="alert">Message</div>
<div class="alert alert-danger alert-dismissible fade show">
    <strong>Error!</strong> Something went wrong.
    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
</div>

Badge

<span class="badge bg-primary">New</span>
<span class="badge bg-danger rounded-pill">99+</span>

Button

<button class="btn btn-primary">Primary</button>
<button class="btn btn-outline-secondary">Outline</button>
<button class="btn btn-sm btn-success">Small</button>
<button class="btn btn-lg btn-danger">Large</button>
<button class="btn btn-primary disabled">Disabled</button>

Button Group

<div class="btn-group" role="group">
    <button class="btn btn-outline-primary">Left</button>
    <button class="btn btn-primary">Middle</button>
    <button class="btn btn-outline-primary">Right</button>
</div>

Card

<div class="card" style="width: 18rem;">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
        <h5 class="card-title">Title</h5>
        <p class="card-text">Content here.</p>
        <a href="#" class="btn btn-primary">Go</a>
    </div>
</div>

Carousel

<div id="demo" class="carousel slide" data-bs-ride="carousel">
    <div class="carousel-inner">
        <div class="carousel-item active"><img src="..." class="d-block w-100"></div>
        <div class="carousel-item"><img src="..." class="d-block w-100"></div>
    </div>
    <button class="carousel-control-prev" data-bs-target="#demo" data-bs-slide="prev"></button>
    <button class="carousel-control-next" data-bs-target="#demo" data-bs-slide="next"></button>
</div>

Collapse / Accordion

<button data-bs-toggle="collapse" data-bs-target="#demo">Toggle</button>
<div class="collapse" id="demo">Content</div>

<div class="accordion" id="accordionExample">
    <div class="accordion-item">
        <h2 class="accordion-header">
            <button class="accordion-button" data-bs-toggle="collapse" data-bs-target="#collapseOne">Item 1</button>
        </h2>
        <div id="collapseOne" class="accordion-collapse collapse show" data-bs-parent="#accordionExample">
            <div class="accordion-body">Content 1</div>
        </div>
    </div>
</div>

Dropdown

<div class="dropdown">
    <button class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown">Dropdown</button>
    <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#">Action</a></li>
        <li><hr class="dropdown-divider"></li>
        <li><a class="dropdown-item" href="#">Separated</a></li>
    </ul>
</div>

List Group

<ul class="list-group">
    <li class="list-group-item active">Active</li>
    <li class="list-group-item">Item</li>
</ul>
<div class="list-group">
    <a href="#" class="list-group-item list-group-item-action">Action item</a>
</div>

Modal

<button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#myModal">Open</button>
<div class="modal fade" id="myModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Title</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">Content</div>
            <div class="modal-footer">
                <button class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                <button class="btn btn-primary">Save</button>
            </div>
        </div>
    </div>
</div>

Navbar

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

Navs & Tabs

<ul class="nav nav-tabs">
    <li class="nav-item"><a class="nav-link active" href="#">Active</a></li>
    <li class="nav-item"><a class="nav-link disabled" href="#">Disabled</a></li>
</ul>

Offcanvas

<button data-bs-toggle="offcanvas" data-bs-target="#offcanvas">Open</button>
<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvas">
    <div class="offcanvas-header">
        <h5 class="offcanvas-title">Title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="offcanvas"></button>
    </div>
    <div class="offcanvas-body">Content</div>
</div>

Pagination

<nav>
    <ul class="pagination">
        <li class="page-item disabled"><a class="page-link">«</a></li>
        <li class="page-item active"><a class="page-link" href="#">1</a></li>
        <li class="page-item"><a class="page-link" href="#">2</a></li>
        <li class="page-item"><a class="page-link" href="#">»</a></li>
    </ul>
</nav>

Popover

<button type="button" class="btn btn-info" data-bs-toggle="popover"
    data-bs-content="Popover content.">Popover</button>

Progress

<div class="progress">
    <div class="progress-bar" role="progressbar" style="width: 75%;" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">75%</div>
</div>

Spinners

<div class="spinner-border" role="status"><span class="visually-hidden">Loading...</span></div>
<div class="spinner-grow text-success" role="status"><span class="visually-hidden">Loading...</span></div>

Toast

<div class="toast show" role="alert">
    <div class="toast-header">
        <strong class="me-auto">Notification</strong>
        <button type="button" class="btn-close" data-bs-dismiss="toast"></button>
    </div>
    <div class="toast-body">Message here.</div>
</div>

Tooltip

<button type="button" class="btn btn-info" data-bs-toggle="tooltip" title="Tooltip text">Hover me</button>

Table

<table class="table table-striped table-hover table-bordered table-sm">
<table class="table table-dark table-striped">
<div class="table-responsive">  <!-- Wrap table for horizontal scroll -->

Forms Quick Reference

<input type="text" class="form-control" placeholder="Text input">
<select class="form-select">
    <option selected>Open this select menu</option>
    <option value="1">One</option>
</select>
<textarea class="form-control" rows="3"></textarea>
<input type="file" class="form-control">
<div class="form-check">
    <input type="checkbox" class="form-check-input" id="check">
    <label class="form-check-label" for="check">Check me</label>
</div>
<div class="form-check form-switch">
    <input type="checkbox" class="form-check-input" role="switch" id="switch">
</div>
<div class="input-group">
    <span class="input-group-text">@</span>
    <input type="text" class="form-control">
</div>
<div class="form-floating">
    <input type="email" class="form-control" id="email" placeholder="name@example.com">
    <label for="email">Email address</label>
</div>

Form Validation

<form class="needs-validation" novalidate>
    <input type="text" class="form-control" required>
    <div class="valid-feedback">Looks good!</div>
    <div class="invalid-feedback">Please fill this in.</div>
</form>

JavaScript Plugin API

// Constructor pattern
new bootstrap.Modal(element, options)
new bootstrap.Tooltip(element, options)
new bootstrap.Popover(element, options)
new bootstrap.Toast(element, options)
new bootstrap.Collapse(element, options)
new bootstrap.Carousel(element, options)
new bootstrap.Tab(element)
new bootstrap.Dropdown(element)
new bootstrap.Offcanvas(element, options)
new bootstrap.ScrollSpy(element, options)

// Static methods
bootstrap.Modal.getInstance(element)
bootstrap.Modal.getOrCreateInstance(element, options)

// Dispose
instance.dispose()

Plugin Options

// Modal
{ backdrop: true, keyboard: true, focus: true }

// Tooltip / Popover
{ animation: true, delay: 0, html: false, placement: 'top',
  selector: false, title: '', trigger: 'hover click focus',
  container: false }

// Carousel
{ interval: 5000, keyboard: true, pause: 'hover',
  ride: false, wrap: true, touch: true }

// Toast
{ animation: true, autohide: true, delay: 5000 }

// Offcanvas
{ backdrop: true, keyboard: true, scroll: false }

// Collapse
{ parent: null, toggle: true }

Events

// Modals, Tooltips, Popovers, Toasts, Offcanvas, Collapse
'show.bs.modal' / 'shown.bs.modal' / 'hide.bs.modal' / 'hidden.bs.modal'

// Carousel
'slide.bs.carousel' / 'slid.bs.carousel'

// Tab
'show.bs.tab' / 'shown.bs.tab' / 'hide.bs.tab' / 'hidden.bs.tab'

CSS Variables

:root {
    --bs-primary: #0d6efd;
    --bs-primary-rgb: 13, 110, 253;
    --bs-secondary: #6c757d;
    --bs-success: #198754;
    --bs-info: #0dcaf0;
    --bs-warning: #ffc107;
    --bs-danger: #dc3545;
    --bs-light: #f8f9fa;
    --bs-dark: #212529;
    --bs-body-font-family: system-ui, -apple-system, sans-serif;
    --bs-body-font-size: 1rem;
    --bs-body-font-weight: 400;
    --bs-body-color: #212529;
    --bs-body-bg: #fff;
    --bs-border-radius: 0.375rem;
    --bs-border-color: #dee2e6;
    --bs-link-color: var(--bs-primary);
    --bs-link-hover-color: #0a58ca;
}

Dark Mode

<!-- Global -->
<html data-bs-theme="dark">
<!-- Per component -->
<div class="card" data-bs-theme="dark">
<!-- Toggle via JS -->
document.querySelector('html').setAttribute('data-bs-theme', 'dark');

RTL

<html lang="ar" dir="rtl">
<!-- Use bootstrap.rtl.min.css instead of bootstrap.min.css -->

CDN Links

<!-- CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">

<!-- RTL CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.rtl.min.css" rel="stylesheet">

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

<!-- Icons -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css">
<i class="bi bi-alarm"></i>
<i class="bi bi-arrow-right"></i>
<a href="#" class="btn btn-primary"><i class="bi bi-download"></i> Download</a>

Bootstrap 5 vs 4 Quick Comparison

Feature	Bootstrap 4	Bootstrap 5
jQuery	Required	Removed
IE10+	Supported	Dropped
CSS Custom Properties	Limited	Full support
Form layout	`.form-group`	Margin utilities
RTL	Not supported	Built-in
Dark mode	Not supported	Built-in (5.3+)
Offcanvas	No	Yes
Floating labels	No	Yes
Spacing utils	`ml-`, `mr-`	`ms-`, `me-` (logical)

Common Mistakes

1. Using Bootstrap 4 classes in Bootstrap 5

ml-*, mr-*, pl-*, pr-*, form-group, data-toggle, data-target are all Bootstrap 4 syntax. In Bootstrap 5, use ms-*, me-*, data-bs-*.

2. Not including the JS bundle for interactive components

Dropdowns, modals, tooltips, and carousels require Bootstrap’s JavaScript. The CSS-only version won’t power any interactive behavior.

3. Forgetting `role="alert"` on alerts for accessibility

Alerts need role="alert" so screen readers announce them. Bootstrap’s documentation includes it but beginners often omit it.

4. Using `btn` without a contextual class

A bare class="btn" has no styling. Every button needs btn-primary, btn-secondary, etc.

5. Not adding `tabindex="-1"` to modals and offcanvas

Without tabindex="-1", focus management breaks and keyboard navigation doesn’t work correctly inside the component.

FAQ

How do I update from Bootstrap 4 to Bootstrap 5?

Replace data- attributes with data-bs-, update spacing classes (ml→ms, mr→me), remove jQuery dependency, and replace form-group with margin utilities.

What is the difference between Bootstrap 5’s grid and CSS Grid?

Bootstrap’s flexbox grid is one-dimensional (row OR column). CSS Grid is two-dimensional (rows AND columns). Both are supported in Bootstrap 5.

Can I use Bootstrap Icons without the full Bootstrap framework?

Yes. Bootstrap Icons is a separate library. Add only the icon CSS CDN link — no need for the full Bootstrap CSS.

Does Bootstrap 5 support IE11?

No. Bootstrap 5 dropped Internet Explorer support. It requires modern browsers that support CSS custom properties.

How do I override a Bootstrap style?

Use CSS specificity (add a class or ID), use !important (last resort), or override CSS variables. For Sass users, override variables before importing.

What’s the best way to learn Bootstrap?

Build real projects. Start with the grid system, then add components one at a time. Use this reference as a lookup tool while coding.

What’s Next

Topic	Description
Review Bootstrap Basics	Go back if you need a refresher
JavaScript Events	Understanding event-driven programming
CSS Flexbox	Deep dive into the flexbox layout model
CSS Grid	Two-dimensional CSS grid layout

What’s Next

Congratulations on completing this Bootstrap Reference tutorial! Here’s where to go from here:

Practice daily — Consistency is more important than long study sessions
Build a project — Apply what you learned by building something real
Explore related topics — Check out other tutorials in the same category
Join the community — Discuss with other learners and share your progress

Remember: every expert was once a beginner. Keep coding!

Previous Bootstrap Advanced — Dark Mode, Customization & JavaScript API Explained

Built by the developers of DodaTech

Doda Browser, DodaZIP & Durga Antivirus Pro

Home Browse Bootstrap

Bootstrap 5 Reference & Cheatsheet

Learning Path

Grid System

Breakpoints

Grid Utilities

Display

Flexbox

Spacing

Sizing

Typography

Colors

Borders

Shadows

Position

Overflow & Visibility

Interactions

Components Quick Reference

Alert

Badge

Button

Button Group

Card

Carousel

Collapse / Accordion

Dropdown

List Group

Modal

Navbar

Navs & Tabs

Offcanvas

Pagination

Popover

Progress

Spinners

Toast

Tooltip

Table

Forms Quick Reference

Form Validation

JavaScript Plugin API

Plugin Options

Events

CSS Variables

Dark Mode

RTL

CDN Links

Bootstrap 5 vs 4 Quick Comparison

Common Mistakes

1. Using Bootstrap 4 classes in Bootstrap 5

2. Not including the JS bundle for interactive components

3. Forgetting role="alert" on alerts for accessibility

4. Using btn without a contextual class

5. Not adding tabindex="-1" to modals and offcanvas

FAQ

What’s Next

What’s Next

3. Forgetting `role="alert"` on alerts for accessibility

4. Using `btn` without a contextual class

5. Not adding `tabindex="-1"` to modals and offcanvas