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

Posted by gennady
gennady
14,145 Points

How to line up tops and bottoms of all the cards and retain some margin between rows?

I know that for this case Bootstrap has Card Decks, but they are still not responsive. If I use the solution from the video where bootstrap Grid is used I have responsive layout BUT bottoms of some cards at some resolutions start looking like camel humps.

To align all tops and bottoms I added h-100 to <div class="card h-100">, but ufter that I can't figure out how to make some margin between rows =(

Please help! =)

Here is my code snapshot: https://w.trhou.se/gm6ntttru8

3 Answers

martinjones1
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
martinjones1
Front End Web Development Techdegree Graduate 44,824 Points
martinjones1
.a{fill-rule:evenodd;}techdegree seal-36
martinjones1
Front End Web Development Techdegree Graduate 44,824 Points

Not tested it, but looking at the docs, you could try adding the class mb-2 as well to add some bottom margin to each of the cards.

Bootstrap 4 spacing reference

gennady
gennady
14,145 Points

'm*-* 's and p*-* 's applied to the cards didn't help me, two rows looked like they glued together. But then I tried pb-3 for the col container and that worked great for me!

Here is the code:

<div class="col-md-6 col-lg-4 pb-3">
   <div class="card h-100">
    <img class="card-img-top img-fluid" src="img/json.png" alt="Card image cap">
    <div class="card-block">
      <h4 class="card-title">Json Babel</h4>
      <p class="card-text">All of his professional life, Json has worked with computers online; he is a polyglot programmer and likes using the right tools for the job.</p>
    </div>
  </div>         
</div>
Karan Nahar
Karan Nahar
16,157 Points
Karan Nahar
Karan Nahar
16,157 Points

Use card Columns.I have used it in the same class as the row. Margin is provided by card columns

    <div class="row card-columns">
Sarah Montoro
Sarah Montoro
843 Points

This is the best answer for getting the bottom spacing correct between cards. Thanks!

martinjones1
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
martinjones1
Front End Web Development Techdegree Graduate 44,824 Points
martinjones1
.a{fill-rule:evenodd;}techdegree seal-36
martinjones1
Front End Web Development Techdegree Graduate 44,824 Points

Nice, glad you managed to sort it :)