Bootstrap cards with 100% height and margin bottom
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.
Set height of content in a Bootstrap Card so that it fills the whole card block
I previously explained that h-100 is height: 100%, and this only works when the container has a defined height.
https://jsfiddle.net/1vgewck9/2/
<div class="row equal h-100">
<div id="left-col" class="col-md-4 pr-md-2">
<div class="card">
Left Card
</div>
</div>
<div id="right-col" class="col-md-8 pl-md-2">
<div id="right-card-container">
<div class="card">
<div class="card-header">Right Card</div>
<div class="card-block h-100">
<div id="right-card-content" class="row">.</div>
</div>
</div>
</div>
<div id="right-bottom-element" class="mt-md-3">
Right Bottom Element
</div>
</div>
</div>
Bootstrap Card Column Padding/Margin Overflow
Bootstrap card-columns use child class's of card and will fill its respective column.
Wrapping your card_ with a card class container is the intended implementation of card-columns.
<div class="card-columns">
<div class="card" style='background-color: #8f6e2d'>
<div class='d-flex flex-row p-2 m-1'>
<h4 class='mb-1 mr-3 text-center text-white'>{{field.verbose_name}}:</h4>
<p class='m-0 align-self-center' style='color: #edd290;'>{{agency_dict|dictionarylookup:field.name}}</p>
</div>
</div>
</div>
Although this will fix your issue of the cards overflowing to another column you may not get the intended look your after with this solution.
I am not 100% sure on how you wish this dictionary pair to look. Bootstrap card-columns may not be the ideal choice for this. Going off your screen grab.
Bootstrap card deck can't get card height to align
This is because you have your items aligned to the center <div class="row h-100 align-items-center"> change it to top <div class="row h-100 align-items-top"> This is in the 2nd line of your html. See here: https://jsfiddle.net/wp406n8d/4/
Also, you can get rid of this code:
.row :first-child > .card {
margin-top: 0.75rem;
}
And I'm not completely sure if you were wanting this also, but you can simply add height: 100% to the .card class to make all of the cards the same height. See here: https://jsfiddle.net/7ah6f4mo/
Bootstrap cards overlapping
You have a fixed column width of 25% but then you're telling the cards to be 18rem (inline). Remove the column width and just set the cards to the size you want in your actual card class rather than inline.
I didn't want to re-write your entire project, but I'd suggest looking into Bootstraps flex containers over using floats (hence the sticking to the left) so you can get everything to line up better and have more control and not have to worry about elements shifting when the screen size changes
https://getbootstrap.com/docs/5.0/utilities/flex/
* {
box-sizing: border-box;
}
body {
font-family: Arial, Helvetica, sans-serif;
}
.email-background {
background-color: lightgrey;
font-family: sans-serif;
padding: 20px 5px 50px 5px;
width: 100%;
}
.email-container {
background-color: #ffff;
max-width: 680px;
margin: 0 auto;
padding-bottom: 40px;
border-radius: 15px;
padding-top: 25px;
}
/*
.features .smaller-text{
font-size: smaller;
display: inline-block;
}
*/
.price {
color: turquoise;
}
/*
.icon-case{
height: 1em;
width: 1em;
float: left;
}
*/
.view-btn {
background-color: #0fbd9a;
color: #fff;
padding: 15px 20px;
text-decoration: none;
border-radius: 15px;
float: right;
}
/* Float four columns side by side */
.email-column {
float: left;
padding: 0 10px;
}
/* Remove extra left and right margins, due to padding */
.email-row {
margin: 0 -5px;
padding-top: 25px;
}
/* Clear floats after the columns */
.email-row::after {
content: "";
display: table;
clear: both;
}
/* Responsive columns */
@media screen and (max-width: 680px) {
.email-column {
width: 100%;
display: block;
margin-bottom: 20px;
}
}
/* Style the counter cards */
.card {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
padding: 26px;
text-align: left;
background-color: #f1f1f1;
width: 18rem;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
<title>SkyScanner Test</title>
</head>
<body>
<div class="email-background">
<div class="email-container">
<p class="car-titles"><strong>Check out these sweet rides</strong></p>
<div class="email-row">
<div class="email-column">
<div class="card">
<img src="/assets/economy.png" class="card-img-top" alt="Car Pic">
<div class="card-body">
<h5 class="card-title">Car 1</h5>
<h6>2-3 Doors</h6>
<div class="features">
<h6 class="smaller-text"><small><img class="icon-case" src="/assets/original.png">4 Seats</small></h6>
<h6 class="smaller-text"><small><img class="icon-case" src="/assets/suitcase.png">2</small></h6>
</div>
<div class="pricing-text">
<h6 class="smaller-text"><small>from</small></h6>
<h6><strong class="price">£33</strong><small> per day</small></h6>
</div>
<a class="view-btn" href="#">View <img src="/assets/arrow.png"></a>
</div>
</div>
</div>
<div class="email-column">
<div class="card">
<img src="/assets/economy.png" class="card-img-top" alt="Car Pic">
<div class="card-body">
<h5 class="card-title">Car 2</h5>
<h6>2-3 Doors</h6>
<div class="features">
<h6 class="smaller-text"><small><img class="icon-case" src="/assets/original.png">4 Seats</small></h6>
<h6 class="smaller-text"><small><img class="icon-case" src="/assets/suitcase.png">2</small></h6>
</div>
<div class="pricing-text">
<h6 class="smaller-text"><small>from</small></h6>
<h6><strong class="price">£33</strong><small> per day</small></h6>
</div>
<a class="view-btn" href="#">View <img src="/assets/arrow.png"></a>
</div>
</div>
</div>
</div>
<div class="email-row">
<div class="email-column">
<div class="card">
<img src="/assets/economy.png" class="card-img-top" alt="Car Pic">
<div class="card-body">
<h5 class="card-title">Car 3</h5>
<h6>2-3 Doors</h6>
<div class="features">
<h6 class="smaller-text"><small><img class="icon-case" src="/assets/original.png">4 Seats</small></h6>
<h6 class="smaller-text"><small><img class="icon-case" src="/assets/suitcase.png">2</small></h6>
</div>
<div class="pricing-text">
<h6 class="smaller-text"><small>from</small></h6>
<h6><strong class="price">£33</strong><small> per day</small></h6>
</div>
<a class="view-btn" href="#">View<img src="/assets/arrow.png"></a>
</div>
</div>
</div>
<div class="email-column">
<div class="card">
<img src="/assets/economy.png" class="card-img-top" alt="Car Pic">
<div class="card-body">
<h5 class="card-title">Car 4</h5>
<h6>2-3 Doors</h6>
<div class="features">
<h6 class="smaller-text"><small><img class="icon-case" src="/assets/original.png">4 Seats</small></h6>
<h6 class="smaller-text"><small><img class="icon-case" src="/assets/suitcase.png">2</small></h6>
</div>
<div class="pricing-text">
<h6 class="smaller-text"><small>from</small></h6>
<h6><strong class="price">£33</strong><small> per day</small></h6>
</div>
<a class="view-btn" href="#">View<img src="/assets/arrow.png"></a>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>Related Topics
-Ms-Filter VS Filter What's the Difference
CSS Position: Sticky and Overflow
Create Line After Text with CSS
How to Increase the Bullet Size in a Li
Cssrules/Rules Are Null in Chrome
Nesting CSS @Supports and @Media Queries
Phpstorm: How to Setup Less to Output to CSS Directory with File Watcher
Understanding Display:Table-Cell; Functioning
How to Create Custom Tooltips with CSS Pseudoelements
CSS Problem with Background-Attachment:Fixed;
Background-Position Not Working with CSS Animation and Linear Gradient
CSS Overlapping Elements & Opacity Issue