Vertical align container in Bootstrap 4

Question

I'm having some trouble vertically aligning my container. I've tried following the steps in this post: Vertical Align Center in Bootstrap 4

This is for a school project, and it's my first time using HTML/CSS, so I'm pretty awful at it. The only thing that managed to work was setting the container to vh-100 and using my-auto on the rows. I wrapped the rows in a container to keep them together. But by setting the container to be 100% of my viewport height, it makes the container overflow vertically, causing it to scroll.

The other suggestions had no effect on my view. I'm not sure where I'm going wrong.

I've added a couple custom additions to the CSS file, but only to tweak the height of card to 400px and to change some colors. Without the additions, it doesn't work, either.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">

<div class="container d-flex flex-column container-fluid">
    <div class="wrapper">
        <div class="row">
            <div class="offset-2 col-sm-4">
                <span>Title</span>
            </div>
        </div>

        <div class="row">
            <div class="offset-2 col-sm-4">
                <div class="card bg-black">
                    <div class="card-body text-center flex-column d-flex">
                    <img class="mx-auto" src="https://via.placeholder.com/100"/>
                    <h2 class="card-title text-center text-on-dark font-weight-bold">Mentor</h2>
                    <p class="card-text text-left text-on-dark px-5">Yada yada yada</p>
                    <button type="button" class="btn btn-gold btn-lg rounded-pill align-self-center mt-auto mb-3" style="width: 230px">GRADE</button>
                    </div>
                </div>
            </div>

            <div class="col-sm-4">
                    <div class="card bg-primary">
                    <div class="card-body text-center flex-column d-flex">
                    <img class="mx-auto" src="https://via.placeholder.com/100"/>
                    <h2 class="card-title text-center text-white font-weight-bold">Student</h2>
                    <p class="card-text text-left text-white px-5">Blah blah blah</p>
                    <button type="button" class="btn btn-white btn-lg rounded-pill align-self-center mt-auto mb-3" style="width: 230px">STUDY</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

score 0 · Answer 1 · answered Jun 17 '22 at 20:00

You haven't been particularly clear on what you want centered, but to center the container vertically in the viewport, set the body element (or a new parent div) to 100% height, add flex, then align its contents to center with my-auto on the container.

View the full page demo to see the solution.

<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
</head>

<body class="vh-100 d-flex">
  <div class="container d-flex flex-column container-fluid my-auto">
    <div class="wrapper">
      <div class="row">
        <div class="offset-2 col-sm-4">
          <span>Title</span>
        </div>
      </div>

      <div class="row">
        <div class="offset-2 col-sm-4">
          <div class="card bg-black">
            <div class="card-body text-center flex-column d-flex">
              <img class="mx-auto" src="https://via.placeholder.com/100" />
              <h2 class="card-title text-center text-on-dark font-weight-bold">Mentor</h2>
              <p class="card-text text-left text-on-dark px-5">Yada yada yada</p>
              <button type="button" class="btn btn-gold btn-lg rounded-pill align-self-center mt-auto mb-3" style="width: 230px">GRADE</button>
            </div>
          </div>
        </div>

        <div class="col-sm-4">
          <div class="card bg-primary">
            <div class="card-body text-center flex-column d-flex">
              <img class="mx-auto" src="https://via.placeholder.com/100" />
              <h2 class="card-title text-center text-white font-weight-bold">Student</h2>
              <p class="card-text text-left text-white px-5">Blah blah blah</p>
              <button type="button" class="btn btn-white btn-lg rounded-pill align-self-center mt-auto mb-3" style="width: 230px">STUDY</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

I have a footer and a navigation bar at the top (I'm using ASP.NET, so it's placed there automatically). Maybe that's what's causing my view to be scrollable. Your snippet behaves the same way when used in my project. My hacky work-around was to set the min-height to 50 or 75vh. Should I set the body to a different height (other than 100%) to accommodate for the footer/navbar? — cjames, Jun 17 '22 at 20:16

Vertical align container in Bootstrap 4

1 Answers1