BootstrapHow-ToBeginner · 3 min read

How to Use Text Wrap in Bootstrap: Simple Guide

In Bootstrap, you can control text wrapping using the text-wrap class to allow wrapping and text-nowrap to prevent it. These utility classes help manage how text breaks inside containers for better layout control.

📐

Syntax

Bootstrap provides two main classes to control text wrapping:

text-wrap: Allows text to wrap normally within its container.
text-nowrap: Prevents text from wrapping, keeping it on a single line.

Use these classes by adding them to any HTML element containing text.

html

<div class="text-wrap">This text will wrap inside the container if it is too long.</div>
<div class="text-nowrap">This text will not wrap and will stay on one line, possibly overflowing.</div>

Output

Two lines of text: the first wraps if needed, the second stays on one line without wrapping.

💻

Example

This example shows how text-wrap and text-nowrap affect text inside a fixed-width container.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap Text Wrap Example</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <style>
    .box {
      width: 200px;
      border: 1px solid #333;
      margin-bottom: 1rem;
      padding: 0.5rem;
    }
  </style>
</head>
<body>
  <div class="box text-wrap">
    This is a very long text that will wrap inside the box because of the <code>text-wrap</code> class.
  </div>
  <div class="box text-nowrap">
    This is a very long text that will not wrap and may overflow the box because of the <code>text-nowrap</code> class.
  </div>
</body>
</html>

Output

Two boxes each 200px wide: the first box's text breaks into multiple lines, the second box's text stays on one line and overflows horizontally.

⚠️

Common Pitfalls

Common mistakes when using text wrap in Bootstrap include:

Not setting a container width, so wrapping behavior is unclear.
Using text-nowrap without considering overflow, causing hidden or clipped text.
Expecting text-wrap to break words forcibly; it only wraps at normal break points like spaces.

Always test your layout on different screen sizes to ensure text behaves as expected.

html

<!-- Wrong: no container width, text-nowrap causes overflow -->
<div class="text-nowrap">This text will overflow without a container width.</div>

<!-- Right: fixed width container with text-nowrap and overflow handling -->
<div style="width: 150px; overflow-x: auto;" class="text-nowrap">
  This text will not wrap but can be scrolled horizontally.
</div>

Output

First line: text overflows container with no scroll. Second line: text stays on one line but container scrolls horizontally.

📊

Quick Reference

Class	Effect
text-wrap	Allows text to wrap normally inside container
text-nowrap	Prevents text from wrapping, keeps on one line
overflow-auto	Adds scrollbars if content overflows container
text-break	Breaks long words to prevent overflow (Bootstrap 5+)

✅

Key Takeaways

Use text-wrap to let text wrap naturally inside containers.

Use text-nowrap to keep text on one line but watch for overflow.

Set container widths to see wrapping effects clearly.

Combine text-nowrap with overflow utilities to handle long text.

Use text-break to break long words if needed.