-1

Does making a Bootstrap 4 row d-flex make its columns equal heights?

Example,

<div class="row d-flex">
  <div class="col-md-6">
    <p>111111111111111111111111111111111111111111111111111
       22222222222222222222222222222222222222222222222222
       33333333333333333333333333333333333333333333333333333333333</p> 
  </div>
  <div class="col-md-6">
    <p>1</p>
  </div> 
</div>

`

html5student
  • 11
  • 2
  • 6
  • It makes equal heights for the **col-md-6** div tags – Sonia Dec 02 '17 at 10:05
  • Possible [DUPLICATE](https://stackoverflow.com/questions/46611092/equal-height-of-columns-in-bootstrap-4). If you do paste your question in [Google Search](https://www.google.com.au/search?q=making+a+Bootstrap+4+row+d-flex+make+its+columns+equal+heights&oq=making+a+Bootstrap+4+row+d-flex+make+its+columns+equal+heights&aqs=chrome..69i57j69i60l2.722j0j7&sourceid=chrome&ie=UTF-8) you will find the solution: – T04435 Dec 02 '17 at 10:49

2 Answers2

0

What are the proprieties for the "d-flex" class:

.d-flex {
    display: -webkit-box !important;
    display: -webkit-flex !important;
    display: -ms-flexbox !important;
    display: flex !important;
}

If you don't add extra CSS properties, you will have equal columns (equal height is default).

marc_s
  • 732,580
  • 175
  • 1,330
  • 1,459
Madalina Taina
  • 1,968
  • 20
  • 26
0

Changing the d-flex class to align-items-stretch should do it.

The Bootstrap 4 grid is flex by default.

Check the docs here.

Klooven
  • 3,858
  • 1
  • 23
  • 41