Mike
Reputation: 411
Bootstrap 4 - Line up element containers across columns to have equal heights
Using Bootstrap 4 row and columns is it possible to line up all the elements to equal container heights for each section like header and image so everything lines up in each column?
Example:
I'm mostly concerned with lining up the images and possibly cropping them if needed. The image tag src will come from an api call so I'm not sure if I can add them as a background for the container.
Not sure what the best way to go about this would be...
Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>
<body>
<section class="container-fluid product-section" id="productSection">
<div class="row card-row">
<div class="card-col col-sm-6 col-md-4 col-lg-2" id="001">
<div class="card-container">
<div class="card-title">
<h5>Heading single line</h5>
</div>
<div class="card-img-container">
<img class="img-fluid rounded" src="https://placeimg.com/300/300/tech" alt="" />
</div>
<div class="card-description">
<p class="text-muted">
See Description<span class="float-right">+</span>
</p>
</div>
<div class="af-button-group">
<div class="af-link">
<p>Link 1<span class="float-right">More</span></p>
<p>Link 2<span class="float-right">More</span></p>
<p>Link 3<span class="float-right">More</span></p>
<p>Link 4<span class="float-right">More</span></p>
</div>
</div>
</div>
</div>
<div class="card-col col-sm-6 col-md-4 col-lg-2" id="002">
<div class="card-container">
<div class="card-title">
<h5>Heading double line of text copy and info</h5>
</div>
<div class="card-img-container">
<img class="img-fluid rounded" src="https://placeimg.com/300/200/nature" alt="" />
</div>
<div class="card-description">
<p class="text-muted">
See Description<span class="float-right">+</span>
</p>
</div>
<div class="af-button-group">
<div class="af-link">
<p>Link 1<span class="float-right">More</span></p>
<p>Link 2<span class="float-right">More</span></p>
<p>Link 3<span class="float-right">More</span></p>
<p>Link 4<span class="float-right">More</span></p>
</div>
</div>
</div>
</div>
<div class="card-col col-sm-6 col-md-4 col-lg-2" id="003">
<div class="card-container">
<div class="card-title">
<h5>Heading single line</h5>
</div>
<div class="card-img-container">
<img class="img-fluid rounded" src="https://placeimg.com/300/300/people" alt="" />
</div>
<div class="card-description">
<p class="text-muted">
See Description<span class="float-right">+</span>
</p>
</div>
<div class="af-button-group">
<div class="af-link">
<p>Link 1<span class="float-right">More</span></p>
<p>Link 2<span class="float-right">More</span></p>
<p>Link 3<span class="float-right">More</span></p>
<p>Link 4<span class="float-right">More</span></p>
</div>
</div>
</div>
</div>
<div class="card-col col-sm-6 col-md-4 col-lg-2" id="004">
<div class="card-container">
<div class="card-title">
<h5>Heading with three lines of copy and information to try and line up.</h5>
</div>
<div class="card-img-container">
<img class="img-fluid rounded" src="https://placeimg.com/300/350/animals" alt="" />
</div>
<div class="card-description">
<p class="text-muted">
See Description<span class="float-right">+</span>
</p>
</div>
<div class="af-button-group">
<div class="af-link">
<p>Link 1<span class="float-right">More</span></p>
<p>Link 2<span class="float-right">More</span></p>
<p>Link 3<span class="float-right">More</span></p>
<p>Link 4<span class="float-right">More</span></p>
</div>
</div>
</div>
</div>
</div>
</section>
</body>
</html>Upvotes: 2
Views: 223
Answers (1)
Xenio Gracias
Reputation: 2758
Is this how you want??
h5 {
font-size: 1.25rem;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.card-img-container .rounded {
border-radius: .25rem!important;
height: 200px;
width: 100%;
object-fit: cover;
object-position: center;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>
<body>
<section class="container-fluid product-section" id="productSection">
<div class="row card-row">
<div class="card-col col-sm-6 col-md-4 col-lg-2" id="001">
<div class="card-container">
<div class="card-title">
<h5>Heading single line</h5>
</div>
<div class="card-img-container">
<img class="img-fluid rounded" src="https://placeimg.com/300/300/tech" alt="" />
</div>
<div class="card-description">
<p class="text-muted">
See Description<span class="float-right">+</span>
</p>
</div>
<div class="af-button-group">
<div class="af-link">
<p>Link 1<span class="float-right">More</span></p>
<p>Link 2<span class="float-right">More</span></p>
<p>Link 3<span class="float-right">More</span></p>
<p>Link 4<span class="float-right">More</span></p>
</div>
</div>
</div>
</div>
<div class="card-col col-sm-6 col-md-4 col-lg-2" id="002">
<div class="card-container">
<div class="card-title">
<h5>Heading double line of text copy and info</h5>
</div>
<div class="card-img-container">
<img class="img-fluid rounded" src="https://placeimg.com/300/200/nature" alt="" />
</div>
<div class="card-description">
<p class="text-muted">
See Description<span class="float-right">+</span>
</p>
</div>
<div class="af-button-group">
<div class="af-link">
<p>Link 1<span class="float-right">More</span></p>
<p>Link 2<span class="float-right">More</span></p>
<p>Link 3<span class="float-right">More</span></p>
<p>Link 4<span class="float-right">More</span></p>
</div>
</div>
</div>
</div>
<div class="card-col col-sm-6 col-md-4 col-lg-2" id="003">
<div class="card-container">
<div class="card-title">
<h5>Heading single line</h5>
</div>
<div class="card-img-container">
<img class="img-fluid rounded" src="https://placeimg.com/300/300/people" alt="" />
</div>
<div class="card-description">
<p class="text-muted">
See Description<span class="float-right">+</span>
</p>
</div>
<div class="af-button-group">
<div class="af-link">
<p>Link 1<span class="float-right">More</span></p>
<p>Link 2<span class="float-right">More</span></p>
<p>Link 3<span class="float-right">More</span></p>
<p>Link 4<span class="float-right">More</span></p>
</div>
</div>
</div>
</div>
<div class="card-col col-sm-6 col-md-4 col-lg-2" id="004">
<div class="card-container">
<div class="card-title">
<h5>Heading with three lines of copy and information to try and line up.</h5>
</div>
<div class="card-img-container">
<img class="img-fluid rounded" src="https://placeimg.com/300/350/animals" alt="" />
</div>
<div class="card-description">
<p class="text-muted">
See Description<span class="float-right">+</span>
</p>
</div>
<div class="af-button-group">
<div class="af-link">
<p>Link 1<span class="float-right">More</span></p>
<p>Link 2<span class="float-right">More</span></p>
<p>Link 3<span class="float-right">More</span></p>
<p>Link 4<span class="float-right">More</span></p>
</div>
</div>
</div>
</div>
</div>
</section>
</body>
</html>Upvotes: 1
Related Questions
- Equal height panels in Bootstrap over multiple rows
- Equal height columns with Bootstrap 3 and flexbox
- Bootstrap 4 - equal col height when using align-items-center
- Bootstrap equal height columns
- How to get equal height columns childs in Bootstrap 4?
- Use flex to get columns that have different amounts of rows to have the same height
- Border on equal height columns with Bootstrap flex
- Is it possible for columns to wrap and be all the same height using Bootstrap 3?
- Bootstrap to have columns with same height
- Creating equal height divs in Bootstrap 4 flexbox