Types of Containers

<div class="container">
  Fixed width
</div>

<div class="container-fluid">
  Full width
</div>

<div class="container-md">
  Responsive
</div>

<div class="container">
  <div class="container">
    Nested
  </div>
</div>

🔹 Default Container

The .container class is Bootstrap's core layout element, creating a responsive, fixed-width container that centers your content horizontally. Its maximum width adjusts at predefined breakpoints (e.g., 540px for sm, 720px for md, 960px for lg, 1140px for xl, 1320px for xxl), ensuring optimal line length and readability on all devices. It includes built-in horizontal padding (gutter) to prevent content from touching the viewport edges. This container is ideal for most website layouts, providing a structured, polished foundation that scales seamlessly from mobile to desktop without extra media queries.

<div class="container">
    <h1>Fixed Width Container</h1>
    <p>This container has a max-width that changes at breakpoints.</p>
    <button class="btn btn-primary">Click Me</button>
</div>

🔹 Fluid Container

For full-width, edge-to-edge designs, use the .container-fluid class. This container always spans 100% of the viewport width, regardless of screen size, making it perfect for hero sections, banners, or backgrounds that should extend to the very edges of the screen. Unlike the fixed-width container, it does not impose a maximum width, allowing content to flow across the entire available space. It still includes the standard horizontal gutter padding for content comfort. This is essential for modern, immersive web designs that break out of the traditional centered layout.

<div class="container-fluid">
    <h1>Full Width Container</h1>
    <p>This container spans 100% of the viewport width.</p>
</div>

🔹 Responsive Containers

Bootstrap's responsive container classes (e.g., .container-{breakpoint}) offer a hybrid approach. They remain 100% fluid until a specified minimum breakpoint is reached, at which point they adopt a fixed maximum width. For example, .container-md is full-width on screens smaller than 768px (medium breakpoint) and becomes a fixed-width container on larger screens. This provides maximum flexibility for mobile devices while ensuring content doesn't stretch uncomfortably wide on desktops. It's an excellent choice for pages that need a mobile-first, adaptive layout strategy.

<!-- 100% wide until small breakpoint -->
<div class="container-sm">Small container</div>

<!-- 100% wide until medium breakpoint -->
<div class="container-md">Medium container</div>

<!-- 100% wide until large breakpoint -->
<div class="container-lg">Large container</div>

<!-- 100% wide until extra large breakpoint -->
<div class="container-xl">XL container</div>

<!-- 100% wide until extra extra large breakpoint -->
<div class="container-xxl">XXL container</div>

🔹 Container Breakpoints

Bootstrap's grid and containers are built around a series of six core breakpoints, each defined by a minimum viewport width: X-Small (default, <576px), Small (sm, ≥576px), Medium (md, ≥768px), Large (lg, ≥992px), Extra Large (xl, ≥1200px), and Extra Extra Large (xxl, ≥1400px). These breakpoints control when layout changes occur, such as columns stacking or containers switching from fluid to fixed width. Understanding and utilizing these breakpoints is key to creating truly responsive designs that deliver an optimal experience on phones, tablets, laptops, and large monitors.

🔹 Container Padding

By default, all Bootstrap containers include horizontal padding (known as "gutters") of 12px (0.75rem) on each side. This padding creates a visual breathing room between your content and the viewport edge, enhancing readability and aesthetics. This default padding can be easily modified or removed using Bootstrap's extensive spacing utility classes. For instance, px-0 removes horizontal padding, while px-5 increases it. This system gives developers precise, consistent control over the spacing within their layouts without writing custom CSS for common adjustments.

<!-- Default padding -->
<div class="container">
    Default padding
</div>

<!-- Custom padding -->
<div class="container px-4">
    Custom padding
</div>

<!-- No padding -->
<div class="container px-0">
    No padding
</div>

🔹 Practical Example

A typical website layout using the grid system might include: a full-width header (.container-fluid), a main content area within a fixed .container featuring a .row with a .col-lg-8 for the article and a .col-lg-4 for the sidebar, and a footer in another .container. On smaller screens, the sidebar stacks below the article (.col-12). This example demonstrates how the grid provides structure, enforces consistency, and delivers a fully responsive design. It showcases the combination of containers, rows, responsive column classes, and the 12-unit system in a real-world scenario.

<!-- Hero section with fluid container -->
<div class="container-fluid bg-primary text-white py-5">
    <h1>Welcome to My Site</h1>
    <p>Full width hero section</p>
</div>

<!-- Main content with fixed container -->
<div class="container my-5">
    <h2>Main Content</h2>
    <p>This content is centered with fixed width.</p>
</div>

<!-- Footer with fluid container -->
<div class="container-fluid bg-dark text-white py-3">
    <p>© 2025 My Website</p>
</div>