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

Max Weir
Max Weir
14,963 Points
Posted by Max Weir
Max Weir
14,963 Points

Card display with different amounts of content

These cards are great but how would would you be able to keep them displaying inline when the amount of content varies between them?

I changed the profile info to short and very long paragraphs and it breaks the layout of the cards causing them to float unevenly alongside each other.

gennady
gennady
14,145 Points

I added .h-100 (height: 100%) to every <div class="card"> and that works for me . But unfortunately I haven't figured out yet how to make some margin between two card rows in that case =(

<div class="col-md-6 col-lg-4">
           <div class="card h-100"> 
            <img class="card-img-top img-fluid" src="img/angie.png" alt="Card image cap">
            <div class="card-block ">
              <h4 class="card-title">Angie McAngular</h4>
              <p class="card-text">Angie 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>

12 Answers

roberthopman
roberthopman
16,502 Points

It took me quite a while to understand it, but for me (macbook 15') this code works if pasted between 3rd and 4th card: <div class="clearfix hidden-md-down"></div>

Chase Valle
Chase Valle
7,925 Points
Chase Valle
Chase Valle
7,925 Points

Robert, thanks for your solution! Your fix helped me.

Benjamin Rohel
Benjamin Rohel
158 Points
Benjamin Rohel
Benjamin Rohel
158 Points

thank you. Worked for me too.

Steven Arellano
Steven Arellano
8,703 Points
Steven Arellano
Steven Arellano
8,703 Points

This did not work for me.

I opted for the: <div class="clearfix hidden-lg-up"></div>

Liat Hoffman
Liat Hoffman
9,316 Points
Liat Hoffman
Liat Hoffman
9,316 Points

That mostly works, but now the third card is slightly shorter than the rest - any ideas how to fix this?

Diana Rooks
Diana Rooks
25,134 Points
Diana Rooks
Diana Rooks
25,134 Points

You could remove the grid classes and nest the cards in either a .card-group div or .card-deck-wrapper > .card-deck divs. Both options allow for equal height cards.

Card groups: http://v4-alpha.getbootstrap.com/components/card/#groups

Card decks: http://v4-alpha.getbootstrap.com/components/card/#decks

Max Weir
Max Weir
14,963 Points
Max Weir
Max Weir
14,963 Points

I looked at using card decks but the content would need to be flexible so I can control the amount to display per row, and there are many 'content' blocks to display.

This is what I would like to do:

small : 2 across medium: 3 across large and up: 4 across

Diana Rooks
Diana Rooks
25,134 Points

Okay, I see the dilemma. First of all, I want to thank you for asking the question in the first place. I merely stumbled upon the issue when I accidentally copied and pasted the Full Stack Conf speaker bios in the wrong order. I didn't think it would make any difference, but in the medium-sized viewport range things started to go haywire. The fourth bio was wrapping but not clearing the first two bios. That is, I ended up with a first row of three bios, a second row of one bio, and a third row of two bios.

Since Guil uses the Bootstrap Grid in this lesson, I perused the documentation for something about column wrapping within the grid. Here's what I found that might be useful: http://v4-alpha.getbootstrap.com/layout/grid/#example-responsive-column-resets

Briefly, it looks like you can add a clearfix after a row of content of varying height. I haven't had a chance to test it out yet, but maybe it will work for you?

Max Weir
Max Weir
14,963 Points
Max Weir
Max Weir
14,963 Points

That's great Diana, this is probably the best solution in this case. Appreciate your help.

J Scot Angus
J Scot Angus
Courses Plus Student 5,891 Points
J Scot Angus
J Scot Angus
Courses Plus Student 5,891 Points

I too stumbled upon this issue by mistakenly mis-ordering the speaker bios. I spent a fair amount of time comparing my code line-by-line with the teacher's code to see whether I made a mistake. Nothing was different but the order of the speakers, so.. I changed the order, and the issue was fixed. Thanks for posting that question, Max!

The clearfix Diana points out above (Thanks Diana!) is great... but it would be great if Guil would mention it (maybe link to this, or include in speakers notes) since it's such a relevant topic (that content isn't always the same size).

Grace Ji
Grace Ji
5,402 Points
Grace Ji
Grace Ji
5,402 Points

You can manually put the css style in the HTML sauce. in the <div class="card">, put the height: 25rem. It should be like this. <div class="card" style="height: 25rem;">

For example of Angie McAngluar card,

<div class="col-md-6 col-lg-4 mt-3"> <div class="card" style="height: 25rem;"> <img class="card-img-top img-fluid" src="img/angie.png" alt="Card image cap"> <div class="card-block"> <h4 class="card-title">Angie McAngluar</h4> <p class="card-text">Angie 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>

apply other 5 cards like above. It perfectly works for me!

Tim Windhorst
Tim Windhorst
8,242 Points
Tim Windhorst
Tim Windhorst
8,242 Points

The <div class="clearfix hidden-lg-down"></div> between the 2nd and 3rd cards worked well enough for me, however ideally (IMO) I'd want to make each card the same height as the tallest card as long as it wouldn't have any negative affect on aesthetics. Anyway, thanks for the help everyone!

Bill Graham
Bill Graham
7,423 Points
Bill Graham
Bill Graham
7,423 Points

The difference seems to be down to a more recent version of alpha (4 versus 2). Inspecting the element, the <body> font style is different, and further investigation found that Reboot now uses 'San Francisco' font on a Mac rather than 'Helvetica Neue', so text size is slightly different.

An ugly alternative to "clearfix" (or to use alongside it), which would ensure the cards were the same height and flowed properly, would require custom CSS with @media queries as required and ".card-block { min-height: ..px }" sized to the largest card.

Having said that, hopefully as bootstrap 4 is developed more flexibility will be added and "card deck" will be the best tool for this in future.

Alexander Melo
Alexander Melo
4,297 Points
Alexander Melo
Alexander Melo
4,297 Points

Thank you Robert so much ! Thank God i learned this earlier to debug future projects.

Dániel Dömsödi
PLUS
Dániel Dömsödi
Courses Plus Student 6,241 Points
Dániel Dömsödi
Dániel Dömsödi
Courses Plus Student 6,241 Points

Fortunately in the current Bootstrap version has flexbox support, so this issue can be fix easily if put another link tag in head; <link href="css/bootstrap-flex.min.css" rel="stylesheet"> or <link href="css/bootstrap-flex.css" rel="stylesheet">

I tried it and it is works, so dont need to edit Guil's code.

nagamani palamuthi
nagamani palamuthi
6,160 Points
nagamani palamuthi
nagamani palamuthi
6,160 Points

Hi all the above chats were helpful to me ... but I would like to know how to change the height of the cards?

Dániel Dömsödi
Dániel Dömsödi
Courses Plus Student 6,241 Points
Dániel Dömsödi
Dániel Dömsödi
Courses Plus Student 6,241 Points

You can simply add height property for the card class (bootstrap use this class name for it) in your custom css file.

.card { height: value; }

or the better way if you create a new class (for instance: card-custom) and set properties for it and put it in your html. Thus you can use default card properties of bootstrap elsewhere.

nagamani palamuthi
nagamani palamuthi
6,160 Points
nagamani palamuthi
nagamani palamuthi
6,160 Points

oh great , that was helpful.thank you! is card-custom an actual class in bootstrap?

Dániel Dömsödi
PLUS
Dániel Dömsödi
Courses Plus Student 6,241 Points
Dániel Dömsödi
Dániel Dömsödi
Courses Plus Student 6,241 Points

no. "card-custom" was just an instance, it can be anyhing what you like. I would like to say with that, you should use custom classes for custom modfications. Thus you dont overwrite the default properties of the class of bootstrap and u can use them also elsewhere in your project.

francescobugugnoli
francescobugugnoli
7,597 Points
francescobugugnoli
francescobugugnoli
7,597 Points

I tried to read the questions/answers and to fix the issue by my self but I'm still stack there. How can i display different cards with different content inline? I tried to use clear fix but is not working at all... I tried to use the easiest way, with a custom rule on css with a fix height, but it looks like that when I reduce the view on the medium screen, the content is floating one on the top of each other...