BootstrapBEGINNER

Bootstrap 5

Bootstrap 5 cheat sheet covering grid system, utility classes, components, JavaScript plugins, and responsive design with code examples.

15 min read

bootstrapcssframeworkresponsivecomponentsutilitiesgrid

Getting Started

Installation and setup for Bootstrap 5

Installation Methods

Different ways to include Bootstrap in your project

html

<!-- CDN (Quick Start) -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

<!-- NPM Installation -->
npm install bootstrap

// Import in JavaScript
import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap/dist/js/bootstrap.bundle.min.js'

💡 Use bundle.min.js to include Popper.js for dropdowns and tooltips

⚡ CDN is fastest for prototyping, NPM for production apps

📌 Always include viewport meta tag for responsive design

🔥 Import only needed SCSS modules to reduce bundle size

Basic HTML Template

Starter template with Bootstrap 5

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap 5 Template</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container">
    <h1>Hello, Bootstrap!</h1>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

💡 Use data-bs-theme="dark" on html tag for dark mode

⚡ Container class provides responsive fixed-width container

📌 Always include viewport meta tag for mobile responsiveness

🔥 Place scripts at end of body for better performance

Layout & Grid

Bootstrap grid system and layout utilities

Grid System

12-column responsive grid layout

html

<!-- Basic Grid -->
<div class="container">
  <div class="row">
    <div class="col-md-4">Column 1</div>
    <div class="col-md-4">Column 2</div>
    <div class="col-md-4">Column 3</div>
  </div>
</div>

<!-- Responsive Columns -->
<div class="row">
  <div class="col-12 col-md-6 col-lg-4">Responsive</div>
  <div class="col-12 col-md-6 col-lg-4">Columns</div>
  <div class="col-12 col-md-12 col-lg-4">Example</div>
</div>

💡 Bootstrap uses a 12-column grid system

⚡ Use container for fixed-width, container-fluid for full-width

📌 Columns automatically wrap to new line when exceeding 12

🔥 Responsive classes stack vertically on smaller screens

Flexbox Utilities

Flexbox layout utilities

html

<!-- Display Flex -->
<div class="d-flex">Flexbox container</div>
<div class="d-inline-flex">Inline flexbox</div>

<!-- Direction -->
<div class="d-flex flex-row">Horizontal (default)</div>
<div class="d-flex flex-column">Vertical</div>
<div class="d-flex flex-row-reverse">Horizontal reversed</div>
<div class="d-flex flex-column-reverse">Vertical reversed</div>

<!-- Justify Content -->
<div class="d-flex justify-content-start">Left</div>
<div class="d-flex justify-content-center">Center</div>
<div class="d-flex justify-content-end">Right</div>
<div class="d-flex justify-content-between">Space between</div>
<div class="d-flex justify-content-around">Space around</div>
<div class="d-flex justify-content-evenly">Space evenly</div>

💡 Flexbox utilities work with d-flex or d-inline-flex

⚡ All flexbox utilities have responsive variants

📌 Use gap utilities for consistent spacing

🔥 Combine with margin utilities for fine control

Typography

Text utilities and typography classes

Headings & Display

Typography heading styles

html

<!-- Headings -->
<h1>h1. Bootstrap heading</h1>
<h2>h2. Bootstrap heading</h2>
<h3>h3. Bootstrap heading</h3>
<h4>h4. Bootstrap heading</h4>
<h5>h5. Bootstrap heading</h5>
<h6>h6. Bootstrap heading</h6>

<!-- Heading Classes -->
<p class="h1">h1 styling on paragraph</p>
<p class="h2">h2 styling on paragraph</p>

<!-- Display Headings -->
<h1 class="display-1">Display 1</h1>
<h1 class="display-2">Display 2</h1>
<h1 class="display-3">Display 3</h1>
<h1 class="display-4">Display 4</h1>
<h1 class="display-5">Display 5</h1>
<h1 class="display-6">Display 6</h1>

💡 Display headings are larger and more impactful than regular headings

⚡ Use heading classes to apply heading styles without changing semantics

📌 Lead class makes paragraph text stand out

🔥 Blockquotes with figure/figcaption for semantic HTML5

Text Utilities

Text alignment, transformation, and styling

html

<!-- Text Alignment -->
<p class="text-start">Start aligned text</p>
<p class="text-center">Center aligned text</p>
<p class="text-end">End aligned text</p>

<!-- Text Transform -->
<p class="text-lowercase">LOWERCASED TEXT</p>
<p class="text-uppercase">uppercased text</p>
<p class="text-capitalize">capitalized text</p>

<!-- Font Weight & Style -->
<p class="fw-bold">Bold text</p>
<p class="fw-normal">Normal weight</p>
<p class="fw-light">Light weight</p>
<p class="fst-italic">Italic text</p>
<p class="fst-normal">Normal style</p>

💡 All text utilities have responsive variants (text-sm-start, etc.)

⚡ Use fs-* classes for font sizes instead of custom CSS

📌 fw-* classes provide consistent font weights

🔥 Text color classes automatically adjust for dark mode

Colors & Backgrounds

Color system and background utilities

Color System

Bootstrap color palette and utilities

html

<!-- Text Colors -->
<p class="text-primary">Primary</p>
<p class="text-secondary">Secondary</p>
<p class="text-success">Success</p>
<p class="text-danger">Danger</p>
<p class="text-warning">Warning</p>
<p class="text-info">Info</p>

<!-- Background Colors -->
<div class="bg-primary text-white">Primary background</div>
<div class="bg-secondary text-white">Secondary</div>
<div class="bg-success text-white">Success</div>
<div class="bg-danger text-white">Danger</div>
<div class="bg-warning">Warning</div>
<div class="bg-info">Info</div>

💡 Use -subtle variants for softer background colors

⚡ Combine bg-gradient with bg-* for gradient backgrounds

📌 -emphasis variants provide stronger color contrast

🔥 Opacity utilities work with both text and backgrounds

Spacing

Margin and padding utilities

Spacing Utilities

Margin and padding classes

html

<!-- Padding -->
<div class="p-0">No padding</div>
<div class="p-1">Padding 1 (0.25rem)</div>
<div class="p-2">Padding 2 (0.5rem)</div>
<div class="p-3">Padding 3 (1rem)</div>
<div class="p-4">Padding 4 (1.5rem)</div>
<div class="p-5">Padding 5 (3rem)</div>

<!-- Margin -->
<div class="m-0">No margin</div>
<div class="m-1">Margin 1</div>
<div class="m-2">Margin 2</div>
<div class="m-auto">Auto margin</div>

💡 Use mx-auto to center block elements horizontally

⚡ Gap utilities are better than margins for flex/grid layouts

📌 Negative margins (n1, n2, etc.) pull elements closer

🔥 All spacing utilities have responsive variants

Components

Core Bootstrap components

Buttons

Button styles and variations

html

<!-- Button Styles -->
<button class="btn btn-primary">Primary</button>
<button class="btn btn-secondary">Secondary</button>
<button class="btn btn-success">Success</button>
<button class="btn btn-danger">Danger</button>
<button class="btn btn-warning">Warning</button>
<button class="btn btn-info">Info</button>

<!-- Button Sizes -->
<button class="btn btn-primary btn-lg">Large</button>
<button class="btn btn-primary">Default</button>
<button class="btn btn-primary btn-sm">Small</button>

💡 Use btn-outline-* for ghost/outline button styles

⚡ d-grid with gap-2 creates full-width block buttons

📌 Button groups combine multiple buttons into single component

🔥 Add disabled attribute or class for disabled state

Cards

Card component for content containers

html

<!-- Basic Card -->
<div class="card">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Card content</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

<!-- Card with Header/Footer -->
<div class="card">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Title</h5>
    <p class="card-text">Content</p>
  </div>
  <div class="card-footer">Footer</div>
</div>

💡 Use h-100 class to make cards equal height in grid

⚡ Card groups make cards equal height automatically

📌 text-bg-* combines text and background colors

🔥 Use card-img-overlay for text over images

Forms

Form controls and layouts

html

<!-- Basic Form -->
<form>
  <div class="mb-3">
    <label for="email" class="form-label">Email</label>
    <input type="email" class="form-control" id="email">
  </div>
  <div class="mb-3">
    <label for="password" class="form-label">Password</label>
    <input type="password" class="form-control" id="password">
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

<!-- Form Grid -->
<form class="row g-3">
  <div class="col-md-6">
    <label class="form-label">First Name</label>
    <input type="text" class="form-control">
  </div>
  <div class="col-md-6">
    <label class="form-label">Last Name</label>
    <input type="text" class="form-control">
  </div>
</form>

💡 Use form-floating for modern floating label inputs

⚡ Input groups combine inputs with text/buttons

📌 Add needs-validation class and novalidate for custom validation

🔥 Form-check-inline for horizontal checkboxes/radios

Navigation

Navigation components

html

<!-- Basic Navbar -->
<nav class="navbar navbar-expand-lg navbar-light 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="#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>
        <li class="nav-item">
          <a class="nav-link" href="#">About</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

💡 Use navbar-expand-* to control when navbar collapses

⚡ ms-auto pushes nav items to the right

📌 Offcanvas provides mobile-friendly slide-out navigation

🔥 Fixed-top requires padding-top on body element

Utilities

Utility classes for common patterns

Display & Position

Display and position utilities

html

<!-- Display -->
<div class="d-none">Hidden</div>
<div class="d-block">Block</div>
<div class="d-inline">Inline</div>
<div class="d-inline-block">Inline block</div>
<div class="d-flex">Flex</div>
<div class="d-grid">Grid</div>

<!-- Position -->
<div class="position-static">Static</div>
<div class="position-relative">Relative</div>
<div class="position-absolute">Absolute</div>
<div class="position-fixed">Fixed</div>
<div class="position-sticky">Sticky</div>

💡 Use translate-middle with position utilities to center

⚡ d-none d-md-block pattern for responsive visibility

📌 z-* utilities only work with positioned elements

🔥 overflow-auto adds scrollbars only when needed

Borders & Shadows

Border and shadow utilities

html

<!-- Borders -->
<div class="border">All borders</div>
<div class="border-top">Top border</div>
<div class="border-end">End border</div>
<div class="border-bottom">Bottom border</div>
<div class="border-start">Start border</div>

<!-- Border Colors -->
<div class="border border-primary">Primary</div>
<div class="border border-danger">Danger</div>

<!-- Border Width -->
<div class="border border-1">1px</div>
<div class="border border-2">2px</div>
<div class="border border-3">3px</div>

<!-- Rounded Corners -->
<div class="rounded">Rounded</div>
<div class="rounded-circle">Circle</div>
<div class="rounded-pill">Pill</div>
<div class="rounded-0">No rounding</div>

💡 rounded-circle requires equal width/height for perfect circle

⚡ Combine border utilities for custom styles

📌 shadow-* utilities add depth to elements

🔥 border-0 removes default borders from elements

JavaScript Components

Interactive Bootstrap components

Modal

Modal dialogs

html

<!-- Modal Trigger Button -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
  Launch modal
</button>

<!-- Modal Structure -->
<div class="modal fade" id="exampleModal" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Modal title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body">
        Modal body text
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save</button>
      </div>
    </div>
  </div>
</div>

💡 Use data-bs-backdrop="static" to prevent closing on outside click

⚡ modal-dialog-centered for vertical centering

📌 Multiple modals shouldn't be opened simultaneously

🔥 Use modal events to trigger actions on show/hide

Tooltips & Popovers

Tooltips and popover components

html

<!-- Tooltip -->
<button type="button" class="btn btn-secondary"
        data-bs-toggle="tooltip"
        data-bs-placement="top"
        title="Tooltip text">
  Hover for tooltip
</button>

<!-- Popover -->
<button type="button" class="btn btn-danger"
        data-bs-toggle="popover"
        title="Popover title"
        data-bs-content="Popover content">
  Click for popover
</button>

<!-- Initialize in JavaScript -->
<script>
// Enable all tooltips
const tooltips = document.querySelectorAll('[data-bs-toggle="tooltip"]')
tooltips.forEach(el => new bootstrap.Tooltip(el))

// Enable all popovers
const popovers = document.querySelectorAll('[data-bs-toggle="popover"]')
popovers.forEach(el => new bootstrap.Popover(el))
</script>

💡 Tooltips and popovers must be manually initialized via JavaScript

⚡ Use data-bs-trigger="focus" for dismiss on outside click

📌 Set data-bs-html="true" to use HTML in content

🔥 Popovers require tooltip plugin to be included

Alerts & Toasts

Alert messages and toast notifications

html

<!-- Basic Alert -->
<div class="alert alert-primary" role="alert">
  A simple primary alert
</div>

<!-- Dismissible Alert -->
<div class="alert alert-warning alert-dismissible fade show" role="alert">
  <strong>Warning!</strong> This alert is dismissible.
  <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
</div>

<!-- Toast -->
<div class="toast" role="alert">
  <div class="toast-header">
    <strong class="me-auto">Bootstrap</strong>
    <button type="button" class="btn-close" data-bs-dismiss="toast"></button>
  </div>
  <div class="toast-body">
    Toast message content
  </div>
</div>

💡 Toasts are opt-in, must be initialized with JavaScript

⚡ Use toast-container for proper positioning and stacking

📌 alert-dismissible adds close functionality to alerts

🔥 Toasts autohide by default after 5 seconds

Responsive Utilities

Responsive design utilities

Breakpoints

Responsive breakpoint system

html

<!-- Breakpoint Classes -->
<!--
  xs: <576px (default, no suffix)
  sm: ≥576px
  md: ≥768px
  lg: ≥992px
  xl: ≥1200px
  xxl: ≥1400px
-->

<!-- Responsive Columns -->
<div class="col-12 col-sm-6 col-md-4 col-lg-3">
  Responsive column
</div>

<!-- Responsive Display -->
<div class="d-none d-md-block">
  Hidden on mobile, visible on desktop
</div>

💡 Mobile-first approach: styles apply to xs and up by default

⚡ Use responsive utility variants for all screen sizes

📌 Combine multiple responsive classes for complex layouts

🔥 Test on actual devices, not just browser resize

Helpers & Misc

Helper classes and miscellaneous utilities

Helper Classes

Utility helper classes

html

<!-- Ratios -->
<div class="ratio ratio-1x1">1:1</div>
<div class="ratio ratio-4x3">4:3</div>
<div class="ratio ratio-16x9">16:9</div>
<div class="ratio ratio-21x9">21:9</div>

<!-- Stretched Link -->
<div class="card">
  <div class="card-body">
    <h5 class="card-title">
      <a href="#" class="stretched-link">Card link</a>
    </h5>
    <p class="card-text">Entire card is clickable</p>
  </div>
</div>

<!-- Text Truncation -->
<div class="text-truncate" style="width: 150px;">
  This text will truncate with ellipsis
</div>

💡 Stretched-link makes entire container clickable

⚡ Ratio classes maintain aspect ratios for embeds

📌 visually-hidden hides visually but not from screen readers

🔥 Placeholder classes create loading skeleton screens

Bootstrap 5

Table of Contents

Getting Started

Installation Methods

Basic HTML Template

Layout & Grid

Grid System

Flexbox Utilities

Typography

Headings & Display

Text Utilities

Colors & Backgrounds

Color System

Spacing

Spacing Utilities

Components

Buttons

Cards

Forms

Navigation

Utilities

Display & Position

Borders & Shadows

JavaScript Components

Modal

Tooltips & Popovers

Alerts & Toasts

Responsive Utilities

Breakpoints

Helpers & Misc

Helper Classes