Question 221424 in Html Question posted in
Some basic documentation can be found here.

Html – stretch height of nested bootstrap columns

I want to have the first two columns of both rows (green and violet) always having the same height. I hoped for using d-flex align-items-stretch but it seems like it doesn’t work because those two elements are not in the same row/parent element.

<div class="container">
  <div class="row" style="background-color:yellow;">
    <div class="col-6">
      <div class="row">
        <div class="col-12  d-flex align-items-stretch" style="background-color:green;">A1</div>
        <div class="col-12" style="background-color:blue;">A2</div>
        <div class="col-12" style="background-color:red;">A3</div>
      </div>
    </div>
    <div class="col-6">
      <div class="row">
        <div class="col-12  d-flex align-items-stretch" style="background-color:violet;">B1</div>
        <div class="col-12" style="background-color:orange;">B2</div>
        <div class="col-12" style="background-color:gray;">B3</div>
      </div>
    </div>
  </div>
</div>

I’m stuck here for a while, I might can’t think straight. Can someone confirm why align-items-stretch doesn’t work and maybe help me out on this one?

Full Demo: https://jsfiddle.net/2gz7bmrf/1/

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I guess my only solution is to restructure my code and use order-md-n.

    <div class="container">
  <div class="row" style="background-color:yellow;">
    <div class="col-12 col-md-6 order-md-1 d-flex align-items-stretch" style="background-color:green;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus malesuada quam vulputate ex interdum accumsan. Quisque sed vulputate augue. Proin dolor arcu, rutrum vel facilisis vel, dapibus nec elit. Proin tempor pellentesque eros, eu gravida metus ullamcorper eget. Quisque eget bibendum risus, at efficitur sem. Etiam dictum dolor ligula, et condimentum urna gravida nec. Phasellus pharetra vestibulum massa, sed venenatis erat efficitur et. Mauris ultrices hendrerit elementum. Morbi ut sodales purus.

</div>
    <div class="col-12 col-md-6 order-md-3" style="background-color:blue;">A2</div>
    <div class="col-12 col-md-6 order-md-5" style="background-color:red;">A3</div>
    <div class="col-12 col-md-6 order-md-2 d-flex align-items-stretch" style="background-color:violet;">Praesent ultrices, turpis vitae mollis pulvinar, risus sem convallis velit, nec imperdiet libero est eu ipsum. Fusce eros velit, pellentesque non viverra eget, pharetra eget purus. Etiam ultrices convallis odio nec consectetur. Fusce eleifend tortor at ex convallis, a accumsan lorem bibendum. Vivamus efficitur magna eget felis imperdiet maximus. Morbi rhoncus vehicula pellentesque. Quisque ac orci augue. Suspendisse at rutrum elit, volutpat rhoncus libero. Pellentesque lorem purus, tincidunt pharetra ante id, aliquet pulvinar lacus. Curabitur semper non dolor finibus cursus.

</div>
    <div class="col-12 col-md-6 order-md-4" style="background-color:orange;">B2</div>
    <div class="col-12 col-md-6 order-md-5" style="background-color:gray;">B3</div>
  </div>
</div>

    https://jsfiddle.net/myepfo52/


  2. 0

    You have to put the 2 align div in same parent.

    <div class="container">
  <div class="row">
    <div class="col-6 d-flex align-items-center" style="background:grey;">
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin dapibus tortor quis erat convallis condimentum. Curabitur ullamcorper ipsum vel lectus bibendum euismod. Vestibulum malesuada metus vitae libero convallis, nec facilisis odio sodales. Ut vitae vestibulum ex. Morbi et ligula magna. Quisque quis accumsan ligula. Sed pellentesque magna urna, quis facilisis turpis rhoncus non. Aenean gravida, felis sit amet convallis euismod, nisl diam efficitur elit, eget pulvinar nibh purus a elit. Proin consectetur turpis a ullamcorper posuere. Nulla quis elementum lorem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin dapibus tortor quis erat convallis condimentum. Curabitur ullamcorper ipsum vel lectus bibendum euismod. Vestibulum malesuada metus vitae libero convallis, nec facilisis odio sodales. Ut vitae vestibulum ex. Morbi et ligula magna. Quisque quis accumsan ligula. Sed pellentesque magna urna, quis facilisis turpis rhoncus non. Aenean gravida, felis sit amet convallis euismod, nisl diam efficitur elit, eget pulvinar nibh purus a elit. Proin consectetur turpis a ullamcorper posuere. Nulla quis elementum lorem.
    </div>
    

    <div class="col-6 d-flex align-items-center" style="background:grey;">
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin dapibus tortor quis erat convallis condimentum. Curabitur ullamcorper ipsum vel lectus bibendum euismod. Vestibulum malesuada metus vitae libero convallis, nec facilisis odio sodales. Ut vitae vestibulum ex. Morbi et ligula magna. Quisque quis accumsan ligula. Sed pellentesque magna urna, quis facilisis turpis rhoncus non. Aenean gravida, felis sit amet convallis euismod, nisl diam efficitur elit, eget pulvinar nibh purus a elit. Proin consectetur turpis a ullamcorper posuere. Nulla quis elementum lorem.
    </div>
  </div>
</div>

<div class="container">
  <div class="row" style="background-color:yellow;">
    <div class="col-6">
      <div class="row">
        <div class="col-12  d-flex align-items-stretch" style="background-color:green;">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin dapibus tortor quis erat convallis condimentum. Curabitur ullamcorper ipsum vel lectus bibendum euismod. Vestibulum malesuada metus vitae libero convallis, nec facilisis odio sodales. Ut vitae vestibulum ex. Morbi et ligula magna. Quisque quis accumsan ligula. Sed pellentesque magna urna, quis facilisis turpis rhoncus non. Aenean gravida, felis sit amet convallis euismod, nisl diam efficitur elit, eget pulvinar nibh purus a elit. Proin consectetur turpis a ullamcorper posuere. Nulla quis elementum lorem.


        </div>
        <div class="col-12" style="background-color:blue;">
          Curabitur a ante eu nulla fringilla euismod. Morbi fringilla molestie orci at commodo. Sed sit amet dignissim metus. Ut sollicitudin, sapien eu tristique sollicitudin, eros tortor ullamcorper ipsum, at lacinia ipsum dolor vitae ligula. Proin nec placerat lorem. Aliquam erat volutpat. Nullam egestas interdum tortor posuere faucibus. Nulla eget lorem euismod, iaculis felis sit amet, venenatis magna. Vestibulum pulvinar augue a felis semper, eget porta sem condimentum.


        </div>
        <div class="col-12" style="background-color:red;">
          Suspendisse eu neque nec magna commodo pharetra quis non nisl. Vivamus et augue scelerisque leo aliquam molestie vel eu odio. Morbi lacus enim, euismod eget eleifend nec, mollis vitae ipsum. Integer sed enim elit. Duis accumsan sem ut felis dictum, in tempus ex semper. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam volutpat erat eu convallis congue.


        </div>
      </div>
    </div>
    <div class="col-6">
      <div class="row">

        <div class="col-12  d-flex align-items-stretch" style="background-color:violet;">
          In hendrerit erat sit amet iaculis ultrices. Integer dapibus imperdiet odio in lobortis. Nullam ac tellus egestas, cursus magna sed, elementum ante. Donec et tincidunt dolor, ac venenatis nisl. Nam porttitor enim quis arcu faucibus, quis varius ante convallis. Nullam pretium, nulla ut gravida mollis, sem turpis interdum eros, eget gravida ipsum diam sit amet mauris. Quisque dictum vulputate est, at fermentum dui. Nullam ullamcorper luctus blandit. Donec posuere cursus nisi, eu condimentum mauris. Mauris enim libero, scelerisque quis leo nec, aliquet placerat purus. Pellentesque sit amet quam vehicula, fringilla arcu vitae, fringilla est. Mauris efficitur fringilla viverra. Vivamus purus nulla, dignissim nec diam vel, volutpat semper est.


        </div>
        <div class="col-12" style="background-color:orange;">
          Integer sed nunc et urna imperdiet dapibus eget in nisl. Quisque tincidunt nisl quam, vel bibendum augue euismod ut. Nam dignissim cursus tortor eu aliquet. Quisque suscipit purus eu nibh finibus pulvinar. Ut feugiat vel nulla ut luctus. Sed venenatis, massa vel pellentesque posuere, est enim pulvinar elit, sit amet tempus odio diam sit amet sem. In vitae risus leo. Mauris efficitur euismod urna, ut euismod lorem laoreet nec. Cras ac libero vel sem faucibus rhoncus. Nulla sed felis aliquam, porttitor lectus volutpat, hendrerit velit. Cras lacinia est ac eros suscipit sollicitudin. Pellentesque vitae diam hendrerit, posuere neque vitae, aliquam mi. Quisque tempor urna tellus, ut lobortis felis blandit vel. Nunc convallis mi quis dignissim euismod. Donec sem nisl, lacinia et magna at, malesuada dictum erat.


        </div>
        <div class="col-12" style="background-color:gray;">
          Generated 5 paragraphs, 439 words, 2972 bytes of Lorem Ipsum

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

  </div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search