Centering a div under other divs in Bootstrap 5

Question

I have some basic HTML (zero CSS) which aims to display a title at the top of a page, then a piece of text in the center. This is my code:

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" />


<div class="container-fluid">
  <div class="d-flex flex-column min-vh-100">
    <h1 class="text-center my-4">Title</h1>
    <div class="d-flex flex-grow-1 justify-content-center align-items-center">
      <div>Centered!</div>
    </div>
  </div>
</div>

However, the top div seems to be offsetting the position of the middle one (I want the middle one centered in the page). Thanks for any help, I'm new to this!

score 1 · Accepted Answer · answered Apr 29 '22 at 03:35

A solution is to add the fixed-top to the h1. This way it stops consuming vertical space.

See below:

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>



<div class="container-fluid">
<h1 class="text-center my-4 fixed-top">Title</h1>
    <div class="d-flex flex-column min-vh-100">
        <div class="d-flex flex-grow-1 justify-content-center align-items-center">
            <div>Centered!</div>
        </div>
    </div>
</div>

Centering a div under other divs in Bootstrap 5

1 Answers1