Containers

You learned from the previous chapter that Bootstrap requires a containing element to wrap site contents.
Containers are used to pad the content inside of them, and there are two container classes available:
  1. The .container class provides a responsive fixed width container
  2. The .container-fluid class provides a full width container, spanning the entire width of the viewport
bs4-image-348x184


Fixed Container

Use the .container class to create a responsive, fixed-width container.
Note that its width (max-width) will change on different screen sizes

Open the example below and resize the browser window to see that the container width will change at different breakpoints:

Example

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

Fluid Container

Use the .container-fluid class to create a full width container, that will always span the entire width of the screen (width is always 100%):

Example

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

Container Padding

By default, containers have 15px left and right padding, with no top or bottom padding. Therefore, we often use spacing utilities, such as extra padding and margins to make them look even better. For example, .pt-3 means "add a top padding of 16px":

Example

<div class="container pt-3"></div>


You will learn much more about spacing utilities, in our BS4 Utilities Chapter.
Container Border and ColorOther utilities, such as borders and colors, are also often used together with containers