Bootstrap Container: container vs container-fluid and Widths

A Bootstrap container is the box that holds your page content: it centers the content, limits how wide it gets on large screens, and adds padding on the sides so text never touches the edge of the window. Almost every Bootstrap layout starts with one, and the grid needs one to line up correctly. This guide covers the three kinds of container, their exact widths at each breakpoint, how to nest them with rows, and how to change their size.

The three kinds of container

<!-- Fixed width that steps up at each breakpoint -->
<div class="container">...</div>

<!-- Always 100% wide -->
<div class="container-fluid">...</div>

<!-- 100% wide until a breakpoint, then fixed steps -->
<div class="container-md">...</div>

• .container is the default. It is full width on phones, then snaps to a fixed maximum width at each breakpoint and stays centered.
• .container-fluid is always the full width of the window, at every size. Use it for dashboards, full-bleed sections, and apps.
• .container-{breakpoint} (-sm, -md, -lg, -xl, -xxl) is full width until that breakpoint, then behaves like .container. Use it when content should use the whole phone or tablet screen but stop growing on desktops.

All three add 0.75rem (12px) of padding on the left and right and center themselves with auto margins.

Container widths at each breakpoint

These are the maximum widths in Bootstrap 5.3. “100%” means the container fills the window, minus its side padding.

The breakpoints themselves are explained in the Bootstrap breakpoints guide.

Containers and the grid

A grid row goes inside a container, and columns go inside the row:

<div class="container">
  <div class="row">
    <div class="col-md-8">Main content</div>
    <div class="col-md-4">Sidebar</div>
  </div>
</div>

The container’s side padding and the row’s negative margins cancel out, so the columns’ content lines up with any text placed directly in the container. That is why a .row placed outside a container causes a horizontal scrollbar: its negative margins push past the edge of the page.

Full-width backgrounds with centered content

A common need is a section whose background runs edge to edge while its content stays centered. Put the background on an outer element and the container inside it:

<section class="bg-body-tertiary py-5">
  <div class="container">
    <h2>Features</h2>
    <p>The background spans the window; this text stays in the centered column.</p>
  </div>
</section>

Don’t put the background on the container itself, or it stops at the container’s edges.

Nesting containers

You rarely need a container inside a container. The inner one adds its own padding and maximum width, so content ends up narrower and misaligned. Inside a container, use rows and columns, or a width utility, instead. The exception is the pattern above, where the outer element is a plain <section>, not a container.

Center a narrow column of text

For an article or a form that should be narrower than the container, center a column inside it:

<div class="container">
  <div class="row justify-content-center">
    <div class="col-lg-8">
      <p>Readable line length on large screens, full width on phones.</p>
    </div>
  </div>
</div>

More ways to center content are in how to center a div in Bootstrap.

Change the container width

To change the maximum widths, override the $container-max-widths map in Sass before importing Bootstrap:

$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1140px,
  xxl: 1200px
);

@import "bootstrap/scss/bootstrap";

This example caps every container at 1200px instead of 1320px on the largest screens. The side padding comes from $container-padding-x, which defaults to $grid-gutter-width (1.5rem) and is split between the two sides. See Bootstrap Sass variables explained for how overrides work, or change these values visually in the builder.

Without Sass, you can cap one container with CSS:

.container-narrow { max-width: 960px; }

<div class="container container-narrow">...</div>

Common container problems

A horizontal scrollbar appears. A .row is outside a container, or an element inside is wider than the screen. Wrap rows in a container and check images have img-fluid.

The content touches the edge on phones. The element has no container. Add .container or .container-fluid, which both add side padding.

The page doesn’t use the full width on a laptop. That’s .container stopping at 1140px or 1320px. Use .container-fluid, or a larger custom maximum width.

Content in two sections doesn’t line up. One section uses .container and the other .container-fluid, or one is nested in another container. Use the same container class in both.

FAQ

What is the difference between container and container-fluid in Bootstrap?

.container has a maximum width that steps up at each breakpoint (540px, 720px, 960px, 1140px, 1320px) and stays centered. .container-fluid is always 100% of the window width. Both add the same padding on the left and right.

What is the max width of a Bootstrap 5 container?

1320px, from the xxl breakpoint (1400px windows) up. Below that it is 1140px from 1200px, 960px from 992px, 720px from 768px, and 540px from 576px. Under 576px it fills the screen.

How do I make a Bootstrap container full width?

Use .container-fluid instead of .container. To be full width only on smaller screens, use a responsive container such as .container-lg, which is 100% wide until the lg breakpoint.

Do I need a container in Bootstrap?

For grid layouts, yes. Rows have negative side margins that a container’s padding balances out, so a row without a container causes a horizontal scrollbar. Containers also keep content off the screen edges on phones.

How do I change the container width in Bootstrap 5?

Override the $container-max-widths Sass map before importing Bootstrap, for example setting xxl: 1200px. Without Sass, add a class with your own max-width to the container.