Bootstrap Utilities - Complete Guide

Introduction

Bootstrap Utilities are single-purpose CSS classes that allow you to style elements directly without writing custom CSS. They cover spacing, colors, typography, flexbox, borders, shadows, visibility, and more. Utilities help you build layouts faster, keep CSS minimal, and maintain consistency across your project.

1. Spacing Utilities (Margin & Padding)

Bootstrap spacing syntax: {property}{sides}-{size}

m = margin, p = padding
t,b,s,e,x,y = top, bottom, start, end, horizontal, vertical
0..5 = spacing scale, auto = auto margin

<div class="m-0">margin: 0</div>
<div class="m-3">margin: 1rem on all sides</div>
<div class="mt-2">margin-top: 0.5rem</div>
<div class="mb-4">margin-bottom: 1.5rem</div>
<div class="ms-auto">margin-left: auto</div>
<div class="me-auto">margin-right: auto</div>
<div class="mx-auto">horizontal margins auto</div>
<div class="my-5">margin-top & margin-bottom: 3rem</div>

<div class="p-0">padding: 0</div>
<div class="p-3">padding: 1rem</div>
<div class="pt-1">padding-top: 0.25rem</div>
<div class="pb-2">padding-bottom: 0.5rem</div>
<div class="ps-4">padding-left: 1.5rem</div>
<div class="pe-5">padding-right: 3rem</div>
<div class="px-2">padding-left & right: 0.5rem</div>
<div class="py-4">padding-top & bottom: 1.5rem</div>

<div class="m-1 m-md-3 m-lg-5">Responsive margin</div>
<div class="p-2 p-sm-4 p-xl-5">Responsive padding</div>

2-3. Display and Flexbox Utilities

<div class="d-none">Hidden on all screen sizes</div>
<div class="d-block d-md-none">Visible only on mobile</div>
<div class="d-none d-md-block">Visible from medium up</div>
<div class="d-inline">Inline</div>
<div class="d-inline-block">Inline-block</div>
<div class="d-flex">Flex container</div>
<div class="d-grid">Grid container</div>
<div class="d-none d-sm-block">Hidden xs, visible sm+</div>
<div class="d-print-none">Hidden on print</div>

<div class="d-flex flex-row">Horizontal</div>
<div class="d-flex flex-column">Vertical</div>
<div class="d-flex justify-content-between">Space between</div>
<div class="d-flex align-items-center">Center cross-axis</div>
<div class="align-self-end">Individual end align</div>
<div class="d-flex flex-wrap gap-3 gap-md-4">Wrap with gap</div>
<div class="flex-grow-1">Grow</div>
<div class="flex-shrink-0">No shrink</div>
<div class="flex-fill">Fill available space</div>

4-7. Sizing, Color, Border, Shadow

<div class="w-25 w-50 w-75 w-100 w-auto mw-100">Width utilities</div>
<div class="h-25 h-50 h-75 h-100 h-auto mh-100">Height utilities</div>
<div class="vw-100 vh-100 min-vw-100 min-vh-100">Viewport sizing</div>

<div class="text-primary text-success text-danger text-muted">Text colors</div>
<div class="bg-primary bg-success bg-warning bg-dark text-white">Background colors</div>
<div class="bg-gradient bg-primary">Gradient</div>

<div class="border border-top border-bottom border-start border-end border-0">Borders</div>
<div class="border border-primary border-danger border-info">Border colors</div>
<div class="rounded rounded-0 rounded-1 rounded-2 rounded-3 rounded-4 rounded-5 rounded-circle rounded-pill">Radius</div>

<div class="shadow-none">No shadow</div>
<div class="shadow-sm">Small shadow</div>
<div class="shadow">Default shadow</div>
<div class="shadow-lg">Large shadow</div>

8-10. Typography, Position, Overflow

<div class="text-start text-center text-end text-md-end">Alignment</div>
<div class="text-wrap text-nowrap text-truncate text-break">Wrapping and overflow text</div>
<div class="text-lowercase text-uppercase text-capitalize">Transforms</div>
<div class="fw-bold fw-semibold fw-normal fw-light fst-italic">Weight/style</div>
<div class="fs-1 fs-2 fs-3 fs-4 fs-5 fs-6">Font sizes</div>
<div class="lh-1 lh-sm lh-base lh-lg">Line height</div>

<div class="position-relative">
  <div class="position-absolute top-0 start-0">Top left</div>
  <div class="position-absolute top-0 end-0">Top right</div>
  <div class="position-absolute top-50 start-50 translate-middle">Centered</div>
</div>

<div class="overflow-auto">Auto overflow</div>
<div class="overflow-hidden">Hidden overflow</div>
<div class="overflow-visible">Visible overflow</div>
<div class="overflow-scroll">Always scrollbars</div>

11-15. Visibility, Opacity, Vertical Align, Ratio, Interactive

<div class="visible">Visible</div>
<div class="invisible">Invisible but occupies space</div>

<div class="opacity-100">100%</div>
<div class="opacity-75">75%</div>
<div class="opacity-50">50%</div>
<div class="opacity-25">25%</div>
<div class="opacity-0">0%</div>

<span class="align-baseline">baseline</span>
<span class="align-top">top</span>
<span class="align-middle">middle</span>
<span class="align-bottom">bottom</span>

<div class="ratio ratio-1x1">1:1</div>
<div class="ratio ratio-16x9">16:9</div>
<div class="ratio" style="--bs-aspect-ratio: 50%;">2:1</div>

<div class="user-select-all">Select all</div>
<div class="user-select-none">Cannot select</div>
<div class="pe-none">Ignore clicks</div>
<div class="pe-auto">Default pointer events</div>

16. Combining Utilities - Practical Examples

<div class="w-75 mx-auto shadow-lg rounded-3 p-4 bg-light text-center">
  <h3 class="fw-bold text-primary">Centered Card</h3>
  <p class="text-muted">This card uses multiple utilities together.</p>
  <button class="btn btn-success px-4 py-2 rounded-pill">Click Me</button>
</div>

<div class="d-flex justify-content-between align-items-center p-3 bg-dark text-white">
  <div class="fs-4 fw-bold">Logo</div>
  <div class="d-flex gap-4">
    <a href="#" class="text-white text-decoration-none">Home</a>
    <a href="#" class="text-white text-decoration-none">About</a>
    <a href="#" class="text-white text-decoration-none">Services</a>
  </div>
  <button class="btn btn-outline-light rounded-pill px-4">Login</button>
</div>

<div class="d-flex flex-column flex-md-row gap-3 p-4">
  <div class="w-100 bg-primary text-white p-3 rounded">Item 1</div>
  <div class="w-100 bg-secondary text-white p-3 rounded">Item 2</div>
  <div class="w-100 bg-success text-white p-3 rounded">Item 3</div>
</div>

<div class="d-flex flex-column min-vh-100">
  <main class="flex-grow-1 p-4">Main content area</main>
  <footer class="bg-dark text-white text-center p-3 mt-auto">&copy; 2025 Sticky Footer</footer>
</div>

Quick Reference Summary

Category	Common Classes
Spacing	`m-`, `p-`, `mt-`, `pb-`, `mx-auto`
Display	`d-none`, `d-block`, `d-flex`, `d-grid`
Flexbox	`justify-content-`, `align-items-`, `flex-grow-1`, `gap-*`
Sizing	`w-100`, `h-50`, `min-vh-100`
Text	`text-center`, `fw-bold`, `text-primary`, `fs-4`
Background	`bg-primary`, `bg-light`, `bg-gradient`
Borders	`border`, `rounded-3`, `rounded-circle`
Shadow	`shadow-sm`, `shadow`, `shadow-lg`
Position	`position-relative`, `top-0`, `start-50`, `translate-middle`
Opacity	`opacity-50`, `opacity-25`

Conclusion

Bootstrap Utilities are the fastest way to style and layout elements without writing custom CSS. By mastering these classes, you can build complete, responsive, and polished interfaces using only HTML and Bootstrap classes. Keep this guide handy as a reference whenever you need spacing, alignment, colors, or layout behavior.

Bootstrap Utilities - Complete Guide with Examples