This cheat sheet provides a comprehensive overview of the Bootstrap v5 CSS framework, including its layout system, typography, colors, components, utilities, JavaScript plugins, customization options, accessibility considerations, responsive utilities, and RTL support.

It also demonstrates with some code usage examples how to use various features in your HTML and CSS code.

• Container: .container, .container-fluid, .container-{breakpoint}
• Grid system: .row, .col, .col-{breakpoint}-{size}
• Responsive breakpoints: sm, md, lg, xl, xxl

Demo:

<div class="container">
  <div class="row">
    <div class="col-md-6">Column 1div>
    <div class="col-md-6">Column 2div>
  div>
div>

• Headings: 

   to 

  , .h1 to .h6

• Display headings: .display-1 to .display-6
• Lead paragraph: .lead
• Inline text elements: .mark, .small, .text-muted, .text-decoration-none
• Text alignment: .text-start, .text-center, .text-end
• Text wrapping: .text-wrap, .text-nowrap
• Text transform: .text-lowercase, .text-uppercase, .text-capitalize
• Font weight and italics: .fw-bold, .fw-normal, .fst-italic, .fst-normal

Demo:

<h1>Heading 1h1>
<h1 class="display-1">Display Headingh1>
<p class="lead">Lead paragraphp>
<p class="text-muted">Muted textp>

• Text colors: .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 colors: .bg-primary, .bg-secondary, .bg-success, .bg-danger, .bg-warning, .bg-info, .bg-light, .bg-dark, .bg-body, .bg-white, .bg-transparent

Demo:

<p class="text-primary">Primary textp>
<div class="bg-success text-white">Success backgrounddiv>

• Responsive images: .img-fluid
• Image thumbnails: .img-thumbnail
• Aligning images: .float-start, .float-end, .mx-auto, .d-block

Demo:

<img src="example.jpg" class="img-fluid" alt="Responsive image">
<img src="thumbnail.jpg" class="img-thumbnail" alt="Thumbnail">

• Basic table: .table
• Table variants: .table-{variant} (e.g., .table-striped, .table-bordered, .table-hover, .table-sm)
• Responsive tables: .table-responsive, .table-responsive-{breakpoint}

Demo:

<table class="table table-striped">
  <thead>
    <tr>
      <th scope="col">#th>
      <th scope="col">Firstth>
      <th scope="col">Lastth>
    tr>
  thead>
  <tbody>
    <tr>
      <th scope="row">1th>
      <td>Marktd>
      <td>Ottotd>
    tr>
  tbody>
table>

• Form control: .form-control, .form-control-{size} (e.g., .form-control-lg, .form-control-sm)
• Select: .form-select, .form-select-{size}
• Checkbox and radio: .form-check, .form-check-input, .form-check-label
• Range input: .form-range
• Input group: .input-group, .input-group-text
• Floating labels: .form-floating
• Validation: .is-valid, .is-invalid, .valid-feedback, .invalid-feedback

Demo:

<form>
  <div class="mb-3">
    <label for="exampleInputEmail1" class="form-label">Email addresslabel>
    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
    <div id="emailHelp" class="form-text">We'll never share your email with anyone else.div>
  div>
  <div class="mb-3">
    <label for="exampleInputPassword1" class="form-label">Passwordlabel>
    <input type="password" class="form-control" id="exampleInputPassword1">
  div>
  <button type="submit" class="btn btn-primary">Submitbutton>
form>

• Button styles: .btn, .btn-{variant} (e.g., .btn-primary, .btn-secondary, .btn-success, .btn-danger, .btn-warning, .btn-info, .btn-light, .btn-dark, .btn-link)
• Button sizes: .btn-lg, .btn-sm
• Block buttons: .d-grid
• Button groups: .btn-group, .btn-group-vertical

Demo:

<button class="btn btn-primary">Primarybutton>
<button class="btn btn-secondary btn-lg">Large Secondarybutton>

• Accordion: .accordion, .accordion-item, .accordion-header, .accordion-button, .accordion-collapse, .accordion-body
• Alerts: .alert, .alert-{variant} (e.g., .alert-primary, .alert-secondary, .alert-success, .alert-danger, .alert-warning, .alert-info, .alert-light, .alert-dark)
• Badges: .badge, .badge-{variant}
• Breadcrumb: .breadcrumb, .breadcrumb-item
• Cards: .card, .card-body, .card-title, .card-subtitle, .card-text, .card-link, .card-header, .card-footer, .card-img-top, .card-img-bottom, .card-img-overlay
• Carousel: .carousel, .carousel-item, .carousel-control-prev, .carousel-control-next, .carousel-indicators, .carousel-caption
• Collapse: .collapse, .collapsing
• Dropdowns: .dropdown, .dropdown-toggle, .dropdown-menu, .dropdown-item, .dropdown-divider, .dropdown-header
• List group: .list-group, .list-group-item, .list-group-item-{variant}
• Modal: .modal, .modal-dialog, .modal-content, .modal-header, .modal-title, .modal-body, .modal-footer
• Navs: .nav, .nav-item, .nav-link, .nav-tabs, .nav-pills
• Navbar: .navbar, .navbar-brand, .navbar-nav, .navbar-toggler, .navbar-collapse, .navbar-{color} (e.g., .navbar-light, .navbar-dark)
• Offcanvas: .offcanvas, .offcanvas-start, .offcanvas-end, .offcanvas-top, .offcanvas-bottom
• Pagination: .pagination, .page-item, .page-link
• Popovers: data-bs-toggle="popover", data-bs-content, data-bs-placement
• Progress: .progress, .progress-bar, .progress-bar-striped, .progress-bar-animated
• Spinners: .spinner-border, .spinner-grow, .spinner-{size} (e.g., .spinner-border-sm, .spinner-grow-sm)
• Toasts: .toast, .toast-header, .toast-body
• Tooltips: data-bs-toggle="tooltip", data-bs-placement

Demo:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbara>
  <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <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="#">Homea>
      li>
      <li class="nav-item">
        <a class="nav-link" href="#">Featuresa>
      li>
    ul>
  div>
nav>


<div class="accordion" id="accordionExample">
  ...
div>


<div class="alert alert-success" role="alert">
  Success alert!
div>


<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown button
  button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
    <li><a class="dropdown-item" href="#">Actiona>li>
    <li><a class="dropdown-item" href="#">Another actiona>li>
    <li><a class="dropdown-item" href="#">Something else herea>li>
  ul>
div>


<span class="badge bg-primary">Primaryspan>


<div class="card">
  <img src="card-image.jpg" class="card-img-top" alt="Card image">
  <div class="card-body">
    <h5 class="card-title">Card titleh5>
    <p class="card-text">Card content goes here.p>
    <a href="#" class="btn btn-primary">Go somewherea>
  div>
div>


<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
  Launch demo modal
button>

<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 titleh5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">button>
      div>
      <div class="modal-body">
        ...
      div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Closebutton>
        <button type="button" class="btn btn-primary">Save changesbutton>
      div>
    div>
  div>
div>

• Borders: .border, .border-{side}, .border-{width}, .border-{color}, .rounded, .rounded-{side}, .rounded-{size}
• Colors: .text-{color}, .bg-{color}
• Display: .d-{value} (e.g., .d-none, .d-inline, .d-block, .d-grid, .d-table, .d-flex)
• Flex: .flex-{value}, .flex-{breakpoint}-{value}, .order-{value}, .align-items-{value}, .align-self-{value}, .justify-content-{value}
• Floats: .float-{side}, .float-{breakpoint}-{side}
• Interactions: .user-select-{value}, .pe-{value}, .pe-auto
• Opacity: .opacity-{value}
• Overflow: .overflow-{value}
• Position: .position-{value} (e.g., .position-static, .position-relative, .position-absolute, .position-fixed, .position-sticky)
• Shadows: .shadow, .shadow-{size}
• Sizing: .w-{value}, .h-{value}, .mw-100, .mh-100, .min-vw-100, .min-vh-100, .vw-100, .vh-100
• Spacing: .m{side}-{size}, .p{side}-{size}, .mx-auto
• Text: .text-{alignment}, .text-{wrapping}, .text-{transform}, .fw-{weight}, .fst-{style}, .lh-{value}, .text-{color}, .text-{opacity}
• Vertical align: .align-{value} (e.g., .align-baseline, .align-top, .align-middle, .align-bottom, .align-text-top, .align-text-bottom)
• Visibility: .visible, .invisible

Note: Replace {side} with t (top), b (bottom), s (start), e (end), x (horizontal), or y (vertical). Replace {size} with 0, 1, 2, 3, 4, 5, or auto. Replace {value} with the appropriate value for each utility class.

Demo:

<div class="border border-primary">Borderdiv>
<div class="d-flex justify-content-center">Flexboxdiv>
<div class="d-flex justify-content-center align-items-center">Vertical Centereddiv>
<div class="shadow-lg">Large shadowdiv>
<div class="p-3 mb-2 bg-light text-dark">Light backgrounddiv>

- Alerts: `data-bs-dismiss="alert"`
- Buttons: `data-bs-toggle="button"`
- Carousel: `data-bs-ride="carousel"`, `data-bs-slide`, `data-bs-slide-to`, `data-bs-interval`
- Collapse: `data-bs-toggle="collapse"`, `data-bs-target`
- Dropdowns: `data-bs-toggle="dropdown"`
- Modals: `data-bs-toggle="modal"`, `data-bs-target`, `data-bs-backdrop`, `data-bs-keyboard`
- Offcanvas: `data-bs-toggle="offcanvas"`, `data-bs-target`, `data-bs-backdrop`, `data-bs-scroll`
- Popovers: `data-bs-toggle="popover"`, `data-bs-trigger`, `data-bs-placement`, `data-bs-content`, `data-bs-animation`
- Scrollspy: `data-bs-spy="scroll"`, `data-bs-target`, `data-bs-offset`
- Toasts: `data-bs-autohide`, `data-bs-delay`
- Tooltips: `data-bs-toggle="tooltip"`, `data-bs-placement=[top|right|bottom|left]`, `data-bs-trigger`, `data-bs-animation`

Demo:

<div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel">
  <div class="carousel-indicators">
    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1">button>
    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2">button>
    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3">button>
  div>
  <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="#carouselExampleIndicators" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true">span>
    <span class="visually-hidden">Previousspan>
  button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true">span>
    <span class="visually-hidden">Nextspan>
  button>
div>


<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
  Open Modal
button>
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  ...
div>


<div 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">Bootstrapstrong>
    <small class="text-muted">11 mins agosmall>
    <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>


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

• Sass variables: Override default values or create new variables
• Sass maps: Modify color maps, grid breakpoints, and more
• Sass mixins: Use pre-defined mixins for common styles and responsive utilities
• CSS variables: Use CSS custom properties for easy customization
• Build tools: Utilize Bootstrap's build tools to compile Sass, minify CSS and JavaScript, and more

Demo:

// Custom Sass variables
$primary: #007bff;
$font-family-base: 'Custom Font', sans-serif;

// Custom CSS
.custom-class {
  color: $primary;
  font-family: $font-family-base;
}

• ARIA attributes: Use appropriate ARIA attributes for improved accessibility
• Keyboard navigation: Ensure components are keyboard-navigable and follow logical focus order
• Color contrast: Maintain sufficient color contrast for text and interactive elements
• Semantic markup: Use semantic HTML elements and proper heading structure

Demo:

<button type="button" class="btn btn-primary" aria-label="Submit">
  <i class="fas fa-check">i>
button>

• Responsive display: .d-{breakpoint}-{value}
• Responsive flex: .flex-{breakpoint}-{value}, .order-{breakpoint}-{value}, .align-items-{breakpoint}-{value}, .align-self-{breakpoint}-{value}, .justify-content-{breakpoint}-{value}
• Responsive floats: .float-{breakpoint}-{side}
• Responsive margin and padding: .m{breakpoint}-{side}-{size}, .p{breakpoint}-{side}-{size}
• Responsive text alignment: .text-{breakpoint}-{alignment}

Demo:

<div class="d-none d-md-block">Visible on medium screens and updiv>
<div class="text-center text-md-start">Center-aligned on small screens, left-aligned on medium screens and updiv>

• RTL-specific classes: .rtl
• RTL-aware components: Dropdowns, carousel, offcanvas, and more
• RTL-specific utilities: .me-{size}, .ps-{size}, .pe-{size}, .text-end.

Demo:

<div class="rtl">
  <div class="me-3">RTL margindiv>
div>

• Bootstrap v5 includes a set of high-quality, open-source icons called Bootstrap Icons
• Over 1,300 icons available in SVG format
• Icons can be easily customized with CSS
• Inline usage via  elements or background-image
• Icon font usage via  elements or ::before pseudo-elements
• Sprite usage by referencing external SVG sprite sheet
• Accessible icons with aria-label or aria-hidden attributes
• Icon variations: filled, outline, and sized.

<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-star" viewBox="0 0 16 16">
  <path d="M2.866 14.85c-.078.444.36.791.746.593l4.39-2.256 4.389 2.256c.386.198.824-.149.746-.592l-.83-4.73 3.522-3.356c.33-.314.16-.888-.282-.95l-4.898-.696L8.465.792a.513.513 0 0 0-.927 0L5.354 5.12l-4.898.696c-.441.062-.612.636-.283.95l3.523 3.356-.83 4.73zm4.905-2.767-3.686 1.894.694-3.957a.565.565 0 0 0-.163-.505L1.71 6.745l4.052-.576a.525.525 0 0 0 .393-.288L8 2.223l1.847 3.658a.525.525 0 0 0 .393.288l4.052.575-2.906 2.77a.565.565 0 0 0-.163.506l.694 3.957-3.686-1.894a.503.503 0 0 0-.461 0z"/>
svg>


<i class="bi bi-star">i>


<svg class="bi" width="16" height="16" fill="currentColor">
  <use xlink:href="bootstrap-icons.svg#star"/>
svg>