Bootstrap Cheat Sheet — Complete Reference

Welcome to the ultimate Bootstrap cheat sheet! This comprehensive reference consolidates every class, component, utility, and concept from our Bootstrap tutorial series. Use it as a quick reference during development, interview preparation, or when building your next project.

1. Grid System

Bootstrap's 12-column responsive grid is the foundation of all layouts.

Grid Breakpoints

2. Typography

Bootstrap's typography system provides clean, readable text styling.

3. Colors

Bootstrap's contextual color system for text, backgrounds, and borders.

Opacity Utilities: .bg-opacity-10, .bg-opacity-25, .bg-opacity-50, .bg-opacity-75, .bg-opacity-100

Gradient: .bg-gradient (adds gradient to background)

4. Spacing Utilities

Margin (m) and padding (p) with 0-5 scale and auto.

Spacing Scale

5. Buttons

Use .btn with contextual classes for styled buttons.

6. Forms

Form controls with .form-control, labels with .form-label.

7. Tables

Use .table on any <table> for Bootstrap styling.

8. Navbar

Responsive navigation header with .navbar.

9. Cards

Flexible content container with .card.

10. Modals

Dialog/popup with .modal and data-bs-toggle="modal".

11. Carousel

Image slider/slideshow with .carousel.

12. Accordion

Expandable sections with .accordion.

13. Dropdowns

Contextual menus with .dropdown.

14. Flexbox Utilities

CSS Flexbox utilities with .d-flex.

15. Display Utilities

Control element visibility and display behavior.

Responsive Display: Use .d-{breakpoint}-{value} (e.g., .d-md-none, .d-lg-block)

16. Positioning Utilities

Control element positioning with .position-*.

17. Sizing & Borders

Element sizing and border utilities.

18. Sass Theming Variables

Key Sass variables for customizing Bootstrap themes.

19. Quick Common Patterns

Ready-to-use pattern snippets for common use cases.

Centering Content

<!-- Flexbox center -->
<div class="d-flex justify-content-center align-items-center" style="min-height: 100vh;">
    Centered content
</div>

<!-- Text center -->
<div class="text-center">Centered text</div>

<!-- Block center (margin auto) -->
<div class="mx-auto" style="width: 200px;">Centered block</div>

Spacing Helper

<!-- Consistent spacing -->
<div class="p-3 mb-4 bg-light rounded">Content with spacing</div>

Mobile-First Responsive

<!-- Show/hide on different screens -->
<div class="d-none d-md-block">Visible on medium+</div>
<div class="d-block d-md-none">Visible only on mobile</div>

<!-- Responsive grid -->
<div class="row row-cols-1 row-cols-md-2 row-cols-lg-4">...</div>

Button with Icon

<button class="btn btn-primary">
    <i class="fas fa-plus"></i> Add Item
</button>

Card Grid

<div class="row row-cols-1 row-cols-md-3 g-4">
    <div class="col">
        <div class="card h-100">...</div>
    </div>
</div>

Modal Trigger

<button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#myModal">
    Open Modal
</button>

Navbar with Toggle

<nav class="navbar navbar-expand-lg 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="#nav">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="nav">
            <ul class="navbar-nav ms-auto">
                <li class="nav-item"><a class="nav-link" href="#">Home</a></li>
            </ul>
        </div>
    </div>
</nav>

Form Input with Validation

<div class="mb-3">
    <label class="form-label">Email</label>
    <input type="email" class="form-control is-valid" value="user@example.com">
    <div class="valid-feedback">Looks good!</div>
</div>