Module 18 : Creating Fixed & Fluid Containers
1 What is a container?
A container is the outer wrapper that holds your site's content and ties the Bootstrap grid together. It defines horizontal padding and sets a maximum width at each breakpoint so columns inside rows can align predictably. Bootstrap gives you two primary kinds:
Fixed / responsive container — .container
A responsive fixed-width container whose max-width changes at predefined breakpoints (xs, sm, md, lg, xl, xxl). On very small viewports it becomes full width; on larger screens it uses the breakpoint max-width. This is ideal when you want the page content centered within readable line-lengths.
Fluid container — .container-fluid
A 100% width container that always stretches to the viewport width. Good for full-bleed backgrounds, maps, or UI that should use the whole screen width. Use this when content must span the full viewport.
Responsive containers — .container-{breakpoint} (Bootstrap 5+)
Classes like .container-sm, .container-md, .container-lg, .container-xl, .container-xxl produce a container that is 100% wide until the named breakpoint, at which point it becomes max-width constrained. Use them when you need a container that behaves fluidly until a certain breakpoint.
How containers interact with the grid
Containers provide the horizontal padding and maximum width. Inside a container you create .row elements (which use negative margins) and .col-* (which have horizontal padding known as gutters). This pairing ensures columns line up flush with the container edges. If you use .container-fluid the visible layout will stretch full width but grid gutters/padding still apply inside rows/cols.
CSS internals (what happens under the hood)
.container uses max-width rules tied to breakpoints (e.g., max-width: 720px at md in some versions). These values are defined in Bootstrap’s Sass variables so you can customize. .container-fluid is typically width: 100%.
The grid is built on Flexbox (so rows/cols are flex containers/items). Gutters are implemented via horizontal padding on columns and negative margins on rows
2 Bootstrap CDN (v5) starter (put in the <head> of your HTML):
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet"> <meta name="viewport" content="width=device-width, initial-scale=1">
Example A — Fixed (responsive) container
<div class="container"> <header class="py-3"> <h1>My Site (fixed container)</h1> </header> <div class="row"> <div class="col-md-8"> <p>Main content that will sit inside the centered fixed container.</p> </div> <div class="col-md-4"> <aside>Sidebar</aside> </div> </div> </div>
Behavior: content will be centered and constrained to max-width values at breakpoints so on desktop it looks like a readable column width.
Example B — Fluid container (full width)
<div class="container-fluid bg-light py-4"> <div class="container"> <h2>Full-width background but centered content</h2> <p>This pattern uses container-fluid for full-bleed background, with an inner .container to constrain content.</p> </div> </div>
Pattern explanation: Use .container-fluid when you want backgrounds or decorative elements to span full width, then nest a .container to keep readable content centered. This gives you full-bleed sections without losing grid alignment.
Example C — Responsive container at a breakpoint
<!-- Fluid until 'lg' breakpoint, constrained on lg and up --> <div class="container-lg"> <p>Becomes constrained when viewport ≥ lg.</p> </div>
Use case: mobile-first header that should be full width on phones but centered on desktop.
3 — Common patterns
Full-bleed sections: combine .container-fluid (for the background) with an inner .container for content. This is more maintainable than adjusting width manually.
Avoid unnecessary nesting: don’t nest .container inside .container — it creates unexpected padding/max-width combinations. Instead use .container-fluid > .container when mixing full width backgrounds and centered content.
When to use .container-{breakpoint}: use when you want fluid behavior on small screens but fixed on larger ones (e.g., .container-md for fluid mobile but constrained tablet+).
Gutters & spacing: if you need to change horizontal spacing, use utilities (e.g., .g-0 to remove gutters on rows) before touching core CSS. This keeps your layout predictable.
Sass customization: Bootstrap exposes container max-widths through Sass variables (e.g., $container-max-widths) — override in your SCSS to tune breakpoints/widths for brand requirements.
4 — Exercises
Exercise 1 — Fixed vs fluid visual test
Create an HTML page that has:
a top navbar inside .container,
a hero section with full-bleed background (.container-fluid) but centered text using .container,
a 3-column content section inside .container.
Expected: Navbar and content centered and constrained on large screens; hero background spans full viewport width.
Exercise 2 — Responsive breakpoint container
Create two versions of a section:
using .container-md and
using .container-lg
Resize the window and observe at which width the layout becomes constrained.
Expected: .container-md will constrain at md breakpoint; .container-lg constraints at lg. should list exact pixel breakpoints they observe (compare with Bootstrap docs for the version used).
Exercise 3 — Gutters adjustment
Build a row of four items and remove gutters using .g-0. Then add horizontal spacing with margin utility classes (mx-2) to a subset of columns.
Expected: should understand the difference between removing gutters and manually adding spacing for a controlled gap.
Exercise 4 — Sass override
Using Bootstrap source via Sass, override the $container-max-widths map to change the lg max-width to 1100px. Recompile and compare layout.
Expected: can show a before/after screenshot and explain the effect on .container at lg.
5 Build & evaluate a responsive landing page using fixed and fluid containers
Objective: mixing .container and .container-fluid, and test breakpoint behavior and accessibility.
Setup
Code editor, browser, and a local static file server (or simply open the file).
Bootstrap CDN or local Bootstrap build (we recommend CDN for quick testing).
Steps
Create structure
<header class="container"> — navigation and logo.
<section class="container-fluid hero"> — hero with image/background gradient. Inside the hero, place <div class="container"> for centered hero text and CTA.
<section class="container"> — feature grid (rows/cols).
<footer class="container-fluid"> — full-width footer with inner .container.
Add responsive content
Use .row and .col-sm-6 .col-lg-4 to make feature cards responsive.
Add utility classes for spacing (py-5, mb-4, etc.).
Test across breakpoints
Use browser devtools to test xs → xxl and note when the .container constrains. Record pixel widths where layout changes.
Accessibility & performance checks
Ensure headings use the correct semantic tags (<h1> only once).
Test keyboard navigation and focus order inside the hero CTA.
Use to check layout shift and performance (full-bleed backgrounds can cause repaints; optimize images).
Deliverable
A single index.html and optional SCSS file. Provide screenshots at mobile, tablet, and desktop widths plus a one-page report: Why you used fixed/fluid containers in each section and what changes you would make for very large screens.
checklist
Correct use of .container vs .container-fluid.
Proper grid usage inside containers (rows/cols).
No unintended horizontal scroll (overflow).
Accessibility basics met (semantic headings, focusable CTAs).
breakpoint testing.
6 example
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Container Lab</title> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet"> <style> .hero { background: linear-gradient(120deg,#0d6efd 0%, #6610f2 100%); color: white; } .hero .container { padding-top: 4rem; padding-bottom: 4rem; } </style> </head> <body> <header class="container py-3"> <nav class="d-flex justify-content-between align-items-center"> <a class="navbar-brand" href="#">Brand</a> <div> <a class="btn btn-sm btn-outline-light" href="#">Sign in</a> </div> </nav> </header> <section class="container-fluid hero"> <div class="container text-center"> <h1 class="display-5">Hero title</h1> <p class="lead">A centered CTA inside a full-bleed hero.</p> <a class="btn btn-light btn-lg" href="#">Get started</a> </div> </section> <main class="container py-5"> <div class="row g-4"> <div class="col-12 col-md-6 col-lg-4"> <div class="p-3 border rounded">Feature 1</div> </div> <div class="col-12 col-md-6 col-lg-4"> <div class="p-3 border rounded">Feature 2</div> </div> <div class="col-12 col-md-6 col-lg-4"> <div class="p-3 border rounded">Feature 3</div> </div> </div> </main> <footer class="container-fluid bg-dark text-white py-3"> <div class="container"> <small>© Company</small> </div> </footer> </body> </html>
7 Research topics
Official Bootstrap Containers docs — definitions, examples, Sass variables.
Bootstrap Grid System — how rows/cols/gutters work (Flexbox-based).
Getting started with Bootstrap — quick-start and CDN options.
CSS Tricks — Flexbox guide (recommended background reading) — helps understand how the grid behaves fundamentally. (see Grid docs link).
8 (checks)
True/False: .container-fluid will always give the same horizontal padding as .container. (False — padding may differ depending on Bootstrap version and pattern; .container-fluid is full width but padding inside rows/cols is still governed by the grid.)
Multiple choice: Which class gives a container that is 100% width until the md breakpoint and then constrained?
A) .container
B) .container-md ✓
C) .container-fluid
(Correct: B).
9 Coding-specialist
Prefer utility classes for spacing and alignment; override container widths only when brand requirements demand it.
Use .container-fluid for backgrounds and full-bleed UI, but keep readable content inside .container to preserve legibility.
When customizing, edit Bootstrap’s Sass variables and recompile rather than fiddling with ad-hoc widths — it keeps the system consistent and maintainable.
No comments:
Post a Comment