Spacing, display, flex, borders and shadows.
✍️ 3 exercises + code challenge in this lessonUtility classes apply one CSS property each, so you rarely need custom CSS:
m-3, mt-2, px-4, py-5, mx-auto (sizes 0–5)d-none, d-md-block, d-flexjustify-content-between, align-items-center, gap-3border, rounded-3, rounded-circleshadow-sm, shadow, shadow-lgw-50, h-100Mastering Bootstrap Utilities helps you write clean and reliable Bootstrap code. Follow standard conventions, test edge cases, and keep logic simple. Try running the code example below and complete the exercises to build confidence.
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<div class="container py-3">
<div class="d-flex justify-content-between align-items-center p-3 mb-3 bg-light border rounded-3 shadow-sm">
<strong>Flexbox with utilities</strong>
<span class="badge text-bg-primary">gap-2</span>
</div>
<div class="d-flex gap-2 mb-3">
<div class="p-3 text-bg-primary rounded">p-3</div>
<div class="px-5 py-2 text-bg-success rounded-pill">px-5 py-2</div>
<div class="p-4 text-bg-danger rounded-circle">●</div>
</div>
<div class="w-50 mx-auto p-2 border border-2 border-warning text-center shadow-lg">w-50 mx-auto shadow-lg</div>
<p class="d-none d-md-block mt-3 text-success">Visible only on md screens and wider.</p>
</div>Check what you learned in “Bootstrap Utilities”.
Add margin-top of size 3.
<div class="">Spaced</div>
Which class turns an element into a flex container?
Give the div the classes "d-flex justify-content-between".
Free sign-in required · Google login available
Stuck on something?
Ask the community in the CodesInTech forum.
Need a developer?
Learning on your own is great — and when you need professional help, our team builds custom software, websites and mobile apps for clients worldwide.
Explore Our Services