Utility classes intro
Utilities are tiny single-purpose classes for spacing, colour, alignment and display.
In this page:
Syntax
<div class="mt-3 px-4 text-center bg-light">...</div>
<!-- spacing: {property}{sides}-{size} -->Utility classes intro
Spacing utilities use the pattern {property}{sides}-{size}, such as mt-3 or px-4. Text utilities include text-center and text-uppercase, colour utilities include text-primary and bg-light, and display utilities include d-none and d-flex.
Most support breakpoints, for example d-md-block.
Note:
Sizes 0 to 5 map to 0, .25rem, .5rem, 1rem, 1.5rem and 3rem.
Example: Utility classes intro
<!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-primary text-white p-3 mb-2">p-3 padding</div>
<div class="bg-secondary text-white px-5 py-1 mb-2">px-5 py-1</div>
<div class="bg-success text-white ms-4 p-2 mb-2">ms-4 margin-start</div>
<div class="bg-dark text-white text-center text-uppercase p-2">centered and uppercase</div>
</div>
</body>
</html>Live Example
Related Topics
Common Mistakes
- Writing custom margins instead of utilities
- Forgetting the size number
- Confusing m (margin) with p (padding)
Chapter Summary
- m and p are margin and padding
- t, b, s, e, x, y pick the sides
- Sizes 0 to 5 plus auto
- Add breakpoints like md
🔒
Chapter Quiz — Complete all 7 topics to unlock
0/7 topics done
Complete these topics first: