Bootstrap: Utility Classes

Q: What's the difference between invisible and d-none ?

invisible hides the element but the element still occupies space on the page ( visibility: hidden ). d-none completely removes the element ( display: none ), so it doesn't occupy space.

Q: Can I customize the values of utility classes?

Yes, via Sass. Override the values in the $utilities map to add or modify utility class values. For example, add width values like w-15 , w-35 , or change the shadow sizes of shadow-* . With the CDN method, you cannot customize and can only use the preset values.

Last updated: 2026-08-26

1. Introduction to This Lesson

(1) Prerequisites

Bootstrap Containers & Grid System
Lesson 17 Bootstrap Icons

(2) 🎯 What You Will Learn

Using border and rounded utility classes
Controlling shadow depth
Using float and clearfix
Controlling visibility (visible/invisible) and overflow
Using sizing utility classes (w/h)

(3) The Pain Point

Alice needs to write a lot of custom CSS to adjust borders, shadows, and rounded corners on page elements—Bootstrap utility classes can do it with a single class name.

(4) The Solution

Bootstrap provides a comprehensive set of atomic CSS utility classes covering common styles like borders, rounded corners, shadows, floats, visibility, overflow, and sizing.

(5) The Benefits

No need to write custom CSS; just combine classes directly in your HTML to achieve various visual effects, significantly boosting development and debugging speed.

2. Borders

Border classes: border, border-top/end/bottom/start, border-0/1/2/3/4/5, border-{color}

(1) Border Utility Classes

Class	CSS Effect
`border`	Four-sided 1px solid `#dee2e6` border
`border-top` / `border-end` / `border-bottom` / `border-start`	Single-side border
`border-0`	Remove all borders
`border-{1-5}`	Border width 1px ~ 5px
`border-{color}`	Border color (`primary`/`success`/`danger`, etc.)

(2) Border Width Reference Table

Class	CSS	Effect	Use Case
`border-1`	`border-width: 1px`	Thinnest border	Default border, table cells
`border-2`	`border-width: 2px`	Thin border	Card border, input fields
`border-3`	`border-width: 3px`	Medium border	Emphasis border, buttons
`border-4`	`border-width: 4px`	Thick border	Section divider, title underline
`border-5`	`border-width: 5px`	Thickest border	Left accent line, warning border

▶ Example: Borders & Rounded Demo

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Borders & Rounded Demo</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container py-4">
    <h5>Border Directions</h5>
    <div class="d-flex flex-wrap gap-2 mb-4">
      <div class="border p-3">border</div>
      <div class="border-top p-3">border-top</div>
      <div class="border-end p-3">border-end</div>
      <div class="border-bottom p-3">border-bottom</div>
      <div class="border-start p-3">border-start</div>
    </div>

    <h5>Border Width</h5>
    <div class="d-flex flex-wrap gap-2 mb-4">
      <div class="border border-1 p-3">border-1</div>
      <div class="border border-2 p-3">border-2</div>
      <div class="border border-3 p-3">border-3</div>
      <div class="border border-4 p-3">border-4</div>
      <div class="border border-5 p-3">border-5</div>
    </div>

    <h5>Border Colors</h5>
    <div class="d-flex flex-wrap gap-2 mb-4">
      <div class="border border-primary p-3">primary</div>
      <div class="border border-success p-3">success</div>
      <div class="border border-danger p-3">danger</div>
      <div class="border border-warning p-3">warning</div>
      <div class="border border-info p-3">info</div>
      <div class="border border-dark p-3">dark</div>
    </div>

    <h5>Rounded Sizes</h5>
    <div class="d-flex flex-wrap gap-2 align-items-center">
      <div class="border p-3 rounded-0">rounded-0</div>
      <div class="border p-3 rounded-1">rounded-1</div>
      <div class="border p-3 rounded-2">rounded-2</div>
      <div class="border p-3 rounded-3">rounded-3</div>
      <div class="border p-3 rounded-4">rounded-4</div>
      <div class="border p-3 rounded-5">rounded-5</div>
      <div class="border rounded-circle d-inline-flex align-items-center justify-content-center" style="width:60px;height:60px;">circle</div>
      <div class="border rounded-pill px-4 py-2">rounded-pill</div>
    </div>
  </div>
</body>
</html>

▶ Try it Yourself

3. Rounded Corners

Rounded classes: rounded-0/1/2/3/4/5, rounded-circle, rounded-pill, rounded-top/end/bottom/start

(1) Rounded Sizes Reference

Class	border-radius	Effect
`rounded-0`	0 (No rounding)	Square corners
`rounded-1`	0.125rem (2px)	Slight rounding
`rounded-2`	0.25rem (4px)	Small rounding
`rounded-3`	0.375rem (6px)	Default rounding
`rounded-4`	0.5rem (8px)	Medium rounding
`rounded-5`	0.75rem (12px)	Large rounding
`rounded-circle`	50% (Perfect circle)	Circle
`rounded-pill`	100rem (Pill shape)	Pill shape

(2) Single-Side Rounding

Class	Description
`rounded-top`	Rounded top two corners
`rounded-end`	Rounded right two corners
`rounded-bottom`	Rounded bottom two corners
`rounded-start`	Rounded left two corners

HTML

<img src="https://via.placeholder.com/100" class="rounded-circle" width="100" height="100" alt="Avatar">
<button class="btn btn-primary rounded-pill px-4">Pill Button</button>
<div class="rounded-4 p-3 bg-light border">Extra rounded corners</div>

▶ Try it Yourself

▶ Example: Border Effects Gallery

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Border Effects Gallery</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container py-4">
    <div class="row g-4">
      <div class="col-md-4"><div class="border border-primary p-3 rounded">Primary Border</div></div>
      <div class="col-md-4"><div class="border border-success border-3 p-3 rounded-3">Success Thick</div></div>
      <div class="col-md-4"><div class="border border-danger border-5 p-3 rounded-pill">Danger Pill</div></div>
      <div class="col-md-4"><div class="border-top border-warning border-4 p-3">Top Only</div></div>
      <div class="col-md-4"><div class="border-start border-info border-5 ps-3">Start Accent</div></div>
      <div class="col-md-4"><div class="border-0 bg-light p-3 rounded-circle text-center" style="width:80px;height:80px;">No Border</div></div>
    </div>
  </div>
</body>
</html>

▶ Try it Yourself

Shadow classes: shadow-none, shadow-sm, shadow, shadow-lg

(1) Shadow Comparison Table

Class	CSS box-shadow	Visual Depth	Use Case
`shadow-none`	No shadow	Flat	Tables, lists, card groups
`shadow-sm`	`0 0.125rem 0.25rem`	Shallow	Default cards, small widgets
`shadow`	`0 0.5rem 1rem`	Medium	Dropdowns, popovers
`shadow-lg`	`0 1rem 3rem`	Deep	Modals, Toasts, notifications

HTML

<div class="shadow-none p-3 mb-3 bg-light rounded">No shadow</div>
<div class="shadow-sm p-3 mb-3 bg-body rounded">Small shadow</div>
<div class="shadow p-3 mb-3 bg-body rounded">Regular shadow</div>
<div class="shadow-lg p-3 mb-3 bg-body rounded">Large shadow</div>

▶ Try it Yourself

▶ Example: Shadow Depth Comparison

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Shadow Depth Comparison</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <style>
    .shadow-card { transition: transform 0.2s, box-shadow 0.2s; cursor: default; }
    .shadow-card:hover { transform: translateY(-4px); }
  </style>
</head>
<body>
  <div class="container py-4">
    <h2 class="mb-4">Shadow Depth Scale</h2>
    <div class="row g-4">
      <div class="col-md-3">
        <div class="card shadow-none p-4 text-center shadow-card h-100 border">
          <div class="display-6 text-body-tertiary mb-2">0</div>
          <h5>shadow-none</h5>
          <p class="text-body-secondary small mb-0">No shadow, flat design. Good for tables and card groups.</p>
        </div>
      </div>
      <div class="col-md-3">
        <div class="card shadow-sm p-4 text-center shadow-card h-100">
          <div class="display-6 text-secondary mb-2">1</div>
          <h5>shadow-sm</h5>
          <p class="text-body-secondary small mb-0">Subtle depth. Default for cards, small UI widgets.</p>
        </div>
      </div>
      <div class="col-md-3">
        <div class="card shadow p-4 text-center shadow-card h-100">
          <div class="display-6 text-body mb-2">2</div>
          <h5>shadow</h5>
          <p class="text-body-secondary small mb-0">Moderate depth. Used for dropdowns and popovers.</p>
        </div>
      </div>
      <div class="col-md-3">
        <div class="card shadow-lg p-4 text-center shadow-card h-100">
          <div class="display-6 text-dark mb-2">3</div>
          <h5>shadow-lg</h5>
          <p class="text-body-secondary small mb-0">Prominent depth. Ideal for modals, toasts, notifications.</p>
        </div>
      </div>
    </div>

    <h2 class="mt-5 mb-4">Combined Effects</h2>
    <div class="d-flex gap-3 flex-wrap">
      <div class="card shadow-sm rounded-3 p-4" style="width:200px;">shadow-sm + rounded-3</div>
      <div class="card shadow rounded-4 border-0 p-4" style="width:200px;">shadow + rounded-4</div>
      <div class="card shadow-lg rounded-pill px-4 py-3 text-center" style="width:220px;">shadow-lg + pill</div>
    </div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

▶ Try it Yourself

4. Floats & Clearfix

Class	Effect
`float-start`	`float: left`
`float-end`	`float: right`
`float-none`	`float: none`
`clearfix`	Clear float (used on parent container)

HTML

<div class="clearfix">
  <div class="float-start bg-primary text-white p-3 rounded">Float left</div>
  <div class="float-end bg-success text-white p-3 rounded">Float right</div>
</div>

▶ Try it Yourself

(1) Float vs Flex vs Grid Layout Choice

Dimension	Float Layout	Flexbox Layout	CSS Grid Layout
Bootstrap class	`float-start/end` + `clearfix`	`d-flex` + `flex-*`	`row` + `col-*`
Use Case	Text wrapping around images, simple left-right arrangement	One-dimensional arrangement (row or column), centering, equal distribution	Two-dimensional grid, multi-row/column, complex layouts
Responsive Support	Limited (`float-md-start`)	Rich (`flex-md-row`, etc.)	Rich (`col-md-6`, etc.)
Alignment Capabilities	Weak (requires extra clearfix)	Strong (`align-items-` `justify-content-`)	Strong (`align-self-` `justify-items-`)
Bootstrap Recommendation	⚠ Not recommended (only for text wrapping)	✅ Recommended (one-dimensional layout)	✅ Recommended (two-dimensional layout)

5. Visibility & Overflow

(1) Visibility

Class	CSS	Description
`visible`	`visibility: visible`	Display element
`invisible`	`visibility: hidden`	Hidden but occupies space

(2) Overflow

Class	CSS	Description
`overflow-auto`	`overflow: auto`	Scroll when overflowing
`overflow-hidden`	`overflow: hidden`	Hide overflow
`overflow-visible`	`overflow: visible`	Overflow visible (default)
`overflow-scroll`	`overflow: scroll`	Always show scrollbar

(3) Vertical Alignment

Class	CSS
`align-baseline`	`vertical-align: baseline`
`align-top`	`vertical-align: top`
`align-middle`	`vertical-align: middle`
`align-bottom`	`vertical-align: bottom`
`align-text-top`	`vertical-align: text-top`
`align-text-bottom`	`vertical-align: text-bottom`

HTML

<!-- Visibility -->
<div class="visible p-2 bg-light border">Visible element</div>
<div class="invisible p-2 bg-light border">Invisible (still occupies space)</div>

<!-- Overflow -->
<div class="overflow-auto border p-2" style="height: 80px;">Content that may overflow...</div>
<div class="overflow-hidden border p-2" style="height: 80px;">Hidden overflow content...</div>

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

▶ Try it Yourself

▶ Example: Overflow Scroll Example

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Overflow Examples</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <style>
    .overflow-box { border: 2px solid #dee2e6; border-radius: 0.5rem; padding: 0.5rem; }
  </style>
</head>
<body>
  <div class="container py-4">
    <h2 class="mb-4">Overflow Behaviors</h2>
    <div class="row g-3">
      <div class="col-md-3">
        <div class="overflow-box overflow-auto" style="height:120px;">
          <p class="fw-bold text-success">overflow-auto</p>
          <p>Scrolls when content overflows. Bootstrap provides utility classes to control how content behaves when it exceeds its container. The overflow-auto class adds scrollbars only when needed, keeping the layout clean while ensuring content remains accessible to users.</p>
        </div>
      </div>
      <div class="col-md-3">
        <div class="overflow-box overflow-hidden" style="height:120px;">
          <p class="fw-bold text-danger">overflow-hidden</p>
          <p>Content clipped. The overflow-hidden class clips content that exceeds the container boundaries, hiding any overflow without scrollbars.</p>
        </div>
      </div>
      <div class="col-md-3">
        <div class="overflow-box overflow-visible" style="height:120px;">
          <p class="fw-bold text-warning">overflow-visible</p>
          <p>Content overflows bounds. The overflow-visible class allows content to overflow beyond the container.</p>
        </div>
      </div>
      <div class="col-md-3">
        <div class="overflow-box overflow-scroll" style="height:120px;">
          <p class="fw-bold text-primary">overflow-scroll</p>
          <p>Always shows scrollbars. The overflow-scroll class forces scrollbars to always display, even when content fits.</p>
        </div>
      </div>
    </div>

    <h2 class="mt-4">Horizontal Overflow</h2>
    <div class="overflow-auto bg-light p-2 rounded border" style="white-space: nowrap; max-width: 100%;">
      <span class="badge bg-primary me-2">Tag 1</span>
      <span class="badge bg-success me-2">Tag 2</span>
      <span class="badge bg-warning me-2">Tag 3</span>
      <span class="badge bg-danger me-2">Tag 4</span>
      <span class="badge bg-info me-2">Tag 5</span>
      <span class="badge bg-dark me-2">Tag 6</span>
      <span class="badge bg-secondary me-2">Tag 7</span>
      <span class="badge bg-primary me-2">Tag 8</span>
      <span class="badge bg-success me-2">Tag 9</span>
      <span class="badge bg-warning me-2">Tag 10</span>
    </div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

▶ Try it Yourself

6. Sizing

(1) Width

Class	CSS
`w-25` / `w-50` / `w-75` / `w-100`	`width: 25%/50%/75%/100%`
`mw-100`	`max-width: 100%`
`vw-100`	`width: 100vw`
`min-vw-100`	`min-width: 100vw`

(2) Height

Class	CSS
`h-25` / `h-50` / `h-75` / `h-100`	`height: 25%/50%/75%/100%`
`mh-100`	`max-height: 100%`
`vh-100`	`height: 100vh`
`min-vh-100`	`min-height: 100vh`

HTML

<div class="w-25 bg-primary text-white p-2 rounded-1 mb-1">w-25 (25%)</div>
<div class="w-50 bg-success text-white p-2 rounded-1 mb-1">w-50 (50%)</div>
<div class="w-75 bg-info text-white p-2 rounded-1 mb-1">w-75 (75%)</div>
<div class="w-100 bg-danger text-white p-2 rounded-1 mb-1">w-100 (100%)</div>
<div class="mw-100 bg-warning p-2 rounded-1" style="width: 200%;">mw-100 (max 100%)</div>

▶ Try it Yourself

▶ Example: Width & Height Playground

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Width & Height Playground</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container py-4">
    <h2 class="mb-3">Width Classes</h2>
    <div class="mb-4">
      <div class="w-25 p-3 mb-2 bg-primary text-white rounded-1">w-25</div>
      <div class="w-50 p-3 mb-2 bg-success text-white rounded-1">w-50</div>
      <div class="w-75 p-3 mb-2 bg-info text-white rounded-1">w-75</div>
      <div class="w-100 p-3 mb-2 bg-danger text-white rounded-1">w-100</div>
    </div>

    <h2 class="mb-3">Height Classes</h2>
    <div class="d-flex gap-2 border rounded-3 p-3 mb-4" style="height:160px;">
      <div class="h-25 bg-primary text-white p-2 rounded-1 d-flex align-items-center">h-25</div>
      <div class="h-50 bg-success text-white p-2 rounded-1 d-flex align-items-center">h-50</div>
      <div class="h-75 bg-info text-white p-2 rounded-1 d-flex align-items-center">h-75</div>
      <div class="h-100 bg-danger text-white p-2 rounded-1 d-flex align-items-center">h-100</div>
    </div>

    <h2 class="mb-3">Viewport Units</h2>
    <div class="vw-100 bg-warning text-dark p-2 rounded-1 mb-2">vw-100 (100% viewport width)</div>
    <div class="min-vw-100 bg-light border p-2 rounded-1">min-vw-100 (minimum 100% viewport)</div>

    <h2 class="mt-4 mb-3">Use Case: Sidebar + Content</h2>
    <div class="d-flex border rounded-3 overflow-hidden">
      <div class="w-25 bg-dark text-white p-3">
        <p class="fw-bold mb-1">Sidebar</p>
        <small>w-25</small>
      </div>
      <div class="w-75 bg-light p-3">
        <p class="fw-bold mb-1">Main Content</p>
        <small>w-75</small>
      </div>
    </div>

    <h2 class="mt-4 mb-3">Max Constraints</h2>
    <div class="mw-100 border p-2 rounded-1 mb-2" style="width:200%; background:#f8f9fa;">mw-100 limits width to 100%</div>
    <div class="mh-100 border p-2 rounded-1" style="height:50px; background:#f8f9fa;">mh-100 allows up to 100% height</div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

▶ Try it Yourself

(1) Utility Class Structure Diagram

graph TD
    A[Bootstrap Utilities] --> B[Spacing]
    A --> C[Typography]
    A --> D[Layout]
    A --> E[Visual]
    A --> F[Interactive]
    B --> B1[m/p + {side} + {size}]
    C --> C1[text-* / fw-* / fs-*]
    D --> D1[Display d-*]
    D --> D2[Flex flex-*]
    D --> D3[Float float-*]
    D --> D4[Width/Height w-*/h-*]
    E --> E1[Border border-*]
    E --> E2[Rounded rounded-*]
    E --> E3[Shadow shadow-*]
    E --> E4[Color text-*/bg-*]
    F --> F1[Overflow overflow-*]
    F --> F2[Visibility visible/invisible]
    F --> F3[Vertical align align-*]

❓ FAQ

Q Can utility classes be mixed with component classes?

A Yes, and this is exactly Bootstrap's design philosophy. Add shadow to a card component, rounded-pill to a button, border-0 to a table—utility classes are the "condiments" for components, allowing free combination.

Q Do border-* and rounded-* support breakpoint suffixes?

A Most do not (they are implemented via CSS variable overrides), but the border class supports things like border-md-0 to remove borders at responsive breakpoints.

Q What's the difference between invisible and d-none?

A invisible hides the element but the element still occupies space on the page (visibility: hidden). d-none completely removes the element (display: none), so it doesn't occupy space.

Q When multiple utility classes conflict, which one has higher priority?

A For the same CSS property, the class defined later takes effect. Bootstrap utility classes load later, so the general priority is: component classes < utility classes < custom CSS. For example, text-primary will override a card's default color, and border-0 will override a table's border. To force an override, use !important or a higher specificity selector.

Q Can I customize the values of utility classes?

A Yes, via Sass. Override the values in the $utilities map to add or modify utility class values. For example, add width values like w-15, w-35, or change the shadow sizes of shadow-*. With the CDN method, you cannot customize and can only use the preset values.

📖 Summary

Borders: border, border-{direction}, border-{width}, border-{color}
Rounded Corners: rounded-{0-5}, rounded-circle, rounded-pill, single-side rounding
Shadows: shadow-sm, shadow, shadow-lg, shadow-none
Floats: float-start/end + clearfix; Visibility: visible/invisible
Sizing: w-{25/50/75/100}, h-{25/50/75/100}, viewport units
Overflow: overflow-auto/hidden/visible/scroll

📝 Exercises

⭐ Create three cards with different rounding: rounded-0 for a square business card style, rounded-3 for a standard card, and rounded-pill for a pill button style.
⭐⭐ Create a small shadow vs. large shadow comparison: two cards using shadow-sm and shadow-lg respectively, placed side by side.
⭐⭐⭐ Use w-50 and mx-auto to create a centered block that is 50% wide, adding border + rounded-4 + shadow.

Previous Lesson: Bootstrap Icons · Next Lesson: Practical Project: Corporate Site Homepage

Web-Tutorial Tech Team

A team of developers maintaining programming tutorials. Each tutorial is written and reviewed by developers with expertise in that field. We work to keep our content accurate and reliable — if you spot an issue, please let us know.

About Us

Bootstrap: Utility Classes

1. Introduction to This Lesson

(1) Prerequisites

(2) 🎯 What You Will Learn

(3) The Pain Point

(4) The Solution

(5) The Benefits

2. Borders

(1) Border Utility Classes

(2) Border Width Reference Table

▶ Example: Borders & Rounded Demo

3. Rounded Corners

(1) Rounded Sizes Reference

(2) Single-Side Rounding

▶ Example: Border Effects Gallery

(1) Shadow Comparison Table

▶ Example: Shadow Depth Comparison

4. Floats & Clearfix

(1) Float vs Flex vs Grid Layout Choice

5. Visibility & Overflow

(1) Visibility

(2) Overflow

(3) Vertical Alignment

▶ Example: Overflow Scroll Example

6. Sizing

(1) Width

(2) Height

▶ Example: Width & Height Playground

(1) Utility Class Structure Diagram

❓ FAQ

📖 Summary

📝 Exercises

🙏 帮我们做得更好