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 Bootstrap Basics Using Bootstrap Components Displaying Content with Cards

Posted by hazal gökalp
hazal gökalp
2,998 Points

About the Card Height

In the example, when the bottom text of the cards <small class="text-muted">Last updated 3 mins ago</small> is erased, card heights change, so they no longer allign.

In order to set equal widthts to the cards, I have added an empty <p></p> element instead of the removed <small> tag.

Is this the right or best way?

Angie Clark
seal-mask
.a{fill-rule:evenodd;}techdegree
Angie Clark
Front End Web Development Techdegree Student 19,986 Points
Angie Clark
.a{fill-rule:evenodd;}techdegree
Angie Clark
Front End Web Development Techdegree Student 19,986 Points

I am really late to this but in case this can help you or someone else. I was just going back over this and noticed my cards weren't lining up right. I am glad you figured out why! I set another CSS rule .card-body {min-height: 198px;} I got the 198px from the card-body that was the largest. It seems to be looking aligned now.

4 Answers

Abraham Juliot
Abraham Juliot
47,353 Points
Abraham Juliot
Abraham Juliot
47,353 Points

Hi Hazal, The <p> tag is intended to present and structure paragraph text. CSS is intended style and align elements on the page.

I recommend setting the style widths using CSS instead of an empty <p> tag because an empty <p> tag does not say anything in the code as to your intent of putting it there -- whereas a CSS class or selector does. And, if a someone should later adjust the default styles of all <p> tags -- say the padding and margins -- this will alter the alignment here, and the cause will not be apparent at a glance.

hazal gökalp
hazal gökalp
2,998 Points

Hi Abraham, thank you for the answer:) I've managed the problem by adding "d-flex align-items-stretch" classes to columns

hazal gökalp
hazal gökalp
2,998 Points

d-flex wans't even neccessary :)

Katherine Jimenez
Katherine Jimenez
2,103 Points
Katherine Jimenez
Katherine Jimenez
2,103 Points

I had the same problem! I just added <div class="card-deck"></div> around the cards. Fixed it!

Check out the Card decks section in the Bootstrap documentation

kols
kols
27,007 Points

^^ Katherine is correct — you certainly can use card decks (or groups) to achieve an equal height to solve this. However, according to the Bootstrap Documentation [as of late March 2018], these layout options are not yet responsive, so just something to keep in mind.

For those wondering what Card Groups and Decks are:

••• Card Groups are used to layout the cards as a single, attached element with equal width and height columns. You can read more about card groups here.

••• Card Decks offer a set of equal width and height cards that aren’t attached to one another. You can read about decks here.

Samuel Elbaz
Samuel Elbaz
17,142 Points
Samuel Elbaz
Samuel Elbaz
17,142 Points

Hi for future reference for others with this issue. I tried multiple of these solutions, but nothing quite worked. What did work was just adding the margin class to the div that has the columns in it and add h-100 class to the card class.

Example Card: 

<div class="col-md-6 col-lg-4 mb-4">
                    <div class="card h-100">
                        <img src="img/vivianne.png" class="card-img-top" alt="...">
                        <div class="card-body">
                            <h4 class="card-title">Vivianne McVue</h4>
                            <p class="card-text">Vivianne is a web developer and teacher who is passionate about
                                building scalable, data-driven web apps, especially ones that address old problems
                                with new tech!</p>

                        </div>
                    </div>
                </div>
Jeff Sanders
PLUS
Jeff Sanders
Courses Plus Student 9,503 Points
Jeff Sanders
Jeff Sanders
Courses Plus Student 9,503 Points

Here is a nice example of how to fix your problem: http://www.lottejackson.com/learning/an-equal-height-grid-using-flexbox The idea behind it is to create two flex containers: 1 to contain the cards and 1 per card to contain each cards content. The parent container is set to flex-direction: row. Bootstrap already does this for you. The card content containers are set to flex-direction: column. Once you have the containers set up, it's a matter of manipulating flex property in the card content containers to stretch your cards as you see fit.