Bootstrap classes overview
Nearly everything in Bootstrap is a class name, from layout and spacing to colours and components.
In this page:
Syntax
<button class="btn btn-primary">text</button>
<div class="card shadow">...</div>Bootstrap classes overview
Components use base classes such as .btn, .card and .navbar plus modifiers like .btn-primary. Utilities do one job, for example .mt-3 (margin), .text-center, .d-flex and .bg-dark. Combining a few classes replaces many lines of CSS.
Note:
Base class first, then modifiers, then utilities.
Example: Bootstrap classes overview
<!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 text-center">
<span class="badge text-bg-primary">badge</span>
<button class="btn btn-outline-danger btn-sm mt-3">btn + modifier + size + utility</button>
<p class="text-uppercase fw-bold text-secondary mt-3">Utilities: text-uppercase, fw-bold, text-secondary, mt-3</p>
</div>
</body>
</html>Live Example
Related Topics
Common Mistakes
- Using a modifier without its base class
- Inventing class names that do not exist
- Overriding Bootstrap with inline styles
Chapter Summary
- Base classes create components
- Modifiers change variants
- Utilities do one thing
- Combine classes to build UIs
🔒
Chapter Quiz — Complete all 7 topics to unlock
0/7 topics done
Complete these topics first: