Bootstrap provides extensive utility classes for rapid styling without writing custom CSS. These utilities cover spacing, colors, display properties, flexbox, positioning, sizing, typography, and more with responsive variants.
Utility classes for controlling margin and padding with consistent spacing scale.
/**
* Margin utilities
* Format: .m{sides}-{size} where:
* - sides: t(top), b(bottom), s(start/left), e(end/right), x(horizontal), y(vertical), or blank(all)
* - size: 0, 1(0.25rem), 2(0.5rem), 3(1rem), 4(1.5rem), 5(3rem), auto
*/
.m-0, .m-1, .m-2, .m-3, .m-4, .m-5, .m-auto /* All sides margin */
.mt-0, .mt-1, .mt-2, .mt-3, .mt-4, .mt-5, .mt-auto /* Top margin */
.mb-0, .mb-1, .mb-2, .mb-3, .mb-4, .mb-5, .mb-auto /* Bottom margin */
.ms-0, .ms-1, .ms-2, .ms-3, .ms-4, .ms-5, .ms-auto /* Start (left) margin */
.me-0, .me-1, .me-2, .me-3, .me-4, .me-5, .me-auto /* End (right) margin */
.mx-0, .mx-1, .mx-2, .mx-3, .mx-4, .mx-5, .mx-auto /* Horizontal margin */
.my-0, .my-1, .my-2, .my-3, .my-4, .my-5, .my-auto /* Vertical margin */
/**
* Padding utilities
* Format: .p{sides}-{size}
*/
.p-0, .p-1, .p-2, .p-3, .p-4, .p-5 /* All sides padding */
.pt-0, .pt-1, .pt-2, .pt-3, .pt-4, .pt-5 /* Top padding */
.pb-0, .pb-1, .pb-2, .pb-3, .pb-4, .pb-5 /* Bottom padding */
.ps-0, .ps-1, .ps-2, .ps-3, .ps-4, .ps-5 /* Start (left) padding */
.pe-0, .pe-1, .pe-2, .pe-3, .pe-4, .pe-5 /* End (right) padding */
.px-0, .px-1, .px-2, .px-3, .px-4, .px-5 /* Horizontal padding */
.py-0, .py-1, .py-2, .py-3, .py-4, .py-5 /* Vertical padding */
/**
* Responsive spacing utilities
* Format: .{property}-{breakpoint}-{size}
*/
/* Small (sm) and up */
.m-sm-0, .m-sm-1, .m-sm-2, .m-sm-3, .m-sm-4, .m-sm-5, .m-sm-auto
.mt-sm-0, .mb-sm-0, .ms-sm-0, .me-sm-0, .mx-sm-0, .my-sm-0
/* Continue pattern for mt, mb, ms, me, mx, my with sm, md, lg, xl, xxl */
/* Medium (md) and up */
.m-md-0, .m-md-1, .m-md-2, .m-md-3, .m-md-4, .m-md-5, .m-md-auto
/* Similar pattern for all spacing utilities at md, lg, xl, xxl breakpoints */
/**
* Negative margins
*/
.m-n1, .m-n2, .m-n3, .m-n4, .m-n5 /* Negative margins */
.mt-n1, .mb-n1, .ms-n1, .me-n1, .mx-n1, .my-n1 /* Negative margin variants */Usage Examples:
<!-- Basic spacing -->
<div class="m-3 p-2">Margin 3, padding 2</div>
<div class="mt-4 mb-2">Top margin 4, bottom margin 2</div>
<div class="px-3 py-1">Horizontal padding 3, vertical padding 1</div>
<!-- Responsive spacing -->
<div class="m-2 m-md-4">Small margin on mobile, larger on tablets+</div>
<div class="p-1 p-lg-3">Small padding on mobile/tablet, larger on desktop+</div>
<!-- Center with auto margin -->
<div class="mx-auto" style="width: 200px;">Centered content</div>Utility classes for text colors, background colors, and border colors using theme colors.
/**
* Text color utilities
*/
.text-primary /* Primary theme text color */
.text-secondary /* Secondary theme text color */
.text-success /* Success theme text color */
.text-danger /* Danger theme text color */
.text-warning /* Warning theme text color */
.text-info /* Info theme text color */
.text-light /* Light theme text color */
.text-dark /* Dark theme text color */
.text-body /* Body text color */
.text-muted /* Muted text color */
.text-white /* White text */
.text-black-50 /* 50% black text */
.text-white-50 /* 50% white text */
/**
* Background color utilities
*/
.bg-primary /* Primary theme background */
.bg-secondary /* Secondary theme background */
.bg-success /* Success theme background */
.bg-danger /* Danger theme background */
.bg-warning /* Warning theme background */
.bg-info /* Info theme background */
.bg-light /* Light theme background */
.bg-dark /* Dark theme background */
.bg-body /* Body background color */
.bg-white /* White background */
.bg-transparent /* Transparent background */
/**
* Background opacity utilities
*/
.bg-opacity-10 /* 10% background opacity */
.bg-opacity-25 /* 25% background opacity */
.bg-opacity-50 /* 50% background opacity */
.bg-opacity-75 /* 75% background opacity */
.bg-opacity-100 /* 100% background opacity */
/**
* Border color utilities
*/
.border-primary /* Primary border color */
.border-secondary /* Secondary border color */
.border-success /* Success border color */
.border-danger /* Danger border color */
.border-warning /* Warning border color */
.border-info /* Info border color */
.border-light /* Light border color */
.border-dark /* Dark border color */
.border-white /* White border */Usage Examples:
<!-- Text colors -->
<p class="text-primary">Primary text</p>
<p class="text-success">Success text</p>
<p class="text-muted">Muted text</p>
<!-- Background colors -->
<div class="bg-primary text-white p-3">Primary background</div>
<div class="bg-light p-3">Light background</div>
<!-- Background with opacity -->
<div class="bg-success bg-opacity-25 p-3">25% opacity success background</div>
<!-- Border colors -->
<div class="border border-danger p-3">Danger border</div>Control the display property of elements with responsive variants.
/**
* Display utilities
*/
.d-none /* display: none */
.d-inline /* display: inline */
.d-inline-block /* display: inline-block */
.d-block /* display: block */
.d-grid /* display: grid */
.d-table /* display: table */
.d-table-row /* display: table-row */
.d-table-cell /* display: table-cell */
.d-flex /* display: flex */
.d-inline-flex /* display: inline-flex */
/**
* Responsive display utilities
* Format: .d-{breakpoint}-{value}
*/
/* Small devices (sm) and up */
.d-sm-none, .d-sm-inline, .d-sm-inline-block, .d-sm-block,
.d-sm-grid, .d-sm-table, .d-sm-table-row, .d-sm-table-cell,
.d-sm-flex, .d-sm-inline-flex
/* Medium devices (md) and up */
.d-md-none, .d-md-inline, .d-md-inline-block, .d-md-block,
.d-md-grid, .d-md-table, .d-md-table-row, .d-md-table-cell,
.d-md-flex, .d-md-inline-flex
/* Large devices (lg) and up */
.d-lg-none, .d-lg-inline, .d-lg-inline-block, .d-lg-block,
.d-lg-grid, .d-lg-table, .d-lg-table-row, .d-lg-table-cell,
.d-lg-flex, .d-lg-inline-flex
/* Extra large devices (xl) and up */
.d-xl-none, .d-xl-inline, .d-xl-inline-block, .d-xl-block,
.d-xl-grid, .d-xl-table, .d-xl-table-row, .d-xl-table-cell,
.d-xl-flex, .d-xl-inline-flex
/* Extra extra large devices (xxl) and up */
.d-xxl-none, .d-xxl-inline, .d-xxl-inline-block, .d-xxl-block,
.d-xxl-grid, .d-xxl-table, .d-xxl-table-row, .d-xxl-table-cell,
.d-xxl-flex, .d-xxl-inline-flexUsage Examples:
<!-- Basic display -->
<div class="d-inline">Inline element</div>
<div class="d-block">Block element</div>
<div class="d-none">Hidden element</div>
<!-- Responsive display -->
<div class="d-none d-md-block">Hidden on mobile, visible on tablets+</div>
<div class="d-block d-lg-none">Visible on mobile/tablet, hidden on desktop+</div>
<!-- Flexbox -->
<div class="d-flex">Flexbox container</div>
<div class="d-inline-flex">Inline flexbox container</div>Comprehensive flexbox utilities for layout control and alignment.
/**
* Flex direction
*/
.flex-row /* flex-direction: row */
.flex-row-reverse /* flex-direction: row-reverse */
.flex-column /* flex-direction: column */
.flex-column-reverse /* flex-direction: column-reverse */
/**
* Flex wrap
*/
.flex-wrap /* flex-wrap: wrap */
.flex-nowrap /* flex-wrap: nowrap */
.flex-wrap-reverse /* flex-wrap: wrap-reverse */
/**
* Justify content (main axis alignment)
*/
.justify-content-start /* justify-content: flex-start */
.justify-content-end /* justify-content: flex-end */
.justify-content-center /* justify-content: center */
.justify-content-between /* justify-content: space-between */
.justify-content-around /* justify-content: space-around */
.justify-content-evenly /* justify-content: space-evenly */
/**
* Align items (cross axis alignment)
*/
.align-items-start /* align-items: flex-start */
.align-items-end /* align-items: flex-end */
.align-items-center /* align-items: center */
.align-items-baseline /* align-items: baseline */
.align-items-stretch /* align-items: stretch */
/**
* Align content (wrapped lines alignment)
*/
.align-content-start /* align-content: flex-start */
.align-content-end /* align-content: flex-end */
.align-content-center /* align-content: center */
.align-content-between /* align-content: space-between */
.align-content-around /* align-content: space-around */
.align-content-stretch /* align-content: stretch */
/**
* Align self (individual item alignment)
*/
.align-self-auto /* align-self: auto */
.align-self-start /* align-self: flex-start */
.align-self-end /* align-self: flex-end */
.align-self-center /* align-self: center */
.align-self-baseline /* align-self: baseline */
.align-self-stretch /* align-self: stretch */
/**
* Flex grow and shrink
*/
.flex-fill /* flex: 1 1 auto */
.flex-grow-0 /* flex-grow: 0 */
.flex-grow-1 /* flex-grow: 1 */
.flex-shrink-0 /* flex-shrink: 0 */
.flex-shrink-1 /* flex-shrink: 1 */
/**
* Responsive flexbox utilities (available for all above classes)
* Format: .{class}-{breakpoint}
*/
.flex-sm-row, .flex-md-column, .justify-content-lg-center, etc.Usage Examples:
<!-- Basic flexbox layout -->
<div class="d-flex justify-content-between align-items-center">
<div>Left item</div>
<div>Right item</div>
</div>
<!-- Flex direction -->
<div class="d-flex flex-column">
<div>Item 1</div>
<div>Item 2</div>
</div>
<!-- Centering -->
<div class="d-flex justify-content-center align-items-center" style="height: 200px;">
<div>Centered content</div>
</div>
<!-- Responsive flexbox -->
<div class="d-flex flex-column flex-md-row">
<div class="flex-fill">Content adapts to direction</div>
<div>Sidebar</div>
</div>Control element positioning and placement.
/**
* Position utilities
*/
.position-static /* position: static */
.position-relative /* position: relative */
.position-absolute /* position: absolute */
.position-fixed /* position: fixed */
.position-sticky /* position: sticky */
/**
* Top, bottom, start, end utilities
* Values: 0, 50, 100
*/
.top-0, .top-50, .top-100 /* top property */
.bottom-0, .bottom-50, .bottom-100 /* bottom property */
.start-0, .start-50, .start-100 /* left property (LTR) / right (RTL) */
.end-0, .end-50, .end-100 /* right property (LTR) / left (RTL) */
/**
* Translation utilities
*/
.translate-middle /* transform: translate(-50%, -50%) */
.translate-middle-x /* transform: translateX(-50%) */
.translate-middle-y /* transform: translateY(-50%) */Usage Examples:
<!-- Absolute positioning -->
<div class="position-relative" style="height: 200px;">
<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 bottom-50 start-50 translate-middle">Centered</div>
</div>
<!-- Sticky positioning -->
<div class="position-sticky top-0">Sticky header</div>
<!-- Fixed positioning -->
<button class="btn btn-primary position-fixed bottom-0 end-0 m-3">
Fixed button
</button>Control width and height of elements.
/**
* Width utilities
* Values: 25, 50, 75, 100, auto
*/
.w-25 /* width: 25% */
.w-50 /* width: 50% */
.w-75 /* width: 75% */
.w-100 /* width: 100% */
.w-auto /* width: auto */
/**
* Height utilities
*/
.h-25 /* height: 25% */
.h-50 /* height: 50% */
.h-75 /* height: 75% */
.h-100 /* height: 100% */
.h-auto /* height: auto */
/**
* Max width utilities
*/
.mw-100 /* max-width: 100% */
/**
* Max height utilities
*/
.mh-100 /* max-height: 100% */
/**
* Viewport sizing
*/
.vw-100 /* width: 100vw */
.vh-100 /* height: 100vh */
.min-vw-100 /* min-width: 100vw */
.min-vh-100 /* min-height: 100vh */Usage Examples:
<!-- Width utilities -->
<div class="w-25 bg-light p-3">25% width</div>
<div class="w-50 bg-light p-3">50% width</div>
<div class="w-100 bg-light p-3">100% width</div>
<!-- Height utilities -->
<div style="height: 200px;">
<div class="h-25 bg-primary">25% height</div>
<div class="h-50 bg-secondary">50% height</div>
</div>
<!-- Viewport sizing -->
<div class="vh-100 d-flex align-items-center justify-content-center">
Full viewport height, centered content
</div>Control text appearance, alignment, and styling.
/**
* Text alignment
*/
.text-start /* text-align: left (LTR) / right (RTL) */
.text-end /* text-align: right (LTR) / left (RTL) */
.text-center /* text-align: center */
/**
* Text wrapping
*/
.text-wrap /* white-space: normal */
.text-nowrap /* white-space: nowrap */
/**
* Text transform
*/
.text-lowercase /* text-transform: lowercase */
.text-uppercase /* text-transform: uppercase */
.text-capitalize /* text-transform: capitalize */
/**
* Font weight
*/
.fw-light /* font-weight: 300 */
.fw-lighter /* font-weight: lighter */
.fw-normal /* font-weight: 400 */
.fw-bold /* font-weight: 700 */
.fw-bolder /* font-weight: bolder */
/**
* Font style
*/
.fst-italic /* font-style: italic */
.fst-normal /* font-style: normal */
/**
* Font size
*/
.fs-1 /* Font size 1 (largest) */
.fs-2 /* Font size 2 */
.fs-3 /* Font size 3 */
.fs-4 /* Font size 4 */
.fs-5 /* Font size 5 */
.fs-6 /* Font size 6 (smallest) */
/**
* Line height
*/
.lh-1 /* line-height: 1 */
.lh-sm /* line-height: 1.25 */
.lh-base /* line-height: 1.5 */
.lh-lg /* line-height: 2 */
/**
* Text decoration
*/
.text-decoration-none /* text-decoration: none */
.text-decoration-underline /* text-decoration: underline */
.text-decoration-line-through /* text-decoration: line-through */
/**
* Responsive text alignment
*/
.text-sm-start, .text-md-center, .text-lg-end, etc.Usage Examples:
<!-- Text alignment -->
<p class="text-start">Left aligned text</p>
<p class="text-center">Center aligned text</p>
<p class="text-end">Right aligned text</p>
<!-- Text styling -->
<p class="fw-bold">Bold text</p>
<p class="fst-italic">Italic text</p>
<p class="text-uppercase">Uppercase text</p>
<p class="text-decoration-underline">Underlined text</p>
<!-- Font sizes -->
<p class="fs-1">Largest font size</p>
<p class="fs-3">Medium font size</p>
<p class="fs-6">Smallest font size</p>
<!-- Responsive text alignment -->
<p class="text-center text-md-start">Centered on mobile, left-aligned on tablets+</p>Control borders, border radius, and related styling.
/**
* Border utilities
*/
.border /* border: 1px solid */
.border-0 /* border: 0 */
.border-top /* border-top: 1px solid */
.border-end /* border-right: 1px solid (LTR) */
.border-bottom /* border-bottom: 1px solid */
.border-start /* border-left: 1px solid (LTR) */
/**
* Border radius
*/
.rounded /* border-radius: 0.375rem */
.rounded-0 /* border-radius: 0 */
.rounded-1 /* border-radius: 0.25rem */
.rounded-2 /* border-radius: 0.375rem */
.rounded-3 /* border-radius: 0.5rem */
.rounded-circle /* border-radius: 50% */
.rounded-pill /* border-radius: 50rem */
/**
* Specific corner radius
*/
.rounded-top /* Top corners rounded */
.rounded-end /* Right corners rounded (LTR) */
.rounded-bottom /* Bottom corners rounded */
.rounded-start /* Left corners rounded (LTR) *//**
* Visibility
*/
.visible /* visibility: visible */
.invisible /* visibility: hidden */
/**
* Overflow
*/
.overflow-hidden /* overflow: hidden */
.overflow-visible /* overflow: visible */
.overflow-scroll /* overflow: scroll */
.overflow-auto /* overflow: auto */
/**
* Shadow utilities
*/
.shadow-none /* box-shadow: none */
.shadow-sm /* Small shadow */
.shadow /* Regular shadow */
.shadow-lg /* Large shadow */
/**
* User select
*/
.user-select-all /* user-select: all */
.user-select-auto /* user-select: auto */
.user-select-none /* user-select: none */
/**
* Pointer events
*/
.pe-none /* pointer-events: none */
.pe-auto /* pointer-events: auto */
/**
* Screen reader utilities
*/
.visually-hidden /* Hide visually but keep for screen readers */
.visually-hidden-focusable /* Hide until focused */
/**
* Opacity utilities
*/
.opacity-0 /* opacity: 0 */
.opacity-25 /* opacity: 0.25 */
.opacity-50 /* opacity: 0.5 */
.opacity-75 /* opacity: 0.75 */
.opacity-100 /* opacity: 1 */
/**
* Object fit utilities (responsive available)
*/
.object-fit-contain /* object-fit: contain */
.object-fit-cover /* object-fit: cover */
.object-fit-fill /* object-fit: fill */
.object-fit-scale /* object-fit: scale-down */
.object-fit-none /* object-fit: none */
/**
* Float utilities (responsive available)
*/
.float-start /* float: left (LTR) / right (RTL) */
.float-end /* float: right (LTR) / left (RTL) */
.float-none /* float: none */Usage Examples:
<!-- Border and radius -->
<div class="border rounded p-3">Bordered with rounded corners</div>
<div class="border-bottom border-primary">Bottom border only</div>
<img src="..." class="rounded-circle" alt="Circular image">
<!-- Shadow -->
<div class="shadow-lg p-3 bg-white">Large shadow</div>
<!-- Overflow -->
<div class="overflow-hidden" style="height: 100px;">
Content that will be clipped
</div>
<!-- Screen reader -->
<span class="visually-hidden">Screen reader only text</span>
<!-- Opacity -->
<div class="opacity-50">50% opacity content</div>
<img src="..." class="opacity-75" alt="75% opacity image">
<!-- Object fit -->
<img src="..." class="object-fit-cover" style="width: 200px; height: 200px;" alt="Cover fit">
<img src="..." class="object-fit-contain" style="width: 200px; height: 200px;" alt="Contain fit">
<!-- Float -->
<div class="float-start">Float to start (left in LTR)</div>
<div class="float-end">Float to end (right in LTR)</div>
<div class="clearfix">
<div class="float-start">Floated content</div>
<div class="float-none">Normal flow content</div>
</div>Additional utility classes for specialized layout and behavior needs.
/**
* Clearfix - Clear floated elements
*/
.clearfix /* Clears floated children */
/**
* Colored background utilities
*/
.bg-body /* Background color matching body */
.bg-body-secondary /* Secondary body background color */
.bg-body-tertiary /* Tertiary body background color */
/**
* Colored links with theme colors
*/
.link-primary /* Primary theme color link */
.link-secondary /* Secondary theme color link */
.link-success /* Success theme color link */
.link-danger /* Danger theme color link */
.link-warning /* Warning theme color link */
.link-info /* Info theme color link */
.link-light /* Light theme color link */
.link-dark /* Dark theme color link */
.link-body-emphasis /* Body emphasis color link */
/**
* Focus ring utilities
*/
.focus-ring /* Custom focus ring styles */
/**
* Icon link helpers
*/
.icon-link /* Icon and text link styling */
.icon-link-hover /* Hover effects for icon links */
/**
* Aspect ratio utilities
*/
.ratio /* Container for aspect ratio content */
.ratio-1x1 /* 1:1 aspect ratio (square) */
.ratio-4x3 /* 4:3 aspect ratio */
.ratio-16x9 /* 16:9 aspect ratio (widescreen) */
.ratio-21x9 /* 21:9 aspect ratio (ultra-wide) */
/**
* Stack utilities (flexbox shortcuts)
*/
.hstack /* Horizontal flex stack */
.vstack /* Vertical flex stack */
/**
* Stretched link
*/
.stretched-link /* Stretch link to cover parent */
/**
* Text truncation
*/
.text-truncate /* Truncate text with ellipsis */
/**
* Vertical rule divider
*/
.vr /* Vertical rule (divider line) */
/**
* Visually hidden (improved)
*/
.visually-hidden /* Hide visually but available to screen readers */
.visually-hidden-focusable /* Hidden until focused */
/**
* Position helpers
*/
.position-static /* position: static */
.position-relative /* position: relative */
.position-absolute /* position: absolute */
.position-fixed /* position: fixed */
.position-sticky /* position: sticky */Usage Examples:
<!-- Clearfix for floated elements -->
<div class="clearfix">
<div class="float-start">Floated left</div>
<div class="float-end">Floated right</div>
</div>
<!-- Colored links -->
<a href="#" class="link-primary">Primary link</a>
<a href="#" class="link-danger">Danger link</a>
<!-- Aspect ratios for responsive media -->
<div class="ratio ratio-16x9">
<iframe src="https://www.youtube.com/embed/..."></iframe>
</div>
<div class="ratio ratio-1x1">
<img src="..." alt="Square aspect ratio">
</div>
<!-- Stacks for easy flexbox layouts -->
<div class="hstack gap-3">
<div>Item 1</div>
<div>Item 2</div>
<div class="ms-auto">Auto-margin item</div>
</div>
<div class="vstack gap-2">
<div>First item</div>
<div>Second item</div>
<div>Third item</div>
</div>
<!-- Stretched link (makes entire card clickable) -->
<div class="card" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text.</p>
<a href="#" class="stretched-link">Go somewhere</a>
</div>
</div>
<!-- Text truncation -->
<div class="col-2">
<p class="text-truncate">This text will be truncated with ellipsis if it's too long.</p>
</div>
<!-- Vertical rule divider -->
<div class="hstack">
<div>First item</div>
<div class="vr"></div>
<div>Second item</div>
</div>
<!-- Icon links -->
<a class="icon-link" href="#">
<svg class="bi" width="16" height="16"><use xlink:href="#box-seam"></use></svg>
Icon link
</a>
<!-- Focus ring for custom focus styles -->
<button type="button" class="btn btn-outline-primary focus-ring">
Custom focus button
</button>Most utility classes have responsive variants that apply at specific breakpoints:
// Format: .{utility}-{breakpoint}-{value}
// Examples:
.m-2 // Margin 2 at all sizes
.m-md-4 // Margin 4 at medium size and up
.d-none // Hidden at all sizes
.d-lg-block // Block display at large size and up
.text-center // Center aligned at all sizes
.text-sm-start // Left aligned at small size and up