Utility Classes

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. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</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. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</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. Lorem ipsum dolor sit amet.</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. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</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-*]

❓ Frequently Asked Questions

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

📝 Homework

⭐ 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

404 Not Found

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

❓ Frequently Asked Questions

📖 Summary

📝 Homework

🙏 帮我们做得更好