bootstrap_ref_css_helpers

Bootstrap CSS Helper Classes Reference

Text Utilities

Convey meaning through color with text color utility classes. Links will darken on hover when these classes are applied.

Class
Description
Example


.text-primary
Primary color text
<p class="text-primary">.text-primary</p>


.text-secondary
Secondary color text
<p class="text-secondary">.text-secondary</p>


.text-success
Success color text
<p class="text-success">.text-success</p>


.text-danger
Danger color text
<p class="text-danger">.text-danger</p>


.text-warning
Warning color text
<p class="text-warning">.text-warning</p>


.text-info
Info color text
<p class="text-info">.text-info</p>


.text-light
Light color text (on dark background)
<p class="text-light bg-dark">.text-light</p>


.text-dark
Dark color text
<p class="text-dark">.text-dark</p>


.text-body
Default body color text
<p class="text-body">.text-body</p>


.text-muted
Muted text
<p class="text-muted">.text-muted</p>


.text-black-50
Black text with 50% opacity
<p class="text-black-50">.text-black-50</p>


.text-white-50
White text with 50% opacity (on dark background)
<p class="text-white-50 bg-dark">.text-white-50</p>


.text-body-emphasis
Emphasized body text
<p class="text-body-emphasis">.text-body-emphasis</p>


.text-body-secondary
Secondary body text (lighter)
<p class="text-body-secondary">.text-body-secondary</p>


.text-body-tertiary
Tertiary body text (even lighter)
<p class="text-body-tertiary">.text-body-tertiary</p>

Background Utilities

Similarly, use background utility classes to apply background colors.

Class
Description
Example


.bg-primary
Primary background color
<div class="p-3 mb-2 bg-primary text-white">.bg-primary</div>


.bg-secondary
Secondary background color
<div class="p-3 mb-2 bg-secondary text-white">.bg-secondary</div>


.bg-success
Success background color
<div class="p-3 mb-2 bg-success text-white">.bg-success</div>


.bg-danger
Danger background color
<div class="p-3 mb-2 bg-danger text-white">.bg-danger</div>


.bg-warning
Warning background color
<div class="p-3 mb-2 bg-warning text-dark">.bg-warning</div>


.bg-info
Info background color
<div class="p-3 mb-2 bg-info text-dark">.bg-info</div>


.bg-light
Light background color
<div class="p-3 mb-2 bg-light text-dark">.bg-light</div>


.bg-dark
Dark background color
<div class="p-3 mb-2 bg-dark text-white">.bg-dark</div>


.bg-body
Body background color
<div class="p-3 mb-2 bg-body text-dark">.bg-body</div>


.bg-body-secondary
Secondary body background
<div class="p-3 mb-2 bg-body-secondary text-dark">.bg-body-secondary</div>


.bg-body-tertiary
Tertiary body background
<div class="p-3 mb-2 bg-body-tertiary text-dark">.bg-body-tertiary</div>


.bg-transparent
Transparent background
<div class="p-3 mb-2 bg-transparent text-dark">.bg-transparent</div>

Other Helper Utilities

Class
Description
Example


.float-start
Floats an element to the left (start in LTR)
<div class="float-start">Float start</div>


.float-end
Floats an element to the right (end in LTR)
<div class="float-end">Float end</div>


.float-none
Disables floating for an element
<div class="float-none">Float none</div>


.mx-auto
Centers a block-level element with set width
<div class="mx-auto w-50 bg-light p-2">Centered element</div>


.clearfix
Clears floats for the container
<div class="bg-info clearfix"><button class="btn btn-secondary float-start">Floated Left</button><button class="btn btn-secondary float-end">Floated Right</button></div>


.d-block, .d-inline, .d-flex, etc.
Controls the display behavior (see Display Utilities)
<div class="d-inline p-2 bg-primary text-white">d-inline</div>


.d-none
Hides an element
<div class="d-none">Hidden element</div>


.visually-hidden
Hides an element visually but keeps it accessible to screen readers
<span class="visually-hidden">Hidden for screen readers</span>


.visually-hidden-focusable
Visually hides an element, but displays it when focused
<a class="visually-hidden-focusable" href="#content">Skip to main content</a>


.btn-close
Styles a generic close button, often used in modals and alerts
<button type="button" class="btn-close" aria-label="Close"></button>

Responsive Display Utilities

Bootstrap 5 provides powerful display utilities for showing and hiding content based on viewport size. These replace the older .visible-* and .hidden-* classes.

Use classes like .d-{breakpoint}-{displayValue} to control visibility. For example, .d-none hides an element on all screen sizes, while .d-md-block makes an element display: block on medium screens and larger. You can combine these to create complex responsive layouts.

Breakpoints: sm (small), md (medium), lg (large), xl (extra large), xxl (extra extra large). No breakpoint infix means it applies to xs (extra small) and up.

Common Display Values: none, inline, inline-block, block, grid, table, table-cell, table-row, flex, inline-flex.

Examples: .d-none: Hide on all viewports. .d-sm-block: display: block from sm breakpoint and up. .d-lg-none: Hide from lg breakpoint and up. .d-none .d-md-inline-block: Hide by default, but display: inline-block from md breakpoint and up.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <title>Responsive Display Utilities</title>
</head>
<body>
  <div class="container mt-3">
    <p>Resize this page to see how the text below changes:</p>
    <div class="p-2 bg-primary text-white d-block d-sm-none">Visible only on XS screens</div>
    <div class="p-2 bg-success text-white d-none d-sm-block d-md-none">Visible only on SM screens</div>
    <div class="p-2 bg-info text-dark d-none d-md-block d-lg-none">Visible only on MD screens</div>
    <div class="p-2 bg-warning text-dark d-none d-lg-block d-xl-none">Visible only on LG screens</div>
    <div class="p-2 bg-danger text-white d-none d-xl-block">Visible on XL and XXL screens</div>
  </div>
</body>
</html>

You can also print display utilities like .d-print-none to hide elements when printing.