Text का Alignment
Alignment utilities text को left-align, centre, या right-align करती हैं, और 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
Alignment के लिए .text-start, .text-center, और .text-end इस्तेमाल करें (start और end right-to-left languages respect करते हैं)। .text-md-center जैसे breakpoint versions उस size से ऊपर apply होते हैं। .text-wrap, .text-nowrap, और .text-truncate wrapping control करते हैं।
Note:
Bootstrap 5 left और right की बजाय start और end इस्तेमाल करता है।
उदाहरण: 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/chapter_summary/browser_support: on Hindi pages the
view already swaps in the hi_ translation fields (or blanks these
out if untranslated), so this renders correctly for both languages
without a lang_code check here. #}
आम गलतियां
- Bootstrap 5 में text-left इस्तेमाल करना
- breakpoint versions भूल जाना
- बिना एक fixed width के truncate करना
चैप्टर सारांश
- text-start, text-center, text-end classes मिलती हैं
- Breakpoint versions exist करते हैं
- text-nowrap और text-truncate
- RTL languages के साथ काम करता है
🔒
Chapter Quiz — Complete all 7 topics to unlock
0/7 topics done
Complete these topics first: