In web design, text styling is crucial for conveying information and enhancing readability. Bootstrap 5 provides a series of concise classes that allow you to easily control text alignment, weight, and line height without writing complex CSS. This article will guide you through the usage of these basic text styles, making it easy for beginners to get started quickly.
I. Text Alignment¶
Text alignment determines the horizontal position of text on a page. Bootstrap 5 enables left, center, and right alignment with simple class names, and even allows flexible adjustments based on screen sizes (mobile, tablet, computer).
1. Basic Alignment¶
- Left-aligned:
.text-start(usually the default, but explicit use is clearer) - Center-aligned:
.text-center(most commonly used to horizontally center text in a container) - Right-aligned:
.text-end(less common, but useful in scenarios like navigation menus)
Example:
<!-- Left-aligned -->
<p class="text-start bg-light p-3">This text starts on the left side of the container.</p>
<!-- Center-aligned -->
<p class="text-center bg-light p-3">This text is centered in the container.</p>
<!-- Right-aligned -->
<p class="text-end bg-light p-3">This text ends on the right side of the container.</p>
Effect: The three paragraphs show left, center, and right alignment respectively. The background color and padding are only for visibility.
2. Responsive Alignment (By Screen Size)¶
Bootstrap 5 supports breakpoint-based alignment, allowing different alignment for various screen widths. Breakpoints include:
- sm: Small screens (mobile landscape, ≥576px)
- md: Medium screens (tablets, ≥768px)
- lg: Large screens (desktops, ≥992px)
- xl: Extra-large screens (≥1200px)
Syntax: text-<breakpoint>-<alignment>, e.g., .text-md-center means “center-aligned on medium screens and above.”
Example:
<!-- Left-aligned on small screens, center-aligned on large screens -->
<p class="text-sm-start text-lg-center bg-light p-3">
Left-aligned on mobile, center-aligned on desktop—responsive switching!
</p>
Effect: Text aligns left on mobile and centers on desktop/tablet.
II. Text Weight¶
Text weight (font “thickness”) affects visual hierarchy. Bootstrap 5 controls this with .font-weight-* classes.
1. Common Weight Classes¶
- Bold:
.font-weight-bold(most common for headings and emphasized content) - Normal:
.font-weight-normal(default font weight; optional but explicit) - Light:
.font-weight-light(thinner font for secondary content) - Bolder/Lighter:
.font-weight-bolder(bolder than parent element),.font-weight-lighter(thinner than parent element)
Example:
<!-- Bold heading -->
<h1 class="font-weight-bold">This is a bold heading</h1>
<!-- Normal paragraph -->
<p class="font-weight-normal">This is regular-weight text (default behavior).</p>
<!-- Light text -->
<p class="font-weight-light">This is light-weight text for secondary information.</p>
<!-- Bolder than parent -->
<p class="font-weight-bolder">This text is bolder than its parent</p>
III. Line Height¶
Line height (vertical spacing between text lines) improves readability. Bootstrap 5 uses .line-height-* classes for preset line height options.
1. Common Line Height Classes¶
- Default:
.line-height-base(typically 1.5, suitable for body text) - Compact:
.line-height-sm(smaller line height for short text/navigation) - Relaxed:
.line-height-lg(larger line height for long-form reading)
Example:
<!-- Default line height (1.5) -->
<p class="line-height-base bg-light p-3">
This text has default line height (1.5), suitable for most body content.
</p>
<!-- Relaxed line height (1.8) -->
<p class="line-height-lg bg-light p-3">
This text has relaxed line height (1.8), making it easier to read long passages.
</p>
IV. Comprehensive Example: Combining Styles¶
The following HTML snippet demonstrates the combined use of alignment, weight, and line height:
<!DOCTYPE html>
<html>
<head>
<!-- Include Bootstrap 5 CSS (CDN link omitted here) -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body class="p-4">
<!-- Centered, bold heading -->
<h2 class="text-center font-weight-bold mb-4">Combined Style Example</h2>
<!-- Responsive subtitle: left-aligned on small screens, right-aligned on large screens -->
<h5 class="text-sm-start text-lg-end font-weight-light mb-3">Subtitle: Responsive Alignment</h5>
<!-- Body text: default line height with bold emphasis -->
<p class="mb-3">
This is a regular paragraph with default line height and weight.
<span class="font-weight-bold">This is bold emphasized text</span> that needs attention.
</p>
<!-- Relaxed line height paragraph -->
<p class="line-height-lg bg-light p-3">
This text uses the relaxed line height class (.line-height-lg),
with increased vertical spacing between lines—ideal for long-form content like articles.
</p>
</body>
</html>
Summary¶
Bootstrap 5 simplifies text styling with class names, eliminating the need for custom CSS. Key takeaways:
- Alignment: Use .text-* (base + responsive: .text-sm-start, etc.).
- Weight: Use .font-weight-* (bold, normal, light).
- Line Height: Use .line-height-* (default, compact, relaxed).
Practice combining these classes to quickly create clear, readable text layouts!