Two jumbotron within a row with text aligned center

Question

i ma having trouble to play with boostrap 4 css.

I would like to have in a row two jumbotron with the same height no matter what is inside and with the inside of the div vertically aligned center.

my code is the following :

<div class="container">
     <div class="row">
          <div class="col-8">
              <div class="jumbotron greenback">
                   <h7>Welcome to the Project test Detail page</h7>
              </div>
          </div>
          <div class="col-4">
              <div class="jumbotron greenback">
                  <div class="inner-score">
                      <div class="score-title">
                          <h6>Team Score</h6>
                      </div>
                      <div class="score-value">
                           <h4>85</h4>
                      </div>    
                  </div>

              </div>

          </div>
      </div>      
</div>

I created a jsfidlle to show you https://jsfiddle.net/kscv67kt/2/ As you can see now the two jumbotron have vertical text align center but are not full row height..

Still empty, ill post an answer now so you can follow it. Bootstrap Jumbotron with same heigth nomatter length inside — Asim, Jan 05 '18 at 14:44
Hi thx for your answer I am trying right now to implement it. I updated my js it should work — Ben2pop, Jan 05 '18 at 14:54
Possible duplicate of [How can I make Bootstrap columns all the same height?](https://stackoverflow.com/questions/19695784/how-can-i-make-bootstrap-columns-all-the-same-height) — Rob, Jan 05 '18 at 15:02
hi Rob it is a semi duplicate because I manage to set the same height but the text is not vertically centered ( I ma talking about the answer bootstrap4) — Ben2pop, Jan 05 '18 at 15:24
and my problem is not about same col height but the jumbotron height — Ben2pop, Jan 05 '18 at 15:28

jimikara · Accepted Answer · 2018-01-05T17:20:57.710

Have you tried adding height: 100% to the jumbotron elements?

.jumbotron.greenback {
  height: 100%;
}

This will cause both elements to fill the height of the container (the .row in this case).

Worth noting that setting height: 100% would cause the element's bottom margin to overflow it's container, so for neatness you could adjust the jumbotron's and their container's margin-bottom properties accordingly...

.container {
  margin-bottom: 32px /* Moving the margin-bottom value of the 
  .jumbotron to it's outer container.  */
}

.jumbotron.greenback {
  height: 100%;
  margin-bottom: 0;
}

Alternatively with jQuery...

$(document).ready(function() {

  var jumboMaxHeight = 0

  $(".jumbotron").each(function(){
    if ($(this).height() > jumboMaxHeight) { 
      jumboMaxHeight = $(this).height() }
    })

  $(".jumbotron").height(jumboMaxHeight)

})

Edit: To centre the text elements within the .jumbotron, there are a number of ways you could do it, one is using flexbox properties on the parent element (in conjunction with the jQuery solution)...

.jumbotron.greenback {
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: space-around;
}

Hi thx you for your answer .. I guess jquery is the best options.. the thing the alignment vertical of the text is kind of messed up, have a look to the JS fiddle : https://jsfiddle.net/kscv67kt/5/ — Ben2pop, Jan 05 '18 at 16:34
No worries, I've updated the answer to add a suggestion for the vertical alignment issue. — jimikara, Jan 05 '18 at 17:23

Two jumbotron within a row with text aligned center

1 Answers1