container, container-fluid and breakpoints.
✍️ 3 exercises + code challenge in this lessonContainers wrap your content and set its width and padding:
.container: a fixed width that changes at each breakpoint..container-fluid: always 100% wide..container-md: 100% wide until the md breakpoint, then fixed.sm ≥576px, md ≥768px, lg ≥992px, xl ≥1200px, xxl ≥1400px.
Mastering Bootstrap Containers 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 bg-primary-subtle border p-3 my-2">.container (fixed width)</div>
<div class="container-fluid bg-success-subtle border p-3 my-2">.container-fluid (full width)</div>
<div class="container-md bg-warning-subtle border p-3 my-2">.container-md</div>Check what you learned in “Bootstrap Containers”.
Use a container that is always 100% wide.
<div class="">...</div>
At which width does the md breakpoint start?
Wrap the heading in a div with the class "container".
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