7.3.1. Fixed width ¶

.container class is used to create a responsive page with a fixed width.

Note: the width (max-width) will be enlarged or reduced in proportion to thewidth of the screen.

In the following example, we can try to resize the browser window to see that the container width varies between different screens:

<div class="container">
  <h1>My first Bootstrap page</h1>
  <p>These are some texts.</p>
</div>

7.3.2. 100% width ¶

.container-fluid class is used to create a full-screen container that always spans the entire screen width (width is always 100%):

<div class="container-fluid">
  <h1>My first Bootstrap page</h1>
  <p>Used. container fluid, 100% width, occupying all viewport containers.</p>
</div>

7.3.3. Inner margin of container ¶

By default, containers are filled with left and right margins, and there areno filled margins at the top and bottom. Bootstrap provides some spacing classes to fill margins. such as .pt-5 is used to fill the inside margin at the top:

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

7.3.4. The border and color of the container ¶

Bootstrap also provides some border (border) and color (bg-dark, bg-primary,and so on) classes to style the container:

<div class="container p-5 my-5 border"></div>
<div class="container p-5 my-5 bg-dark text-white"></div>
<div class="container p-5 my-5 bg-primary text-white"></div>

7.3.5. Responsive container ¶

You can use .container-sm|md|lg|xl class to create a responsive container.

The value of the max-width property of the container changes according to the size of the screen.

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