Bootstrap 5 Class Reference

Class Categories

🔹 Spacing Classes

Bootstrap’s spacing system is a foundational utility for creating visually balanced, consistent, and responsive layouts efficiently. The scale from 0 to 5 maps to specific `rem` values (0: `0`, 1: `0.25rem`, 2: `0.5rem`, 3: `1rem`, 4: `1.5rem`, 5: `3rem`), promoting vertical rhythm. Use classes like `mb-4` for margin-bottom or `px-3` for horizontal padding. These utilities are fully responsive—prepend a breakpoint like `mb-md-0` to adjust spacing at different screen sizes. This approach eliminates guesswork, enforces design consistency, and speeds up prototyping and production.

<!-- Margin Examples -->
<div class="m-0">No margin</div>
<div class="m-3">Margin all sides</div>
<div class="mt-2">Margin top</div>
<div class="mb-4">Margin bottom</div>
<div class="mx-auto">Margin horizontal auto</div>

<!-- Padding Examples -->
<div class="p-3">Padding all sides</div>
<div class="pt-2">Padding top</div>
<div class="px-4">Padding horizontal</div>
<div class="py-5">Padding vertical</div>

<!-- Spacing Scale: 0, 1, 2, 3, 4, 5 -->

🔹 Color Classes

Bootstrap’s color utility classes apply consistent, themable colors for backgrounds, text, and borders directly in your markup, streamlining styling. Background classes (`bg-*`) and text color classes (`text-*`) leverage CSS variables for easy global theme changes. For example, `bg-primary` uses your defined primary color, and `text-muted` applies secondary text color. Border color utilities (`border-*`) add colored outlines to elements. This semantic system improves maintainability—changing your theme color updates all instances—and supports accessibility by ensuring sufficient contrast ratios when used with appropriate color pairings.

<!-- Background Colors -->
<div class="bg-primary text-white p-2">Primary</div>
<div class="bg-secondary text-white p-2">Secondary</div>
<div class="bg-success text-white p-2">Success</div>
<div class="bg-danger text-white p-2">Danger</div>
<div class="bg-warning text-dark p-2">Warning</div>
<div class="bg-info text-dark p-2">Info</div>
<div class="bg-light text-dark p-2">Light</div>
<div class="bg-dark text-white p-2">Dark</div>

<!-- Text Colors -->
<p class="text-primary">Primary text</p>
<p class="text-success">Success text</p>
<p class="text-danger">Danger text</p>

🔹 Typography Classes

Text transformation utilities (`text-uppercase`, `text-lowercase`, `text-capitalize`) modify letter casing for stylistic consistency, branding, or grammatical correctness. `text-uppercase` is frequently applied to navigation labels, buttons, or section headings to create a strong, uniform appearance. `text-capitalize` automatically capitalizes the first letter of each word, useful for titles or proper nouns within dynamic content. These CSS-based transformations are preferable to manually typing uppercase text, as they allow the underlying source text to remain readable and correctly cased for screen readers, improving both aesthetics and accessibility.

<!-- Font Size -->
<p class="fs-1">Font size 1 (largest)</p>
<p class="fs-3">Font size 3</p>
<p class="fs-6">Font size 6 (smallest)</p>

<!-- Font Weight -->
<p class="fw-bold">Bold text</p>
<p class="fw-normal">Normal text</p>
<p class="fw-light">Light text</p>

<!-- Text Alignment -->
<p class="text-start">Left aligned</p>
<p class="text-center">Center aligned</p>
<p class="text-end">Right aligned</p>

<!-- Text Transform -->
<p class="text-lowercase">LOWERCASE TEXT</p>
<p class="text-uppercase">uppercase text</p>
<p class="text-capitalize">capitalize text</p>

🔹 Display & Flexbox Classes

Mastering Bootstrap’s display and flexbox classes is key to building modern, flexible, and complex layouts with minimal custom CSS. The `d-flex` class establishes a flex container, enabling use of powerful child utilities like `flex-grow-1`, `align-self-center`, or `order-*`. Combine with responsive breakpoints (e.g., `d-lg-none` to hide on large screens) for adaptive behavior. These utilities handle challenging layout tasks—vertical centering, equal-height columns, reordering content on different screens, or creating responsive navigation—directly through HTML, ensuring robust, maintainable, and cross-browser compatible designs.

<!-- Display Utilities -->
<div class="d-none">Hidden</div>
<div class="d-block">Block</div>
<div class="d-inline">Inline</div>
<div class="d-inline-block">Inline Block</div>

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

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

<!-- Flex Direction -->
<div class="d-flex flex-column">Column</div>
<div class="d-flex flex-row">Row</div>

🔹 Border & Shadow Classes

Border and shadow utilities add subtle visual depth, separation, and emphasis to UI elements, enhancing the overall design aesthetic and usability. Border classes (`border`, `border-top`, `border-primary`) control presence, sides, and color. Radius utilities (`rounded`, `rounded-circle`) soften edges. Shadow classes (`shadow`, `shadow-sm`, `shadow-lg`) apply box-shadows to create card-like effects or floating buttons. Used thoughtfully, these utilities help group related content, define interactive areas, and establish visual hierarchy without heavy design elements, contributing to a clean, modern, and accessible interface that guides the user’s eye.

<!-- Borders -->
<div class="border p-3">All borders</div>
<div class="border-top p-3">Top border</div>
<div class="border-primary p-3">Primary border</div>
<div class="border-0 p-3">No border</div>

<!-- Border Radius -->
<div class="rounded p-3">Rounded</div>
<div class="rounded-circle p-3">Circle</div>
<div class="rounded-pill p-3">Pill</div>

<!-- Shadows -->
<div class="shadow-sm p-3">Small shadow</div>
<div class="shadow p-3">Regular shadow</div>
<div class="shadow-lg p-3">Large shadow</div>

🔹 Sizing Classes

Sizing utilities (`w-*` for width, `h-*` for height) provide consistent control over element dimensions using percentage-based, viewport-based, or relative units. Common width classes include `w-25`, `w-50`, `w-75`, `w-100` (percentage of parent), and `vw-100` (viewport width). Height classes like `h-100` are essential for full-height sections or stretching content. Combine with `min-vh-100` for full-viewport hero sections. These utilities ensure proportional sizing that adapts to different containers and screen sizes, maintaining layout integrity and preventing overflow issues, which is fundamental for creating responsive, polished components like images, modals, or progress bars.

<!-- Width -->
<div class="w-25 bg-primary text-white p-2">Width 25%</div>
<div class="w-50 bg-primary text-white p-2">Width 50%</div>
<div class="w-75 bg-primary text-white p-2">Width 75%</div>
<div class="w-100 bg-primary text-white p-2">Width 100%</div>

<!-- Height -->
<div style="height: 200px;">
    <div class="h-25 bg-success">Height 25%</div>
    <div class="h-50 bg-info">Height 50%</div>
</div>

<!-- Max Width/Height -->
<div class="mw-100">Max width 100%</div>
<div class="mh-100">Max height 100%</div>

🔹 Quick Reference Table