Margin utilities
Margin utilities add space outside an element, on any side and at any size.
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
The pattern is m{side}-{size}: sides are t, b, s (start), e (end), x (horizontal), y (vertical) or blank for all. Sizes run from 0 to 5, plus auto and negative values. mx-auto centres a block element horizontally, and breakpoint versions like mt-md-4 exist.
Note:
mx-auto needs a set width to centre a block.
Example: 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
- Forgetting the size number
- Using ml and mr from Bootstrap 4
- Expecting margins to collapse consistently
Chapter Summary
- m{side}-{size}
- Sides: t b s e x y
- Sizes 0-5, auto
- Use mx-auto to centre
🔒
Chapter Quiz — Complete all 7 topics to unlock
0/7 topics done
Complete these topics first: