Text alignment
Alignment utilities left-align, centre or right-align text, and can change by screen size.
In this page:
Syntax
<p class="text-start">left</p>
<p class="text-center">center</p>
<p class="text-end">right</p>Text alignment
Use .text-start, .text-center and .text-end for alignment (start and end respect right-to-left languages). Breakpoint versions such as .text-md-center apply from that size up. .text-wrap, .text-nowrap and .text-truncate control wrapping.
Note:
Bootstrap 5 uses start and end instead of left and right.
Example: Text alignment
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body class="p-3">
<div class="container">
<p class="text-start">Start aligned</p>
<p class="text-center">Centre aligned</p>
<p class="text-end">End aligned</p>
<p class="text-center text-md-end">Centred on phones, end aligned from md</p>
<div class="text-truncate border" style="max-width: 12rem">This long text is truncated with an ellipsis</div>
</div>
</body>
</html>Live Example
Related Topics
Common Mistakes
- Using text-left in Bootstrap 5
- Forgetting breakpoint versions
- Truncating without a fixed width
Chapter Summary
- text-start, text-center, text-end
- Breakpoint versions exist
- text-nowrap and text-truncate
- Works with RTL languages
🔒
Chapter Quiz — Complete all 7 topics to unlock
0/7 topics done
Complete these topics first: