Text utilities handle alignment (with responsive variants), wrapping, truncation, breaking, transforms, font size, weight and style, line height, monospace and decoration. Combine them to build headings, meta lines and price tags without touching CSS.
1Text alignment
text-start, text-center and text-end.
text-start
text-center
text-end
<div class="d-grid gap-2 small">
<p class="text-start border rounded-3 p-2 mb-0">text-start</p>
<p class="text-center border rounded-3 p-2 mb-0">text-center</p>
<p class="text-end border rounded-3 p-2 mb-0">text-end</p>
</div>2Responsive alignment
text-center text-sm-start text-lg-end changes alignment per breakpoint.
Our rental team manages repairs, payments and tenants for landlords.
<p class="text-center text-sm-start text-lg-end border rounded-3 p-2 mb-0">Our rental team manages repairs, payments and tenants for landlords.</p>3Wrap and no wrap
text-nowrap keeps text on one line, text-wrap allows wrapping (for example inside a badge).
<div class="d-grid gap-2" style="max-width:14rem">
<div class="border rounded-3 p-2 text-nowrap overflow-hidden small">
text-nowrap: Our rental team manages repairs, payments and tenants for landlords.
</div>
<span class="badge text-bg-primary text-wrap text-start">text-wrap badge: Our rental team manages repairs, payments and tenants for landlords.</span>
</div>4Truncate
text-truncate cuts a single line with an ellipsis; it needs a block or inline-block with a width.
<div class="d-grid gap-2" style="max-width:18rem">
<div class="text-truncate border rounded-3 p-2">
Start in minutes and get help from a real person whenever you need it. Get a free, no-obligation valuation of your home within 48 hours.
</div>
<span class="d-inline-block text-truncate border rounded-3 p-2" style="max-width:150px">Home is closer than you think</span>
</div>5Break long words
text-break wraps very long strings that have no spaces.
irisan-aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
<p class="text-break border rounded-3 p-2 mb-0 small" style="max-width:18rem">irisan-aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>6Text transform
text-lowercase, text-uppercase and text-capitalize.
<div class="d-grid gap-1">
<span class="text-lowercase">Sell faster with an expert at your side</span> <span class="text-uppercase">Sell faster with an expert at your side</span> <span class="text-capitalize">smart idea reliable dashboard</span>
</div>7Font sizes
fs-1 to fs-6 set the size without changing the element.
fs-1
fs-2
fs-3
fs-4
fs-5
fs-6
<div>
<p class="fs-1 mb-0">fs-1</p>
<p class="fs-2 mb-0">fs-2</p>
<p class="fs-3 mb-0">fs-3</p>
<p class="fs-4 mb-0">fs-4</p>
<p class="fs-5 mb-0">fs-5</p>
<p class="fs-6 mb-0">fs-6</p>
</div>8Font weights
fw-bold, fw-bolder, fw-semibold, fw-medium, fw-normal, fw-light and fw-lighter.
<div class="d-grid gap-1">
<span class="fw-bold">fw-bold</span><span class="fw-bolder">fw-bolder</span><span class="fw-semibold">fw-semibold</span> <span class="fw-medium">fw-medium</span><span class="fw-normal">fw-normal</span><span class="fw-light">fw-light</span><span class="fw-lighter">fw-lighter</span>
</div>9Italic and normal
fst-italic slants text, fst-normal resets it inside italic parents.
Sellers get professional photos, floor plans and a marketing plan included. fst-normal inside Secure experience honest
<p class="fst-italic mb-0">Sellers get professional photos, floor plans and a marketing plan included. <span class="fst-normal fw-semibold">fst-normal inside</span> Secure experience honest</p>10Line height
lh-1, lh-sm, lh-base and lh-lg on the same paragraph.
lh-1Friendly people answer your questions quickly, by phone, chat or email. Book viewings online and take a 3D tour before you leave the house.
lh-smFriendly people answer your questions quickly, by phone, chat or email. Book viewings online and take a 3D tour before you leave the house.
lh-baseFriendly people answer your questions quickly, by phone, chat or email. Book viewings online and take a 3D tour before you leave the house.
lh-lgFriendly people answer your questions quickly, by phone, chat or email. Book viewings online and take a 3D tour before you leave the house.
<div class="row g-3 small">
<div class="col-6 col-md-3">
<code>lh-1</code>
<p class="lh-1 mb-0">Friendly people answer your questions quickly, by phone, chat or email. Book viewings online and take a 3D tour before you leave the house.</p>
</div>
<div class="col-6 col-md-3">
<code>lh-sm</code>
<p class="lh-sm mb-0">Friendly people answer your questions quickly, by phone, chat or email. Book viewings online and take a 3D tour before you leave the house.</p>
</div>
<div class="col-6 col-md-3">
<code>lh-base</code>
<p class="lh-base mb-0">Friendly people answer your questions quickly, by phone, chat or email. Book viewings online and take a 3D tour before you leave the house.</p>
</div>
<div class="col-6 col-md-3">
<code>lh-lg</code>
<p class="lh-lg mb-0">Friendly people answer your questions quickly, by phone, chat or email. Book viewings online and take a 3D tour before you leave the house.</p>
</div>
</div>11Monospace
font-monospace for IDs, codes and figures that should line up.
- #PO-1481 $42.40
- #ORD-5954 $744.11
- #TX-5094 $353.48
<ul class="list-unstyled mb-0 font-monospace small">
<li>#PO-1481 $42.40</li>
<li>#ORD-5954 $744.11</li>
<li>#TX-5094 $353.48</li>
</ul>12Text decoration
text-decoration-underline, -line-through and -none.
<div class="d-flex flex-wrap gap-3">
<span class="text-decoration-underline">underline</span> <span class="text-decoration-line-through">line-through</span> <a href="#" class="text-decoration-none">link without underline</a>
</div>13Lead and small
lead for an intro paragraph, small for fine print.
Our local agents know every street, school and coffee shop in the area.
Our team has done this many times, so you never have to guess.
<div>
<p class="lead">Our local agents know every street, school and coffee shop in the area.</p>
<p class="small text-body-secondary mb-0">Our team has done this many times, so you never have to guess.</p>
</div>14Display headings
display-1 to display-6 for oversized hero headings.
display-4
display-5
display-6
<div>
<p class="display-4 mb-0">display-4</p>
<p class="display-5 mb-0">display-5</p>
<p class="display-6 mb-0">display-6</p>
</div>15Article header
Uppercase eyebrow, large bold title, muted meta line - all text utilities.
Local agents who know every street
<header>
<div class="text-uppercase small fw-bold text-primary">
Commercial
</div>
<h3 class="fs-2 fw-bold lh-sm text-body-emphasis mb-2">Local agents who know every street</h3>
<div class="small text-body-secondary">
By <span class="fw-medium">Finn Fischer</span> · Jan 19, 2026
</div>
</header>16Truncated table cells
text-truncate with a max width keeps long names in one line inside a table.
| Name | Size |
|---|---|
| routine-focused-final-version-approved.pdf | 24 MB |
| experience-Montreal-photos-2026-03-24.zip | 184 MB |
<table class="table table-sm small mb-0" style="table-layout:fixed">
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col" class="text-end" style="width:6rem">Size</th>
</tr>
</thead>
<tbody>
<tr>
<td class="text-truncate">routine-focused-final-version-approved.pdf</td>
<td class="text-end">24 MB</td>
</tr>
<tr>
<td class="text-truncate">experience-Montreal-photos-2026-03-24.zip</td>
<td class="text-end">184 MB</td>
</tr>
</tbody>
</table>17Quote typography
fs-5, fst-italic and lh-lg for a calm testimonial.
“We handle the paperwork, so you can focus on planning the move.”
<figure class="mb-0">
<blockquote class="fs-5 fst-italic lh-lg mb-2"><p class="mb-0">“We handle the paperwork, so you can focus on planning the move.”</p></blockquote>
<figcaption class="small fw-semibold text-uppercase">Maya Silva</figcaption>
</figure>18Long button label
text-wrap on a button lets a long label wrap on narrow screens.
<button type="button" class="btn btn-outline-primary text-wrap" style="max-width:14rem">Buy, sell or rent with confidence</button>19Highlight and marks
mark highlights a search term inside text; fw-semibold emphasises numbers.
Found 7 results for routine in Villas.
<p class="mb-0">Found <span class="fw-semibold">7</span> results for <mark>routine</mark> in Villas.</p>20Centred pricing text
text-center with fs-1, fw-bold and lh-1 for a plan price.
<div class="text-center border rounded-4 p-4" style="max-width:16rem">
<div class="text-uppercase small fw-semibold text-body-secondary">
Pro
</div>
<div class="fs-1 fw-bold lh-1 my-2">
$21.96
</div>
<div class="small text-body-secondary">
per month, billed yearly
</div>
</div>