Text
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.
Start in minutes and get help from a real person whenever you need it.
<p class="text-center text-sm-start text-lg-end border rounded-3 p-2 mb-0">Start in minutes and get help from a real person whenever you need it.</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: Start in minutes and get help from a real person whenever you need it.
</div>
<span class="badge text-bg-primary text-wrap text-start">text-wrap badge: Start in minutes and get help from a real person whenever you need it.</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">
Sellers get professional photos, floor plans and a marketing plan included. Friendly people answer your questions quickly, by phone, chat or email.
</div>
<span class="d-inline-block text-truncate border rounded-3 p-2" style="max-width:150px">Find the home that fits your life</span>
</div>5Break long words
text-break wraps very long strings that have no spaces.
xenoera-hub-aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
<p class="text-break border rounded-3 p-2 mb-0 small" style="max-width:18rem">xenoera-hub-aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>6Text transform
text-lowercase, text-uppercase and text-capitalize.
<div class="d-grid gap-1">
<span class="text-lowercase">Moving made simple</span> <span class="text-uppercase">Moving made simple</span> <span class="text-capitalize">smart update clear workflow</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.
Most of our homes sell within six weeks, often above the asking price. fst-normal inside Bright journey honest
<p class="fst-italic mb-0">Most of our homes sell within six weeks, often above the asking price. <span class="fst-normal fw-semibold">fst-normal inside</span> Bright journey honest</p>10Line height
lh-1, lh-sm, lh-base and lh-lg on the same paragraph.
lh-1Our rental team manages repairs, payments and tenants for landlords. Mortgage advisors help you understand what you can afford before you start.
lh-smOur rental team manages repairs, payments and tenants for landlords. Mortgage advisors help you understand what you can afford before you start.
lh-baseOur rental team manages repairs, payments and tenants for landlords. Mortgage advisors help you understand what you can afford before you start.
lh-lgOur rental team manages repairs, payments and tenants for landlords. Mortgage advisors help you understand what you can afford before you start.
<div class="row g-3 small">
<div class="col-6 col-md-3">
<code>lh-1</code>
<p class="lh-1 mb-0">Our rental team manages repairs, payments and tenants for landlords. Mortgage advisors help you understand what you can afford before you start.</p>
</div>
<div class="col-6 col-md-3">
<code>lh-sm</code>
<p class="lh-sm mb-0">Our rental team manages repairs, payments and tenants for landlords. Mortgage advisors help you understand what you can afford before you start.</p>
</div>
<div class="col-6 col-md-3">
<code>lh-base</code>
<p class="lh-base mb-0">Our rental team manages repairs, payments and tenants for landlords. Mortgage advisors help you understand what you can afford before you start.</p>
</div>
<div class="col-6 col-md-3">
<code>lh-lg</code>
<p class="lh-lg mb-0">Our rental team manages repairs, payments and tenants for landlords. Mortgage advisors help you understand what you can afford before you start.</p>
</div>
</div>11Monospace
font-monospace for IDs, codes and figures that should line up.
- #PO-9259 $612.62
- #ORD-8783 $852.37
- #TX-4570 $998.80
<ul class="list-unstyled mb-0 font-monospace small">
<li>#PO-9259 $612.62</li>
<li>#ORD-8783 $852.37</li>
<li>#TX-4570 $998.80</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.
Get a free, no-obligation valuation of your home within 48 hours.
Thousands of buyers already trust us, and we work hard to keep it that way.
<div>
<p class="lead">Get a free, no-obligation valuation of your home within 48 hours.</p>
<p class="small text-body-secondary mb-0">Thousands of buyers already trust us, and we work hard to keep it that way.</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.
Your next address starts here
<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">Your next address starts here</h3>
<div class="small text-body-secondary">
By <span class="fw-medium">Nora Mensah</span> · Oct 7, 2026
</div>
</header>16Truncated table cells
text-truncate with a max width keeps long names in one line inside a table.
| Name | Size |
|---|---|
| release-practical-final-version-approved.pdf | 18 MB |
| community-Austin-photos-2026-04-24.zip | 10 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">release-practical-final-version-approved.pdf</td>
<td class="text-end">18 MB</td>
</tr>
<tr>
<td class="text-truncate">community-Austin-photos-2026-04-24.zip</td>
<td class="text-end">10 MB</td>
</tr>
</tbody>
</table>17Quote typography
fs-5, fst-italic and lh-lg for a calm testimonial.
“Start in minutes and get help from a real person whenever you need it.”
<figure class="mb-0">
<blockquote class="fs-5 fst-italic lh-lg mb-2"><p class="mb-0">“Start in minutes and get help from a real person whenever you need it.”</p></blockquote>
<figcaption class="small fw-semibold text-uppercase">Jonah Alvarez</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 8 results for experience in Land.
<p class="mb-0">Found <span class="fw-semibold">8</span> results for <mark>experience</mark> in Land.</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">
$18.18
</div>
<div class="small text-body-secondary">
per month, billed yearly
</div>
</div>