1

I'm trying to theme a blog and want a card deck of the summaries to all be the same size no matter what content is in them. For some reason my cards are all different sizes (they fit to the text, not the size of the largest card).

I hope that made sense!

Here is a simplified version of what I am trying...

<div class="container-fluid"> 
    <div class="card-deck">
        <div class="row">
            <div class="col"> 
               <div class="card">
                       <div class="card-body">                    
                        <p class="card-text">
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam accusantium, eligendi eaque et. Illo nihil magnam earum non! Laboriosam recusandae cumque, aut iste consequatur laborum facere tenetur quibusdam dolore possimus.
                        </p>                          
                    </div>              
                </div>
            </div> 
            <div class="col"> 
                <div class="card">
                    <div class="card-body">                     
                        <p class="card-text">
                        aut cum provident, blanditiis ex, aliquam nemo, delectus. Molestiae quasi amet qui saepe totam commodi illo provident!
                        </p>                          
                    </div>              
                </div>
            </div>              
        </div>
    </div> 
</div>

```

I am sure it's simple but I've been trying to get this for 2 days lol.. Cheers!

https://ibb.co/cfSnC7 -- A picture

AuggieLife
  • 29
  • 2
  • The [`card-deck`](http://getbootstrap.com/docs/4.0/components/card/#card-decks) isn't being used here because the `card`s are wrapped in `col`. Therefore, you need to use **`h-100`** to make each card fill the height of the parent column. – Carol Skelly Mar 28 '18 at 11:56

1 Answers1

0

When I encounter I usually solve it by setting the card height to 100% and adding margin bottom to the parent col, because if you add the margin to the card stretches on the inside collapsing with (if any) cards below. I don't know if it's the best method but works for me.

CSS

/* Use a more specific selector so you don't target all cols and cards. */
    .col { 
      margin-bottom: 15px;
    }
    .card {
      height: 100%;
    }

Also for blogs I usually use col-lg-4 (4 as an example) to avoid some issues with content inside cols not wrapping.

Fecosos
  • 944
  • 7
  • 17