Margin की Utilities
Margin utilities किसी भी side पर और किसी भी size पर एक element के बाहर space add करती हैं।
In this page:
Syntax
<div class="mt-3 mb-2 mx-auto">...</div>
<!-- m{side}-{size}: side = t, b, s, e, x, y; size = 0-5, auto -->Margin Utilities
Pattern है m{side}-{size}: sides हैं t, b, s (start), e (end), x (horizontal), y (vertical), या सारी sides के लिए blank। Sizes 0 से 5 तक चलती हैं, plus auto और negative values। mx-auto एक block element horizontally centre करता है, और mt-md-4 जैसे breakpoint versions exist करते हैं।
Note:
mx-auto को एक block centre करने के लिए एक set width चाहिए।
उदाहरण: Margin utilities
<!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">
<div class="bg-info-subtle mb-4 p-2">mb-4 (space below)</div>
<div class="bg-info-subtle ms-5 p-2 mb-2">ms-5 (margin at start)</div>
<div class="bg-info-subtle mx-auto p-2" style="width: 50%">mx-auto centres this 50% wide block</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. #}
आम गलतियां
- size number भूल जाना
- Bootstrap 4 से ml और mr इस्तेमाल करना
- यह उम्मीद करना कि margins consistently collapse होंगे
चैप्टर सारांश
- m{side}-{size} pattern इस्तेमाल होता है
- Sides: t b s e x y मिलती हैं
- Sizes 0-5, auto होती हैं
- Centre करने के लिए mx-auto इस्तेमाल करें
🔒
Chapter Quiz — Complete all 7 topics to unlock
0/7 topics done
Complete these topics first: