Bootstrap Containers

A container is the basic building block of the layout in Bootstrap. It holds your content, puts it in the center of the page and gives it some space on both sides. The grid system must be placed inside a container.

Types of containers

Class	Behavior
.container	Has a fixed maximum width at each breakpoint. It is centered
.container-fluid	Takes the full width of the screen always
.container-sm, .container-md, .container-lg, .container-xl, .container-xxl	100% wide until the given breakpoint, and then like a normal container

<div class="container bg-primary-subtle border py-3 mb-3">.container (fixed width, centered)</div>
<div class="container-fluid bg-success-subtle border py-3 mb-3">.container-fluid (100% width)</div>
<div class="container-md bg-warning-subtle border py-3">.container-md (100% below 768px)</div>

Maximum widths of .container

Breakpoint	Screen width	Container max-width
Extra small (xs)	less than 576px	100%
Small (sm)	576px and up	540px
Medium (md)	768px and up	720px
Large (lg)	992px and up	960px
Extra large (xl)	1200px and up	1140px
Extra extra large (xxl)	1400px and up	1320px

These widths come from the Bootstrap CSS. The preview above has a narrow window, so you see the smaller sizes there.

Which container to use?

• Use .container for most pages. The text lines do not get too long on big screens.
• Use .container-fluid for dashboards and full width sections.
• Use the responsive containers when you want the page to be full width on small screens and fixed width only later.

Full width background with a centered content

A common pattern: the section takes the full width (for the background), and a container inside keeps the content centered.

<section class="bg-dark text-white py-4">
  <div class="container">
    <h2 class="h4 mb-0">Full width section, centered content</h2>
  </div>
</section>

Padding and nesting

A container has horizontal padding (the gutter) of 0.75rem on both sides. Do not put a container inside another container. If you need more levels, use the grid.

• Previous Page
• Next Page

---

Exercises & Assignments
No Content Found.

Interview Questions & Answers
No Content Found.