2

I'm using Bootstrap 4, I'm trying to create a row in which all of the cols are vertically centred, to do this I'm using the Bootstrap 4 class align-items-center, as per the recommendation in this SO answer.

I have the following MWE:

.yellow-row {
  background-color: #f2c14e;
  color: #141823;
}

.blue-col {
  background-color: blue;
  color: white;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Test</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
</head>

<body>
  <div class="container">
    <div class="row yellow-row align-items-center">
      <div class="col-lg-7 blue-col text-center">
        <h1>Testing</h1>
        <p>Lorem reiciendis fuga possimus quibusdam doloribus Quos eaque earum voluptatem culpa vel obcaecati, ducimus sed Necessitatibus repudiandae suscipit ipsam magni laudantium? Inventore iusto sequi excepturi voluptatibus totam cupiditate. Dignissimos
          quasi</p>
      </div>
      <div class="col-lg-5 text-center">
        <h1>Only a test</h1>
        <p>Lorem quisquam dolor velit maxime officia. Quos quo nihil sint sequi iste. Sed praesentium nihil illum amet tempora. Dolore exercitationem praesentium iure accusantium quibusdam? Fuga ex inventore dignissimos aut quas</p>
        <p>Lorem dolorum officiis velit deserunt facere? Dolorum provident aliquid sapiente quam perferendis Repellendus magni culpa nesciunt laborum dolorum Pariatur similique ullam quasi sit doloremque cupiditate! Autem odit mollitia libero magnam!</p>
      </div>
    </div>
  </div>
</body>

</html>

The HTML/CSS above this produces output on larger screen widths:

large screen width output

The intended outcome is the blue column being the same height of the parent row (and thus the other col). I've tried adding min-height: 100% to the .blue-col class and I've also tried height: 100%, neither produce the intended result. I also tried adding the Bootstrap 4 class h-100 to the blue-col, again not the intended result.

I feel I'm lacking some fundamental understanding of how flexbox/vertical centring works in Bootstrap 4.

BML91
  • 2,952
  • 3
  • 32
  • 54
  • This question has already been asked https://stackoverflow.com/questions/25145686/let-two-divs-have-the-same-height?noredirect=1&lq=1 – Chillin' May 03 '18 at 14:55
  • Possible duplicate of [Let two divs have the same height](https://stackoverflow.com/questions/25145686/let-two-divs-have-the-same-height) – Chillin' May 03 '18 at 14:56
  • 1
    @Emily7687687 - the question is not how to make cols the same height. the question is how to keep cols the same height while vertically centering the content. – Carol Skelly May 03 '18 at 14:58

1 Answers1

3

The problem is you want to center align the content of the column, not the column itself. You can make the blue-col a flexbox column (d-flex flex-column) and then use justify-content-center to align its' contents...

<div class="container">
    <div class="row yellow-row">
        <div class="col-lg-7 blue-col text-center d-flex flex-column justify-content-center">
            <h1>Testing</h1>
            <p>Lorem reiciendis fuga possimus quibusdam doloribus Quos eaque earum voluptatem culpa vel obcaecati, ducimus sed Necessitatibus repudiandae suscipit ipsam magni laudantium? Inventore iusto sequi excepturi voluptatibus totam cupiditate. Dignissimos
                    quasi</p>
        </div>
        <div class="col-lg-5 text-center">
            <h1>Only a test</h1>
            <p>Lorem quisquam dolor velit maxime officia. Quos quo nihil sint sequi iste. Sed praesentium nihil illum amet tempora. Dolore exercitationem praesentium iure accusantium quibusdam? Fuga ex inventore dignissimos aut quas</p>
            <p>Lorem dolorum officiis velit deserunt facere? Dolorum provident aliquid sapiente quam perferendis Repellendus magni culpa nesciunt laborum dolorum Pariatur similique ullam quasi sit doloremque cupiditate! Autem odit mollitia libero magnam!</p>
        </div>
    </div>
</div>

https://www.codeply.com/go/kSvLCODvZC

Related: Equal height columns + vertical and horizontal centered content in Bootstrap 4

Carol Skelly
  • 351,302
  • 90
  • 710
  • 624
  • 1
    Perfect, thank you this is also a great explanation as to why it was going wrong. Still having `d-flex flex-column justify-content-center` all in the class seems quite verbose for bootstrap, when it's something that is surely required quite often. – BML91 May 03 '18 at 14:58