Complete Bootstrap 5 Components Cheatsheet: Ready-to-Use UI Elements Reference

Cheatsheets

Introduction: Bootstrap Components Overview

Bootstrap components are pre-built UI elements that provide consistent, responsive functionality with minimal coding. These components:

  • Accelerate development with ready-to-use interface elements
  • Maintain cross-browser and device compatibility
  • Follow accessibility best practices
  • Can be customized to match your design requirements
  • Work seamlessly with Bootstrap’s grid system and utilities

Buttons

Basic Buttons

 
html
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>
<button type="button" class="btn btn-link">Link</button>

Button Variants

VariantClassesDescription
Outlinebtn-outline-*Buttons with colored borders but transparent background
Sizesbtn-lg, btn-smLarge and small button sizes
Statesactive, disabledActive and disabled button states
Blockd-grid gap-2, d-md-blockFull-width block buttons (Bootstrap 5 approach)
Toggledata-bs-toggle="button"Toggle button (pressed/unpressed states)

Button Groups

 
html
<div class="btn-group" role="group" aria-label="Basic example">
  <button type="button" class="btn btn-primary">Left</button>
  <button type="button" class="btn btn-primary">Middle</button>
  <button type="button" class="btn btn-primary">Right</button>
</div>

Button Group Variants

  • btn-group-lg, btn-group-sm – Size variants
  • btn-group-vertical – Vertical button group
  • btn-toolbar – Combine multiple button groups

Alerts

Basic Alerts

 
html
<div class="alert alert-primary" role="alert">
  A simple primary alert—check it out!
</div>

Available Alert Styles

  • alert-primary, alert-secondary, alert-success
  • alert-danger, alert-warning, alert-info
  • alert-light, alert-dark

Alert Components

  • Link Styling: <a href="#" class="alert-link">an example link</a>
  • Additional Content:
     
    html
    <div class="alert alert-success" role="alert">
  <h4 class="alert-heading">Well done!</h4>
  <p>Message text here</p>
  <hr>
  <p class="mb-0">Additional information</p>
</div>
  • Dismissible Alerts:
     
    html
    <div class="alert alert-warning alert-dismissible fade show" role="alert">
  This is dismissible
  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>

Badges

 
html
<h1>Example heading <span class="badge bg-secondary">New</span></h1>
<button type="button" class="btn btn-primary">
  Notifications <span class="badge bg-secondary">4</span>
</button>

Badge Variants

  • Background colors: bg-primary, bg-secondary, etc.
  • Pill badges: rounded-pill
  • Positioned badges: position-absolute top-0 start-100 translate-middle

Cards

Basic Card

 
html
<div class="card" style="width: 18rem;">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

Card Structure Components

ComponentClassPurpose
Headercard-headerTop section of card
Bodycard-bodyMain content area
Footercard-footerBottom section of card
Titlecard-titleCard heading
Subtitlecard-subtitleSecondary heading
Textcard-textText content
Linkcard-linkHyperlink styling
Image capscard-img-top, card-img-bottomImages at top/bottom
Image overlaycard-img-overlayText overlaid on image

Card Layout Options

  • Card Groups: <div class="card-group">...</div> – Edge-to-edge cards with equal heights
  • Card Deck (Grid in Bootstrap 5):
     
    html
    <div class="row row-cols-1 row-cols-md-3 g-4">
  <div class="col"><div class="card">...</div></div>
  <!-- More cards -->
</div>
  • Horizontal Card:
     
    html
    <div class="card mb-3" style="max-width: 540px;">
  <div class="row g-0">
    <div class="col-md-4">
      <img src="..." class="img-fluid rounded-start" alt="...">
    </div>
    <div class="col-md-8">
      <div class="card-body">...</div>
    </div>
  </div>
</div>

Carousels

Basic Carousel

 
html
<div id="carouselExample" class="carousel slide">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExample" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExample" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

Carousel Options

  • With Indicators:
     
    html
    <div class="carousel-indicators">
  <button type="button" data-bs-target="#carouselExample" data-bs-slide-to="0" class="active"></button>
  <button type="button" data-bs-target="#carouselExample" data-bs-slide-to="1"></button>
  <button type="button" data-bs-target="#carouselExample" data-bs-slide-to="2"></button>
</div>
  • With Captions:
     
    html
    <div class="carousel-item">
  <img src="..." class="d-block w-100" alt="...">
  <div class="carousel-caption d-none d-md-block">
    <h5>Slide label</h5>
    <p>Caption text here.</p>
  </div>
</div>
  • Crossfade Effect: Add carousel-fade class
  • Auto Play: Add data-bs-ride="carousel" attribute
  • Custom Interval: Add data-bs-interval="2000" attribute (milliseconds)

Collapse

 
html
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample">
  Toggle collapse
</button>

<div class="collapse" id="collapseExample">
  <div class="card card-body">
    Collapsible content here
  </div>
</div>

Collapse Options

  • Link trigger: <a href="#collapseExample" data-bs-toggle="collapse">Toggle</a>
  • Show by default: Add show class to the collapse element
  • Multiple targets: Use same data-bs-target on multiple triggers
  • Accordion structure: Combine with card components

Dropdowns

Basic Dropdown

 
html
<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown button
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
  </ul>
</div>

Dropdown Components and Variants

  • Menu Items: dropdown-item, dropdown-item-text, active, disabled
  • Dividers: <li><hr class="dropdown-divider"></li>
  • Headers: <h6 class="dropdown-header">Category</h6>
  • Directions: dropup, dropend, dropstart
  • Menu Alignment: dropdown-menu-end, dropdown-menu-*-end
  • Menu Size: dropdown-menu-{sm|md|lg|xl}-{start|end}
  • Dark Dropdowns: dropdown-menu-dark

Forms

Basic Form Controls

 
html
<div class="mb-3">
  <label for="exampleInput" class="form-label">Example input</label>
  <input type="text" class="form-control" id="exampleInput">
  <div class="form-text">Help text here.</div>
</div>

Form Control Types

ControlBasic ClassesDescription
Text inputsform-controlStandard text input
Selectform-selectDropdown select
Checks & radiosform-check, form-check-input, form-check-labelCheckboxes and radio buttons
Rangeform-rangeRange slider
File inputform-controlFile upload field
Colorform-control form-control-colorColor picker
Textareaform-controlMulti-line text input

Form Layout Options

  • Sizing: form-control-lg, form-control-sm
  • Disabled State: Add disabled attribute
  • Readonly State: Add readonly attribute
  • Plaintext: form-control-plaintext
  • Form Groups: mb-3 for spacing
  • Horizontal Forms: Use grid classes
     
    html
    <div class="row mb-3">
  <label for="inputEmail3" class="col-sm-2 col-form-label">Email</label>
  <div class="col-sm-10">
    <input type="email" class="form-control" id="inputEmail3">
  </div>
</div>
  • Inline Forms: Use flex utilities d-flex align-items-center
  • Floating Labels:
     
    html
    <div class="form-floating mb-3">
  <input type="email" class="form-control" id="floatingInput" placeholder="name@example.com">
  <label for="floatingInput">Email address</label>
</div>

Input Groups

 
html
<div class="input-group mb-3">
  <span class="input-group-text" id="basic-addon1">@</span>
  <input type="text" class="form-control" placeholder="Username">
</div>

Input Group Variants

  • With buttons: <button class="btn btn-outline-secondary" type="button">Button</button>
  • With dropdowns: Nest dropdown structure inside input-group
  • Multiple inputs: Place multiple inputs inside one group
  • Sizing: input-group-sm, input-group-lg

Modals

Basic Modal

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

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        Modal content here
      </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 changes</button>
      </div>
    </div>
  </div>
</div>

Modal Options

  • Sizes: modal-dialog-centered, modal-dialog-scrollable, modal-sm, modal-lg, modal-xl, modal-fullscreen
  • Scrolling Content: modal-dialog-scrollable
  • Vertically Centered: modal-dialog-centered
  • Static Backdrop: data-bs-backdrop="static"
  • Without Animation: Remove fade class
  • Fullscreen Variants: modal-fullscreen-{sm|md|lg|xl}-down

Navs and Tabs

Basic Nav

 
html
<ul class="nav">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled">Disabled</a>
  </li>
</ul>

Nav Styles and Variants

  • Horizontal Alignment: justify-content-center, justify-content-end
  • Vertical Nav: flex-column
  • Tabs: nav-tabs
  • Pills: nav-pills
  • Fill Width: nav-fill
  • Equal Width: nav-justified
  • With Dropdowns: Nest dropdown structure inside nav-item

Tab Panels

 
html
<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item" role="presentation">
    <button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab">Home</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile" type="button" role="tab">Profile</button>
  </li>
</ul>
<div class="tab-content" id="myTabContent">
  <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">Home content</div>
  <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">Profile content</div>
</div>

Navbar

Basic Navbar

 
html
<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</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">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Features</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

Navbar Components and Options

  • Color Schemes: navbar-light, navbar-dark with background utility (e.g., bg-dark)
  • Container Options: container, container-fluid
  • Placement: fixed-top, fixed-bottom, sticky-top
  • Responsive Behavior: navbar-expand-{sm|md|lg|xl}
  • Nav Alignment: ms-auto (for right alignment)
  • With Form:
     
    html
    <form class="d-flex">
  <input class="form-control me-2" type="search" placeholder="Search">
  <button class="btn btn-outline-success" type="submit">Search</button>
</form>
  • Text/Non-nav content: navbar-text
  • Offcanvas Navbar: Combine with offcanvas component

Pagination

 
html
<nav aria-label="Page navigation example">
  <ul class="pagination">
    <li class="page-item"><a class="page-link" href="#">Previous</a></li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item active"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item"><a class="page-link" href="#">Next</a></li>
  </ul>
</nav>

Pagination Options

  • Sizing: pagination-lg, pagination-sm
  • Alignment: justify-content-center, justify-content-end
  • States: disabled, active
  • With Icons: Add icons inside page-link

Progress Bars

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

Progress Bar Options

  • Colors: bg-success, bg-info, etc.
  • Striped: progress-bar-striped
  • Animated: progress-bar-striped progress-bar-animated
  • Multiple Bars: Place multiple progress-bar divs in one progress container
  • Height: Set via inline style or utility classes

Spinners

 
html
<!-- Border spinner -->
<div class="spinner-border" role="status">
  <span class="visually-hidden">Loading...</span>
</div>

<!-- Growing spinner -->
<div class="spinner-grow" role="status">
  <span class="visually-hidden">Loading...</span>
</div>

Spinner Options

  • Colors: text-primary, text-secondary, etc.
  • Sizes: spinner-border-sm, spinner-grow-sm
  • Alignment: Flex utilities for centering
  • Buttons: Place inside buttons

Toasts

 
html
<div class="toast-container position-fixed bottom-0 end-0 p-3">
  <div id="liveToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
      <img src="..." class="rounded me-2" alt="...">
      <strong class="me-auto">Bootstrap</strong>
      <small>11 mins ago</small>
      <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
    </div>
    <div class="toast-body">
      Hello, world! This is a toast message.
    </div>
  </div>
</div>

Toast JavaScript Initialization

 
javascript
const toastTrigger = document.getElementById('liveToastBtn')
const toastLiveExample = document.getElementById('liveToast')
if (toastTrigger) {
  toastTrigger.addEventListener('click', () => {
    const toast = new bootstrap.Toast(toastLiveExample)
    toast.show()
  })
}

Toast Options

  • Placement: Use positioning utilities
  • Stacking: Place multiple toasts in toast-container
  • Color Variants: Add background utilities (e.g., bg-primary text-white)

Offcanvas

 
html
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample">
  Toggle offcanvas
</button>

<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasExample" aria-labelledby="offcanvasExampleLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasExampleLabel">Offcanvas</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    Content for the offcanvas goes here.
  </div>
</div>

Offcanvas Options

  • Placement: offcanvas-start, offcanvas-end, offcanvas-top, offcanvas-bottom
  • Backdrop: data-bs-backdrop="false"
  • Scrolling: data-bs-scroll="true"

List Groups

 
html
<ul class="list-group">
  <li class="list-group-item">Basic item</li>
  <li class="list-group-item active">Active item</li>
  <li class="list-group-item disabled">Disabled item</li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    With badge
    <span class="badge bg-primary rounded-pill">14</span>
  </li>
</ul>

List Group Variants

  • Without borders: list-group-flush
  • Horizontal: list-group-horizontal-{sm|md|lg|xl}
  • Actionable items: Add list-group-item-action with anchor or button tags
  • Contextual classes: list-group-item-primary, list-group-item-success, etc.
  • With custom content: Add any HTML inside list items

Tooltips and Popovers

Tooltips

 
html
<button type="button" class="btn btn-secondary" 
  data-bs-toggle="tooltip" data-bs-placement="top" 
  data-bs-title="Tooltip on top">
  Tooltip on top
</button>

JavaScript Initialization (Required)

 
javascript
const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))

Tooltip Options

  • Placement: data-bs-placement="top|right|bottom|left"
  • HTML Content: data-bs-html="true"
  • Custom Classes: data-bs-custom-class="custom-tooltip"

Popovers

 
html
<button type="button" class="btn btn-lg btn-danger" 
  data-bs-toggle="popover" 
  data-bs-title="Popover title" 
  data-bs-content="And here's some amazing content.">
  Click to toggle popover
</button>

JavaScript Initialization (Required)

 
javascript
const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]')
const popoverList = [...popoverTriggerList].map(popoverTriggerEl => new bootstrap.Popover(popoverTriggerEl))

Popover Options

  • Placement: data-bs-placement="top|right|bottom|left"
  • Trigger: data-bs-trigger="click|hover|focus"
  • HTML Content: data-bs-html="true"
  • Dismiss on next click: data-bs-trigger="focus"

Common Challenges and Solutions

Responsive Navigation Patterns

  1. Collapsible Sidebar:
 
html
<div class="d-flex">
  <div class="collapse collapse-horizontal" id="sidebar">
    <div class="bg-light border-end p-4" style="width: 280px;">
      Sidebar content
    </div>
  </div>
  <main class="flex-grow-1">
    Main content
  </main>
</div>
  1. Responsive Navbar to Offcanvas:
 
html
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <!-- Regular navbar for larger screens -->
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Brand</a>
    <button class="navbar-toggler" type="button" 
            data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavbar">
      <span class="navbar-toggler-icon"></span>
    </button>
    
    <!-- Offcanvas for mobile -->
    <div class="offcanvas offcanvas-end text-bg-dark" id="offcanvasNavbar">
      <div class="offcanvas-header">
        <h5 class="offcanvas-title">Menu</h5>
        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas"></button>
      </div>
      <div class="offcanvas-body">
        <ul class="navbar-nav">
          <li class="nav-item"><a class="nav-link active" href="#">Home</a></li>
          <li class="nav-item"><a class="nav-link" href="#">Features</a></li>
        </ul>
      </div>
    </div>
  </div>
</nav>

Modal Form Validation

 
html
<form class="needs-validation" novalidate>
  <div class="modal-body">
    <div class="mb-3">
      <label for="email" class="form-label">Email</label>
      <input type="email" class="form-control" id="email" required>
      <div class="invalid-feedback">
        Please provide a valid email.
      </div>
    </div>
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
    <button type="submit" class="btn btn-primary">Save</button>
  </div>
</form>

<script>
  // Example starter JavaScript for form validation
  (() => {
    'use strict'
    const forms = document.querySelectorAll('.needs-validation')
    Array.from(forms).forEach(form => {
      form.addEventListener('submit', event => {
        if (!form.checkValidity()) {
          event.preventDefault()
          event.stopPropagation()
        }
        form.classList.add('was-validated')
      }, false)
    })
  })()
</script>

Best Practices and Tips

  1. Accessibility Considerations
    • Use proper ARIA attributes (aria-label, aria-labelledby, etc.)
    • Maintain keyboard navigation for interactive components
    • Test with screen readers
    • Use sr-only or visually-hidden for screen reader text
  2. Customization Approaches
    • Use Sass variables before writing custom CSS
    • Create component variants with custom CSS classes
    • Combine Bootstrap utilities with components
    • Consider using CSS custom properties for theming
  3. Performance Optimization
    • Import only the components you need using Sass
    • Lazy-load offscreen components
    • Use the separate JavaScript files for each component
    • Consider using the minified production versions
  4. Component Integration Tips
    • Combine multiple components for complex UI patterns
    • Use nesting properly (e.g., placing forms in cards)
    • Maintain consistent spacing with utilities
    • Follow the Bootstrap component documentation for proper markup
  5. Mobile-First Approach
    • Start with mobile layouts and enhance for larger screens
    • Use responsive breakpoints consistently
    • Test on real devices or device emulators
    • Consider touch interactions for mobile users

Resources for Further Learning

  1. Official Documentation
  2. Interactive Learning
  3. Bootstrap Extensions
  4. Community Support

Remember that Bootstrap components are designed to work together seamlessly. Combine them creatively to build complex interfaces while maintaining consistency, accessibility, and responsive behavior.

Related Posts

Subscribe
Subscribe
Scroll to Top