Bootstrap5 container question


My question is about the bootstrap5 container.

If you take a look at this site,
while the container is “container-fluid”, every element appears in the center of the page, such as the “container” class.

What is the way to achieve this design?


Not sure what you are specifically referring to on that page?

But container-fluid is a full-width container. As such child elements can only be horizontally centered inside it if they are not block-level elements or have a width limit imposed. Otherwise, they will just be the same width as the container.

Horizontal centering in Bootstrap is usually done using an auto margin mx-auto or flexbox, or if possible content can also be centered using a simple text-align.

If you want vertical centering of block-level elements you have to use flexbox (or some old-school use of positioning).

<div class="container-fluid min-vh-100 w-100 d-flex flex-column justify-content-center align-items-center">
  <header class="header w-75 p-3">
    <h1>Welcome to the page</h1>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente amet officia quos illum vero aliquam possimus quaerat sed soluta dolores, rerum inventore repudiandae rem ad ratione. Provident officiis architecto molestiae.</p>

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.