Bootstrap Classes Cheat Sheet: The Ultimate CSS Framework Reference Guide

Introduction: What is Bootstrap and Why Use It?

Bootstrap is the world’s most popular CSS framework for building responsive, mobile-first websites. Created by Twitter developers, it provides a comprehensive collection of pre-built components and utility classes that streamline web development. Bootstrap helps you:

• Build responsive layouts quickly without writing custom CSS
• Maintain consistency across projects with standardized components
• Accelerate development with ready-to-use elements
• Ensure cross-browser compatibility and mobile responsiveness

Core Bootstrap Classes by Category

Container and Grid System

Breakpoint Reference

Spacing and Sizing

Margin and Padding

• Format: {property}{sides}-{size}
• Property: m (margin), p (padding)
• Sides: t (top), b (bottom), s (start), e (end), x (horizontal), y (vertical), blank (all sides)
• Size: 0 to 5, auto

Width and Height

• w-{size}: 25%, 50%, 75%, 100%, auto
• h-{size}: 25%, 50%, 75%, 100%, auto
• mw-100: max-width: 100%
• mh-100: max-height: 100%

Text Formatting

Colors and Background

Text Colors

• text-primary, text-secondary, text-success, text-danger
• text-warning, text-info, text-light, text-dark, text-muted

Background Colors

• bg-primary, bg-secondary, bg-success, bg-danger
• bg-warning, bg-info, bg-light, bg-dark, bg-transparent

Bootstrap Components Classes

Buttons

Button Styles

• btn btn-primary, btn btn-secondary, btn btn-success
• btn btn-danger, btn btn-warning, btn btn-info
• btn btn-light, btn btn-dark, btn btn-link

Button Sizes

• btn-lg, btn-sm

Button States

• active, disabled

Button Outline

• btn-outline-* (all color variants)

Alerts

• alert alert-primary, alert alert-secondary, alert alert-success
• alert alert-danger, alert alert-warning, alert alert-info
• alert alert-light, alert alert-dark
• alert-dismissible with fade and show for dismissible alerts

Forms

Form Controls

• form-control – Basic text input
• form-control-lg, form-control-sm – Size variants
• form-select – Dropdown select
• form-check – Checkboxes and radio buttons
• form-check-input – Input within form check
• form-check-label – Label for form check
• form-range – Range input
• form-floating – Floating labels

Form Layout

• form-label – Label for form control
• form-text – Additional help text
• form-group – Grouping form elements
• input-group – Input with addons

Cards

Basic Card

• card – Card container
• card-header – Card header section
• card-body – Main card content
• card-footer – Card footer section
• card-title – Card title
• card-subtitle – Card subtitle
• card-text – Card text content
• card-link – Card links
• card-img-top, card-img-bottom – Card images

Card Sizing and Layout

• card-group – Group cards with equal height
• card-deck – Fixed width cards with same height
• card-columns – Masonry-like card grid

Navigation

Navbar

• navbar – Basic navbar
• navbar-expand-* – Responsive breakpoints
• navbar-light, navbar-dark – Color schemes
• navbar-brand – Brand element
• navbar-nav – Navigation container
• nav-item – Navigation item
• nav-link – Navigation link

Nav

• nav – Basic navigation
• nav-tabs – Tabbed navigation
• nav-pills – Pill navigation
• nav-fill – Full-width nav items
• nav-justified – Equal-width items

Tables

• table – Basic table
• table-striped – Striped rows
• table-bordered – Bordered table
• table-hover – Hover effect on rows
• table-sm – Compact table
• table-responsive – Responsive table
• table-dark – Dark theme table

Utilities

Flex

Flex Container

• d-flex, d-inline-flex – Display flex
• flex-row, flex-row-reverse – Direction
• flex-column, flex-column-reverse – Column direction
• flex-wrap, flex-nowrap – Wrapping
• justify-content-* – start, end, center, between, around, evenly
• align-items-* – start, end, center, baseline, stretch
• align-content-* – start, end, center, between, around, stretch

Flex Items

• flex-fill – Force items to equal width
• flex-grow-* – 0, 1 – Control item growth
• flex-shrink-* – 0, 1 – Control item shrink
• align-self-* – start, end, center, baseline, stretch

Display

• d-none, d-inline, d-block, d-table
• d-{breakpoint}-{value} – Responsive display
• d-print-none, d-print-block – Print display

Border

• border – Add border
• border-{side} – top, end, bottom, start
• border-0 – Remove border
• border-{color} – Border color
• rounded, rounded-circle, rounded-pill – Border radius

Shadow

• shadow-none, shadow-sm, shadow, shadow-lg – Box shadows

Responsive Utility Classes

Visibility

• visible, invisible – Visibility control
• d-none d-md-block – Hide on small, show on medium+
• d-md-none d-lg-block – Show on small, hide on medium, show on large+

Responsive Spacing

• {property}{sides}-{breakpoint}-{size}
• Example: mt-md-3 – Apply margin-top on medium screens and up

Common Challenges and Solutions

Vertical Centering

<!-- Method 1: Using flex -->
<div class="d-flex align-items-center" style="height: 200px;">
  <div>Centered content</div>
</div>

<!-- Method 2: Using position utilities -->
<div class="position-relative" style="height: 200px;">
  <div class="position-absolute top-50 start-50 translate-middle">
    Centered content
  </div>
</div>

Equal Height Columns

<div class="row">
  <div class="col d-flex">
    <div class="card flex-fill">
      Content
    </div>
  </div>
  <div class="col d-flex">
    <div class="card flex-fill">
      More content
    </div>
  </div>
</div>

Sticky Header

<nav class="navbar sticky-top bg-light">
  Sticky navbar
</nav>

Best Practices and Tips

1. Mobile-First Approach
   • Start with base styles for mobile
   • Add breakpoint classes as needed for larger screens
2. Component Combinations
   • Combine utility classes to create custom components
   • Example: class="d-flex justify-content-between align-items-center bg-light p-3 rounded"
3. Custom CSS Organization
   • Use Bootstrap utilities first before writing custom CSS
   • Override variables in a separate Sass file rather than modifying Bootstrap source
4. Responsive Images
   • Always use img-fluid class on images to make them responsive
   • Consider img-thumbnail for bordered images
5. Performance Tips
   • Use Bootstrap’s custom build to include only the components you need
   • Load minified CSS and JS files in production
   • Consider using the CDN for faster load times

Resources for Further Learning

1. Official Documentation
   • Bootstrap 5 Documentation
   • Bootstrap Examples
2. Learning Resources
   • Bootstrap 5 Tutorial – W3Schools
   • Bootstrap 5 Tutorial – MDN Web Docs
3. Tools and Extensions
   • Bootstrap Icons
   • Bootstrap Themes
   • Bootswatch – Free themes for Bootstrap
4. Community Resources
   • Stack Overflow Bootstrap Tag
   • GitHub Repository

Remember that Bootstrap is highly customizable. While this cheatsheet covers the most common classes, you can always extend Bootstrap with your own custom styles and components to match your project’s specific needs.