Conteneurs Bootstrap 5

Conteneurs Bootstrap 5

From the previous chapter, you learned that Bootstrap needs to include elements to wrap the site content.

We fill content in the container and have two container classes available:

  • .container class provides a responsive fixed-width container
  • .container-fluid class provides a full-width container that spans the entire width of the viewport

fixed container

using .container class creates a responsive, fixed-width container.

Please note, its width (max-width）will change on different screen sizes:

Extra small
<576px 		Small
≥576px 		Medium
≥768px 		Large
≥992px 		Extra Large
≥1200px 		XXL
≥1400px
max-width 100% 540px 720px 960px 1140px 1320px

Please open the following example and adjust the size of the browser window to see how the container width changes at different breakpoints:

Exemple

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

Essayer par vous-même

XXL breakpoint (≥1400px) is a new addition in Bootstrap 5, while the largest breakpoint in Bootstrap 4 is Extra large (≥1200px).

fluid container

using .container-fluid class creates a full-width container that always spans the entire screen width (width always 100%）：

Exemple

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

Essayer par vous-même

container padding

By default, the container has left and right padding (left and right inner margins), no top or bottom padding (top and bottom inner margins). Therefore, we often use spacing tools（utilities），such as additional padding and margins, to make them look better. For example,.pt-5 means "add a largetop padding：

Exemple

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

Essayer par vous-même

容器边框和颜色

Bordures et couleurs des conteneurs

Exemple

D'autres outils, tels que les bordures et les couleurs, sont souvent utilisés avec les conteneurs :
<div class="container p-5 my-5 border"></div>
<div class="container p-5 my-5 bg-dark text-white"></div>

Essayer par vous-même

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

Vous apprendrez plus sur les outils de couleurs et de bordures dans les chapitres suivants.

Conteneurs réactifs Vous pouvez également utiliser .container-sm|md|lg|xl

de la classe du conteneur pour déterminer quand le conteneur doit répondre. max-width changera sur différentes tailles d'écran/ports d'affichage :

Classe Extra small
<576px		 Small
≥576px		 Medium
≥768px		 Large
≥992px		 Extra large
≥1200px		 XXL
≥1400px
.container-sm 100% 540px 720px 960px 1140px 1320px
.container-md 100% 100% 720px 960px 1140px 1320px
.container-lg 100% 100% 100% 960px 1140px 1320px
.container-xl 100% 100% 100% 100% 1140px 1320px
.container-xxl 100% 100% 100% 100% 100% 1320px

Exemple

<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>

Essayer par vous-même