Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Alec Livinghouse
Alec Livinghouse
1,719 Points

I can't seem to make two panels that are the same height in bootstrap. Somebody please help! I'll love you forever!!!

When I make two panels next to each other in bootstrap, the height seems to be determined by the amount of text inside the body. I want the panels to be equal height regardless of the amount of text inside of them. This is my code.

<div class="row panel-row"> <div class="col-md-6"> <div class="panel panel-primary panel-fixed"> <div class="panel-heading panel-heading-custom"> <h3 class="panel-title">Hello</h3> </div> <div class="panel-body fixed-panel"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas nisi arcu, facilisis sed tellus in, imperdiet fringilla elit. Etiam in rhoncus justo. Etiam a libero velit. Sed blandit cursus diam, vel placerat mauris mattis in. Quisque ultrices velit sed porta fermentum. Pellentesque ultricies, metus ac fringilla consectetur, dui tortor luctus sapien, eget euismod augue ante eu massa. Duis eu metus augue. Donec sapien nisi, congue in blandit in, vestibulum nec lacus. Sed ut turpis eu enim mollis pharetra nec sit amet orci. Ut lacinia, dolor quis rhoncus egestas, arcu est facilisis arcu, non ornare dolor quam sit amet ante. Maecenas vitae enim vel nibh convallis imperdiet ut in velit. Suspendisse rutrum risus arcu, rhoncus accumsan velit viverra vel. Pellentesque porta gravida eros, in ultricies lacus. Donec euismod enim sit amet erat suscipit, quis pulvinar lacus vehicula. In id finibus mauris. </div> </div> </div> <div class="col-md-6"> <div class="panel panel-info"> <div class="panel-heading panel-heading-custom"> <h3 class="panel-title">Goodbye</h3> </div> <div class="panel-body fixed"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada ac mi sit amet condimentum. Nunc vel tortor vel dolor ultricies auctor et non lectus. Sed sed semper augue. Praesent sodales tellus felis, vel auctor nisl lobortis quis. Integer ac massa aliquet, commodo risus ac, interdum ex. Integer consectetur aliquet lacinia. Nulla id lectus sed sem aliquam ultricies eu varius nisl. In non tempus nibh, nec aliquet odio. </div> </div> </div> </div>

Sean Alvis
Sean Alvis
12,184 Points

https://css-tricks.com/snippets/css/a-guide-to-flexbox/ Make your containing div {display: flex; align-items: stretch} and the children will be equal heights. If they have other divs inside the children you can set them to height: 100%;