Bootstrap 5 Utility Classes: Floating, Shadows, and Text Alignment Methods

Bootstrap 5 provides a large number of practical utility classes that help developers quickly implement common style effects without writing complex CSS. This article focuses on three basic and commonly used utility classes: floating, shadows, and text alignment, taking you through simple examples to get started easily.

1. Floating Utility Classes: Make Elements “Float”¶

Floating is a common technique in layout. Bootstrap 5 uses concise utility classes to help you quickly achieve left/right floating of elements without complex CSS.

Core Class Names and Functions¶

• float-start: Float the element to the left (default: float: left)
• float-end: Float the element to the right (default: float: right)
• clearfix: Clear floating effects (prevent parent container “collapsing”)

Example Code¶

<!-- Basic floating example -->
<div class="float-start bg-primary text-white p-3 me-2">Left-floated element</div>
<div class="float-end bg-success text-white p-3">Right-floated element</div>

<!-- Parent container with clearfix -->
<div class="clearfix bg-light p-3 mt-2">
  This is the parent container. After adding clearfix, it won't collapse due to child element floating.
</div>

Tips¶

• Parent container height: If the parent container has no height, it will collapse after child elements float. In this case, the clearfix class must be added to the parent container.
• Document flow: Floated elements default to out-of-document flow. Use margin (e.g., me-2) to avoid overlap.

2. Shadow Utility Classes: One-Click 3D Effect¶

Shadows add depth to elements. Bootstrap 5 predefines multiple shadow intensities without manually writing box-shadow.

Core Class Names and Functions¶

• shadow-sm: Slight shadow (light shadow)
• shadow: Default shadow (standard intensity)
• shadow-lg: Strong shadow (deep shadow)
• no-shadow: Remove shadow (no shadow effect)

Example Code¶

<div class="shadow-sm p-3 bg-white rounded">Slight shadow</div>
<div class="shadow p-3 bg-white rounded mt-2">Default shadow</div>
<div class="shadow-lg p-3 bg-white rounded mt-2">Strong shadow</div>
<div class="no-shadow p-3 bg-white rounded mt-2">No shadow</div>

Tips¶

• Visual effect only: Shadows do not affect layout, suitable for elements needing “floating” like buttons and cards.
• Combine with rounded: Pair with the rounded class for softer shadow effects.

3. Text Alignment Utility Classes: Quick Text Direction Control¶

Text alignment is a basic typography task. Bootstrap 5 uses utility classes to control horizontal/vertical alignment with responsive adaptation.

Horizontal Alignment Classes¶

• text-start: Left-aligned (default)
• text-center: Center-aligned
• text-end: Right-aligned
• Responsive versions: e.g., text-md-center (centered on medium screens and above)

Vertical Alignment Classes¶

• text-top: Align text to the top
• text-middle: Align text to the middle
• text-bottom: Align text to the bottom

Example Code¶

<!-- Horizontal alignment -->
<p class="text-start bg-light p-2">Left-aligned: This is left-aligned text for body content.</p>
<p class="text-center bg-light p-2">Center-aligned: This is centered title text for emphasis.</p>
<p class="text-end bg-light p-2">Right-aligned: This is right-aligned auxiliary text.</p>

<!-- Responsive example: right-aligned on small screens, centered on large screens -->
<p class="text-sm-end text-md-center bg-light p-2">
  Right-aligned on small screens, centered on large screens: Adapt to different devices
</p>

<!-- Vertical alignment (used with line height) -->
<div class="d-flex align-items-center bg-light p-2" style="height: 50px;">
  <span class="text-top">Top-aligned</span>
  <span class="text-middle">Middle-aligned</span>
  <span class="text-bottom">Bottom-aligned</span>
</div>

Tips¶

• Vertical alignment requirement: Combine with d-flex and align-items-* for vertical alignment; text-* alone controls horizontal alignment.
• Responsive format: text-[breakpoint]-[alignment], where breakpoints include sm (small), md (medium), lg (large), etc.

Summary¶

Bootstrap 5 utility classes improve style development efficiency. The three core utilities covered here are:
- Use clearfix to prevent parent container collapse when floating.
- Choose shadow intensity based on design needs.
- Text alignment supports horizontal/vertical alignment and responsive adaptation.

It is recommended to memorize these class names for quick application. After proficiency, explore more utilities (e.g., background colors, spacing) to further enhance development efficiency!

Quick Test: Copy the code below into an HTML file and include Bootstrap 5 CDN:

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">