BBS5 Containers

BS5 Containers

Containers are the most basic layout element in Bootstrap and are required when using the default grid system.

Containers are used to wrap content, pad it, and (sometimes) center it within the viewport.

Container Types

Bootstrap 5 offers two main container classes:

• .container - The class provides a responsive fixed width container
• .container-fluid - The class provides a full width container, spanning the entire width of the viewport

There are also responsive containers like .container-sm, .container-md, etc., which allow you to specify a class that is 100% wide until the specified breakpoint is reached.

<div class="container">
  <h1>My First Bootstrap Page</h1>
  <p>This is some text.</p>
</div>

<div class="container-fluid">
  <h1>My First Bootstrap Page</h1>
  <p>This is some text.</p>
</div>

<div class="container p-5 my-5 border bg-dark text-white">
  <h1>My First Bootstrap Page</h1>
  <p>This container has a dark background and white text.</p>
</div>

<div class="container-sm border">.container-sm</div>
<div class="container-md border">.container-md</div>
<div class="container-lg border">.container-lg</div>
<div class="container-xl border">.container-xl</div>