Logo Questions Linux Laravel Mysql Ubuntu Git Menu
HTML CSS JAVASCRIPT SQL PYTHON PHP BOOTSTRAP JAVA JQUERY R React Kotlin
 

Bootstrap cards with 100% height and margin bottom

Tags:

I am attempting to develop a grid of Bootstrap 4 cards with the following requirements:

  • All cards must sit within one div class="row", because I don't know how many cards there will be total and I want rows to look good at different screen breakpoints.
  • Columns within this row are sized differently at different breakpoints (e.g., col-sm-6 col-lg-4).
  • Within any individual 'displayed row', e.g., one row of cards shown on the screen at any given time, each card should have the same height.
  • Each card should have a margin at its bottom so that it is separated from all other cards.

I've managed to get almost all the way there, but I'm running into a problem: setting class="h-100" on my cards to ensure that they are all the same height kills the margin from the bottom of each card.

Is there a way to ensure that all cards within any given displayed row are the same height, while preserving a margin at the bottom of them?

HTML Code :

<div class="container">   <div class="row">     <div class="col-md-4 col-sm-6">       <div class="card h-100 mb-4" style="background-color:#ff0000;">         Test card content.        </div>     </div>     <div class="col-md-4 col-sm-6">       <div class="card h-100 mb-4" style="background-color:#00ff00;">         Test card content. Test card content. Test card content. Test card content.        </div>     </div>     <div class="col-md-4 col-sm-6">       <div class="card h-100 mb-4" style="background-color:#0000ff;">         Test card content. Test card content. Test card content. Test card content. Test card content. Test card content. Test card content. Test card content.        </div>     </div>     <div class="col-md-4 col-sm-6">       <div class="card h-100 mb-4" style="background-color:#0f0f0f;">         Test card content.        </div>     </div>   </div> </div>

JSFiddle Demo

like image 756
Sam Avatar asked Dec 15 '17 22:12

Sam

People also ask

How do I make Bootstrap cards equal height?

To get it to the same height, add Bootstrap class h-100 to all the cards or use CSS height.

What is the default margin for Bootstrap cards?

They have no margin by default, so use spacing utilities as needed. Below is an example of a basic card with mixed content and a fixed width. Cards have no fixed width to start, so they'll naturally fill the full width of its parent element. This is easily customized with our various sizing options.

How do you make all Bootstrap cards the same size?

If you set the height = 100% the card will always expand to the greatest length of the longest card. The container will constrain all to the same length.

1 Answers

After a little bit of experimentation, this one was easy to solve: I needed to add the mb-4 class to the containing column, not the card itself:

<div class="container">   <div class="row">     <div class="col-md-4 col-sm-6 mb-4">       <div class="card h-100" style="background-color:#ff0000;">         Test card content.        </div>     </div>     <div class="col-md-4 col-sm-6 mb-4">       <div class="card h-100" style="background-color:#00ff00;">         Test card content. Test card content. Test card content. Test card content.        </div>     </div>     <div class="col-md-4 col-sm-6 mb-4">       <div class="card h-100" style="background-color:#0000ff;">         Test card content. Test card content. Test card content. Test card content. Test card content. Test card content. Test card content. Test card content.        </div>     </div>     <div class="col-md-4 col-sm-6 mb-4">       <div class="card h-100" style="background-color:#0f0f0f;">         Test card content.        </div>     </div>   </div> </div>

Hopefully this helps others out who are stuck in my same situation.

like image 78
Sam Avatar answered Oct 03 '22 03:10

Sam
Sign in to Comment

Related questions

How can I stop EF Core from creating a filtered index on a nullable column
Testing listeners with Queue::fake()
Rxswift observable bind(to:) vs subscribe(onNext:)
vscode keyboard shortcut for launch configuration
Error `Async test method must have non-void return type` when upgrading from NUnit 2 to NUnit 3
How can I benchmark the performance of C++ code? [closed]
Files structure in MVVM (Android)
Firebase Cloud Functions https.onCall finished with status code: 204
Google Colaboratory vs Google Datalab. How are they different?
Is there a way to use angular base href as variable in image path?
Tensorflow: When should I use or not use `feed_dict`?
Accessing BroadCastReceiver in Viewmodel

Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!