Bootstrap Text Alignment: Center, Right and Vertical Align

Bootstrap has utility classes for every kind of alignment: text-center and text-end for text, align-middle for inline elements and table cells, float-end for floating an element to the right, and flexbox classes for centering things vertically. This guide covers each one in Bootstrap 5.3, with the responsive versions, how to align text right or center it only on some screen sizes, how to vertically align content, and what replaced Bootstrap 4’s text-left, text-right, float-left, and float-right.

Text alignment classes

Class	CSS	Use
text-start	text-align: left	Align text left (right in right-to-left layouts)
text-center	text-align: center	Center text
text-end	text-align: right	Align text right (left in right-to-left layouts)

<p class="text-start">Left-aligned text.</p>
<p class="text-center">Centered text.</p>
<p class="text-end">Right-aligned text.</p>

The classes set text-align, so they align everything inline inside the element: text, links, images, inline buttons, and badges. To center a button, put text-center on its parent:

<div class="text-center">
  <a class="btn btn-primary" href="/signup">Sign up</a>
</div>

Bootstrap 5 has no text-justify class. If you need justified text, which is usually harder to read on the web, add text-align: justify in your own CSS.

Responsive text alignment

Add a breakpoint to align text differently from a screen size up: text-sm-*, text-md-*, text-lg-*, text-xl-*, and text-xxl-*.

<p class="text-center text-md-start">
  Centered on phones, left-aligned from 768px up.
</p>

A common use is a footer row that’s centered on phones and split left and right on larger screens:

<div class="row">
  <div class="col-md-6 text-center text-md-start">© 2026 Acme</div>
  <div class="col-md-6 text-center text-md-end">
    <a href="/privacy">Privacy</a> · <a href="/terms">Terms</a>
  </div>
</div>

The breakpoints are 576px (sm), 768px (md), 992px (lg), 1200px (xl), and 1400px (xxl). See the breakpoints guide for how they work.

Align right: text, buttons, and blocks

“Align right” means different things depending on the element:

• Text or inline content: text-end on the element or its parent.
• A block element with a set width, such as a card: ms-auto pushes it to the right.
• Items in a flex row, such as a navbar’s links: ms-auto on the item, or justify-content-end on the row.
• A floated element that text wraps around: float-end.

<!-- Push a button to the right of a flex row -->
<div class="d-flex align-items-center">
  <h2 class="h5 mb-0">Orders</h2>
  <a class="btn btn-sm btn-primary ms-auto" href="/orders/new">New order</a>
</div>

<!-- A fixed-width block aligned right -->
<div class="card ms-auto" style="max-width: 20rem;">
  <div class="card-body">Summary</div>
</div>

Center text and elements

• Text and inline content: text-center.
• A block with a width: mx-auto, for example <div class="mx-auto" style="max-width: 40rem;">.
• Columns in a row: justify-content-center on the .row.
• Both horizontally and vertically: flexbox, as shown below.

The centering guide compares every method in more detail.

Vertical alignment

Inline elements and table cells: align-*

The align-* classes set vertical-align. They only work on inline, inline-block, inline-table, and table cell elements:

Class	CSS
align-baseline	vertical-align: baseline
align-top	vertical-align: top
align-middle	vertical-align: middle
align-bottom	vertical-align: bottom
align-text-top	vertical-align: text-top
align-text-bottom	vertical-align: text-bottom

<!-- Line up an icon with the text next to it -->
<i class="bi bi-check-circle align-middle"></i> <span class="align-middle">Done</span>

<!-- Vertically center every cell in a table -->
<table class="table align-middle">
  ...
</table>

align-middle on a <table> vertically centers all its cells, which is useful when rows contain avatars or buttons. See the table guide for more.

Block elements: use flexbox

vertical-align does nothing on a block element such as a <div>. To vertically center content inside a box, make the box a flex container:

<div class="d-flex align-items-center justify-content-center bg-body-tertiary" style="height: 240px;">
  <p class="mb-0">Centered both ways</p>
</div>

• align-items-start, align-items-center, and align-items-end set the vertical position of the items.
• justify-content-* sets the horizontal position.
• align-self-* changes one item only.

For a column in a grid row, put align-items-center on the .row to vertically center all columns, or align-self-center on one column:

<div class="row align-items-center" style="min-height: 200px;">
  <div class="col">Vertically centered</div>
  <div class="col">So is this</div>
</div>

The flexbox utilities guide covers every flex class.

Float classes

float-start, float-end, and float-none float an element left, right, or not at all, so text wraps around it:

<img src="author.jpg" class="float-start me-3 mb-2 rounded" width="96" height="96" alt="Sam Lee">
<p>Sam Lee writes about design systems and front-end tooling...</p>

Each has responsive versions, such as float-md-end, that apply from that breakpoint up:

<img src="chart.png" class="float-md-end ms-md-3 mb-3 img-fluid" alt="Sales chart">

Floats are best for wrapping text around an image. For layouts, such as putting a button on the right of a header, use flexbox with ms-auto instead. Floats have no effect on flex items.

Clear floats with clearfix

A parent that contains only floated children collapses to zero height. Add clearfix to the parent to fix it:

<div class="clearfix">
  <button class="btn btn-secondary float-start">Back</button>
  <button class="btn btn-primary float-end">Next</button>
</div>

Other text utilities

Class	What it does
text-wrap	Allows text to wrap (the default)
text-nowrap	Keeps text on one line
text-truncate	Cuts long text with …, on a block or inline-block element
text-break	Breaks long words or URLs so they don’t overflow

Font size, weight, case, and line height utilities are covered in the typography guide.

Bootstrap 4 to Bootstrap 5

Bootstrap 5 renamed left and right to start and end, so the same classes work in right-to-left languages:

Bootstrap 4	Bootstrap 5
text-left	text-start
text-right	text-end
text-md-right	text-md-end
float-left	float-start
float-right	float-end
ml-auto, mr-auto	ms-auto, me-auto
text-justify	Removed

text-center, align-middle, and the other vertical alignment classes are unchanged. The cheat sheet lists the other renamed classes.

FAQ

How do I center text in Bootstrap 5?

Add text-center to the element, or to its parent to center everything inside it. For responsive centering, combine it with a breakpoint class, such as text-center text-md-start to center on phones and align left from 768px up.

How do I align text right in Bootstrap 5?

Use text-end. It replaced Bootstrap 4’s text-right. To align right only from a breakpoint up, use text-md-end or another breakpoint. For a block element or a flex item, use ms-auto instead.

Why doesn’t align-middle work on my div?

The align-* classes set vertical-align, which only affects inline, inline-block, and table cell elements. To vertically center content in a <div>, use flexbox: d-flex align-items-center on the parent.

How do I vertically center a column in Bootstrap?

Add align-items-center to the .row to vertically center every column, or align-self-center to a single column. The row needs a height taller than the content, for example from a taller neighboring column or a min-height.

What replaced float-right in Bootstrap 5?

float-end replaced float-right, and float-start replaced float-left. Responsive versions such as float-md-end also work. For layouts, flexbox with ms-auto is usually a better choice than floats.

Is there a text-justify class in Bootstrap 5?

No. Bootstrap 5 removed text-justify. Add text-align: justify in your own CSS if you need it.