Topic: Keeping images same size in side-by-side Cards
Forgive me if this does not warrant a new topic. I have been working with your Bootstrap cards, as they serve a very useful purpose for the work I am designing. Having said that, I am an amateur so please bear with me.
When I replace the MDbootstrap pictures in the sample programs (from the tutorials), they do not always line up with each other in row 1 and row 2. This leaves the side-by-side cards with two different sizes of images, and thus two different sizes of Cards in height. I change the pictures to the same dimensions but they still do not end up at the correct height in their individual cards.
Here is the code:
<main>
<!--Main layout-->
<div class="container">
<!--Page heading-->
<div class="row">
<div class="col-md-12">
<h1 class="h1-responsive">McConchie's Projects
<small class="text-muted">as they have never been seen before</small>
</h1>
</div>
</div>
<!--/.Page heading-->
<hr>
<!--First row-->
<div class="row">
<!--First column-->
<div class="col-md-6">
<!--Card-->
<div class="card">
<!--Card image-->
<div class="view overlay hm-white-slight">
<img src="http://www.mcconchies.ca/assets/images/grid.jpeg" alt="" />
<!-- <img src="http://mdbootstrap.com/images/regular/city/img%20(14).jpg" alt="" />-->
<a href="#!">
<div class="mask"></div>
</a>
</div>
<!--/.Card image-->
<!--Card content-->
<div class="card-block">
<!--Title-->
<h4 class="card-title">Placement on the Grid</h4>
<!--Text-->
<p class="card-text">Placing an employee on the wage grid with the right step and increment date.</p>
<div class="read-more">
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal-contact">Get answer</button>
</div>
</div>
<!--/.Card content-->
</div>
<!--/.Card-->
</div>
<!--/.First column-->
<!--Second column-->
<div class="col-md-6">
<!--Card-->
<div class="card">
<!--Card image-->
<div class="view overlay hm-white-slight">
<!--<img src="http://mdbootstrap.com/images/regular/city/img%20(14).jpg" alt="" />-->
<img src="http://www.mcconchies.ca/assets/images/LOA.jpeg" alt="" />
<a href="#!">
<div class="mask"></div>
</a>
</div>
<!--/.Card image-->
<!--Card content-->
<div class="card-block">
<!--Title-->
<h4 class="card-title">Leave of Absence</h4>
<!--Text-->
<p class="card-text">Apply sound principles and due process to the granting of leaves of absence under the Collective Agreement.</p>
<div class="read-more">
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal-contact2">Get answer</button>
</div>
</div>
<!--/.Card content-->
</div>
<!--/.Card-->
</div>
<!--/.Second column-->
</div>
<!--/.First row-->
<!--Second row-->
<div class="row">
<!--First column-->
<div class="col-md-6">
<!--Card-->
<div class="card">
<!--Card image-->
<div class="view overlay hm-white-slight">
<!-- <img src="http://mdbootstrap.com/images/regular/city/img%20(11).jpg" alt="" />-->
<img src="http://www.mcconchies.ca/assets/images/grid.jpeg" alt="" />
<a href="#!">
<div class="mask"></div>
</a>
</div>
<!--/.Card image-->
<!--Card content-->
<div class="card-block">
<!--Title-->
<h4 class="card-title">Card title</h4>
<!--Text-->
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<div class="read-more">
<a href="#!">Read more</a>
</div>
</div>
<!--/.Card content-->
</div>
<!--/.Card-->
</div>
<!--/.First column-->
<!--Second column-->
<div class="col-md-6">
<!--Card-->
<div class="card">
<!--Card image-->
<div class="view overlay hm-white-slight">
<img src="http://mdbootstrap.com/images/regular/city/img%20(2).jpg" alt="" />
<a href="#!">
<div class="mask"></div>
</a>
</div>
<!--/.Card image-->
<!--Card content-->
<div class="card-block">
<!--Title-->
<h4 class="card-title">Card title</h4>
<!--Text-->
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<div class="read-more">
<a href="#!">Read more</a>
</div>
</div>
<!--/.Card content-->
</div>
<!--/.Card-->
</div>
<!--Second column-->
</div>
Add comment
Very helpful, thanks. I will study option 3 and try it out. Michal, do you have a favorite or some other sleight of hand that will allow us to fix this apparent problem with ease?
Yea, I found the same thing. This is a common problem. They are cheating a bit by using content of the same size in each column.
Google something like: bootstrap columns same height
You'll see this one: https://scotch.io/bar-talk/different-tricks-on-how-to-make-bootstrap-columns-all-the-same-height
Different solutions require Javascript or break Bootstrap responsiveness, but the one I like is Option 3:
.row.match-my-cols {
overflow: hidden;
}
.row.match-my-cols [class*="col-"]{
margin-bottom: -99999px;
padding-bottom: 99999px;
}
<div class="row match-my-cols">
<div class="col-sm-4">...</div>
<div class="col-sm-4">...</div>
<div class="col-sm-4">...</div>
</div>
But if you're only targeting the latest browsers, flexbox might be the best.
Holy smokes. Sorry for the big pictures in that code. I have no idea how that happened.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status
Specification of the issue
- ForumUser: Pro
- Premium support: No
- Technology: General Bootstrap questions
- MDB Version: -
- Device: -
- Browser: -
- OS: -
- Provided sample code: No
- Provided link: No
Tags