Bootstrap 5 Cheat Sheet

Cheat Sheet Categories

🔹 Grid System Cheat Sheet

Bootstrap’s grid is a powerful, 12-column, flexbox-based system for building responsive layouts with containers, rows, and columns. Key concepts include: containers (.container fixed-width, .container-fluid full-width) for alignment, rows (.row) as flex parents that hold columns and enable gutters, and columns (.col-*) as flexible content areas. Use breakpoint infixes (sm, md, lg, xl, xxl) to control behavior at different screen sizes. Mastering this system allows you to create any layout quickly while writing semantic, maintainable HTML. This efficiency and clean code structure are beneficial for SEO, leading to faster development, fewer bugs, and optimized page speeds.

<!-- Basic Grid -->
<div class="container">
    <div class="row">
        <div class="col">Column</div>
        <div class="col">Column</div>
    </div>
</div>

<!-- Specific Column Widths -->
<div class="row">
    <div class="col-4">4 columns</div>
    <div class="col-8">8 columns</div>
</div>

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

<!-- Container Types -->
<div class="container">Fixed width</div>
<div class="container-fluid">Full width</div>

🔹 Button Cheat Sheet

Bootstrap provides a comprehensive suite of button styles and utilities for creating clear, accessible, and visually consistent calls-to-action. Core styles include: .btn-primary (main action), .btn-secondary, .btn-success, .btn-danger, etc. Sizing classes: .btn-lg, .btn-sm. State classes: .active, .disabled. Outline variant: .btn-outline-*. Buttons can be made full-width with .btn-block or grouped with .btn-group. Using semantic <button> elements or properly styled <a> tags with descriptive text improves accessibility and helps search engines understand interactive elements, potentially influencing the clarity of your site’s purpose and user flow, which are indirect SEO factors.

<!-- Button Colors -->
<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>

<!-- Outline Buttons -->
<button class="btn btn-outline-primary">Outline</button>

<!-- Block Button -->
<button class="btn btn-primary w-100">Block Button</button>

🔹 Card Cheat Sheet

Optimize card content for both users and search engines by including concise, keyword-relevant headings (.card-title as <h*>), descriptive supporting text (.card-text), and optimized images with alt attributes. Ensure calls-to-action within cards (buttons or links) use clear, actionable language. Cards should be self-contained pieces of content that are easily scannable. This content clarity directly aids SEO by providing well-structured information that search engines can easily index and match to user queries. Furthermore, a grid of well-designed cards encourages users to explore more content on your site, increasing page views and reducing bounce rates—positive behavioral signals for search rankings.

<!-- Basic Card -->
<div class="card">
    <div class="card-body">
        <h5 class="card-title">Card Title</h5>
        <p class="card-text">Card content</p>
        <a href="#" class="btn btn-primary">Button</a>
    </div>
</div>

<!-- Card with Image -->
<div class="card">
    <img src="image.jpg" class="card-img-top" alt="...">
    <div class="card-body">
        <h5 class="card-title">Title</h5>
        <p class="card-text">Text</p>
    </div>
</div>

<!-- Card with Header and Footer -->
<div class="card">
    <div class="card-header">Header</div>
    <div class="card-body">Body</div>
    <div class="card-footer">Footer</div>
</div>

🔹 Form Cheat Sheet

Bootstrap styles all standard form controls—text inputs, selects, checkboxes, radios, textareas—with consistent, accessible classes like .form-control, .form-select, and .form-check. Layouts include stacked (vertical), horizontal (using grid), and inline (using flex). Key utilities: sizing (.form-control-lg), validation states (.is-valid), and feedback messages. Always pair form controls with properly associated <label> elements using the for attribute. Accessible, well-structured forms are easier for users to complete and for search engines to understand, especially for lead generation or transactional pages. High conversion rates and positive user interactions with forms contribute to a site’s overall quality signals, which can influence SEO.

<!-- 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>

<!-- Select Dropdown -->
<select class="form-select">
    <option selected>Choose...</option>
    <option value="1">Option 1</option>
</select>

<!-- Checkbox -->
<div class="form-check">
    <input class="form-check-input" type="checkbox" id="check">
    <label class="form-check-label" for="check">Check me</label>
</div>

🔹 Spacing Cheat Sheet

Bootstrap spacing utilities control margin and padding with shorthand classes for rapid, consistent layout design. Classes use the format `{property}{sides}-{size}` where property is `m` for margin or `p` for padding, sides indicate direction (e.g., `t` for top, `b` for bottom, `x` for horizontal), and size ranges from 0 to 5 (e.g., `mt-3` adds a `1rem` top margin). These predefined scales eliminate inconsistent pixel values, ensuring visual harmony and responsive spacing across breakpoints while dramatically speeding up front-end development.

<!-- Margin (m) and Padding (p) -->
m-0  to m-5    (margin all sides)
mt-0 to mt-5   (margin top)
mb-0 to mb-5   (margin bottom)
ms-0 to ms-5   (margin start/left)
me-0 to me-5   (margin end/right)
mx-0 to mx-5   (margin horizontal)
my-0 to my-5   (margin vertical)

p-0  to p-5    (padding all sides)
pt-0 to pt-5   (padding top)
pb-0 to pb-5   (padding bottom)
ps-0 to ps-5   (padding start/left)
pe-0 to pe-5   (padding end/right)
px-0 to px-5   (padding horizontal)
py-0 to py-5   (padding vertical)

<!-- Examples -->
<div class="m-3">Margin 3</div>
<div class="p-4">Padding 4</div>
<div class="mt-2 mb-3">Top 2, Bottom 3</div>

🔹 Color Cheat Sheet

Semantic color coding transforms user interfaces by conveying status intuitively, reducing cognitive load and potential errors. Danger colors (`#dc3545`) instantly alert users to problems like invalid inputs or deletion warnings, prompting corrective action. Success colors (`#198754`) reinforce positive confirmation, such as successful saves or validation passes. This system, rooted in color psychology and web conventions, builds trust and streamlines interaction. For full accessibility, ensure color is not the only indicator—incorporate text, patterns, or ARIA labels.

<!-- Background Colors -->
bg-primary, bg-secondary, bg-success
bg-danger, bg-warning, bg-info
bg-light, bg-dark, bg-white

<!-- Text Colors -->
text-primary, text-secondary, text-success
text-danger, text-warning, text-info
text-light, text-dark, text-white, text-muted

<!-- Examples -->
<div class="bg-primary text-white p-3">Primary Background</div>
<p class="text-success">Success Text</p>
<p class="text-danger">Danger Text</p>

🔹 Display & Flexbox Cheat Sheet

Bootstrap’s display and flexbox utilities provide powerful, responsive control over layout and component alignment without custom CSS. Display classes like `d-none`, `d-block`, or `d-flex` control an element’s box type across breakpoints (e.g., `d-md-flex`). Flex utilities (`justify-content-`, `align-items-`, `flex-wrap-`) manage alignment, direction, and wrapping of flex containers. This enables complex, adaptive layouts—like centered navigation bars, card grids, or responsive form rows—directly in your HTML, ensuring consistent behavior and drastically reducing layout-specific style sheets.

<!-- Display -->
d-none, d-inline, d-inline-block
d-block, d-flex, d-grid

<!-- Flexbox -->
d-flex
justify-content-start, center, end, between, around
align-items-start, center, end, stretch
flex-row, flex-column
flex-wrap, flex-nowrap

<!-- Examples -->
<div class="d-flex justify-content-between">
    <div>Item 1</div>
    <div>Item 2</div>
</div>

<div class="d-flex align-items-center">
    <div>Centered</div>
</div>

🔹 Responsive Breakpoints

Bootstrap 5’s responsive breakpoints are predefined media query ranges that enable adaptive, mobile-first design across all devices. The six default breakpoints are X-Small (`<576px`), Small (`≥576px`), Medium (`≥768px`), Large (`≥992px`), X-Large (`≥1200px`), and XX-Large (`≥1400px`). You apply breakpoint-specific classes by appending the breakpoint abbreviation (e.g., `-md`, `-lg`) to utility classes, like `col-md-6` or `text-lg-center`. This systematic approach ensures your design scales seamlessly from phones to desktops, providing optimal user experience on every screen size.

<!-- Breakpoints -->
xs: < 576px   (Extra small - default)
sm: ≥ 576px   (Small devices)
md: ≥ 768px   (Medium devices)
lg: ≥ 992px   (Large devices)
xl: ≥ 1200px  (Extra large devices)
xxl: ≥ 1400px (Extra extra large)

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

<div class="d-none d-md-block">
    Hidden on small, visible on medium+
</div>

<p class="fs-6 fs-md-4 fs-lg-2">
    Responsive font size
</p>

🔹 Common Component Snippets

Pre-built Bootstrap component snippets accelerate development by providing ready-to-use, accessible HTML for common UI patterns. These include navigation bars, cards, modals, alerts, buttons, and forms—all with proper ARIA attributes and keyboard navigation built in. Using these standardized snippets ensures consistency with Bootstrap’s design language, reduces bugs, and enhances accessibility from the start. Simply copy, paste, and customize with your content and utility classes to rapidly assemble professional, responsive interfaces without reinventing the wheel for every project.

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

<!-- Badge -->
<span class="badge bg-primary">New</span>

<!-- Breadcrumb -->
<nav aria-label="breadcrumb">
    <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="#">Home</a></li>
        <li class="breadcrumb-item active">Page</li>
    </ol>
</nav>

<!-- Progress Bar -->
<div class="progress">
    <div class="progress-bar" style="width: 75%">75%</div>
</div>

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