Bootstrap Utilities
Utility classes are small, single-purpose classes that apply one style each, such as adding margin, changing text color, or adding a border. Instead of writing custom CSS, you combine these tiny classes right in your HTML to build and tweak layouts fast. They are one of the biggest reasons Bootstrap feels so quick to work with.
What Are Utility Classes?
A utility class does exactly one job. For example, .text-center centers text, .fw-bold makes text bold, and .rounded rounds the corners of an element. Because each class is so focused, you can stack several together to get the exact look you want without ever leaving your HTML.
Stacking utility classes
<!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/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="p-3 mb-2 bg-light border rounded text-center">
<span class="fw-bold text-primary">Hello, utilities!</span>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>Spacing Utilities
Spacing is the most commonly used group. The class name follows a pattern: a property letter, an optional side, a dash, and a size from 0 to 5. The property is m for margin or p for padding. The side is t (top), b (bottom), s (start/left), e (end/right), x (left and right), or y (top and bottom).
Spacing in action
<!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/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="bg-primary text-white p-4 mb-3">Padded box with bottom margin</div>
<div class="bg-success text-white px-5 py-2">Wide horizontal padding</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>Borders, Shadows, and Sizing
- .border and .border-0 add or remove a border, while .border-primary sets its color.
- .rounded, .rounded-circle, and .rounded-pill control corner shapes.
- .shadow-sm, .shadow, and .shadow-lg add drop shadows of different depths.
- .w-50 and .h-100 set width and height as a percentage of the parent.
Combining visual 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/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="border border-2 border-info rounded-3 shadow p-3 w-50">
A bordered, rounded, shadowed box at 50% width.
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>Exercise: Bootstrap Utilities
In a spacing utility class like mt-3, what does the "t" stand for?
