I want to select only the last element with class "feature" without adding extra classes, only with pseudo selectors like :last-child but since the elements with class "feature" are not siblings it's not working at all. Can someone help me to solve this little problem.
Here is the HTML:
<div class="row">
<div class="col-sm-6 col-md-6 col-lg-4">
<article class="feature">
<i class="fas fa-search-location fa-3x mb-3"></i>
<h3 class="heading-tertiary mb-5">Great location</h3>
<p class="feature__text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet aperiam illo nam quis sit
unde?
</p>
</article>
</div>
<div class="col-sm-6 col-md-6 col-lg-4">
<article class="feature">
<i class="fas fa-utensils fa-3x mb-3"></i>
<h3 class="heading-tertiary mb-5">Free meals</h3>
<p class="feature__text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet aperiam illo nam quis sit
unde?
</p>
</article>
</div>
<div class="col-sm-12 col-lg-4">
<article class="feature">
<i class="fas fa-dumbbell fa-3x mb-3"></i>
<h3 class="heading-tertiary mb-5">Fitness room</h3>
<p class="feature__text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet aperiam illo nam quis sit
unde?
</p>
</article>
</div>
</div>
:last-child only works when the element in question is the last child of the container, not the last of a specific type of element. For that, you want :last-of-type
.col-lg-4:last-of-type article.feature {
background-color:red
}
With the given markup you could use this selector
.row > div:last-child .feature {
...
}
this will match the .feature element inside the last div which is a direct child of .row.
try to make it like this way.
.col-lg-4:last-child article.feature {
border-bottom: 1px solid #000;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap-grid.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-6 col-md-6 col-lg-4">
<article class="feature">
<i class="fas fa-search-location fa-3x mb-3"></i>
<h3 class="heading-tertiary mb-5">Great location</h3>
<p class="feature__text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet aperiam illo nam quis sit
unde?
</p>
</article>
</div>
<div class="col-sm-6 col-md-6 col-lg-4">
<article class="feature">
<i class="fas fa-utensils fa-3x mb-3"></i>
<h3 class="heading-tertiary mb-5">Free meals</h3>
<p class="feature__text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet aperiam illo nam quis sit
unde?
</p>
</article>
</div>
<div class="col-sm-12 col-lg-4">
<article class="feature">
<i class="fas fa-dumbbell fa-3x mb-3"></i>
<h3 class="heading-tertiary mb-5">Fitness room</h3>
<p class="feature__text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet aperiam illo nam quis sit
unde?
</p>
</article>
</div>
</div>
</div>
</body>
</html>
I hope this will works for you.
Thank you...
Related
How do I position my font awesome icon from right.
-this is my html code with font awesome icons
<div class="part-3">
<div class="box">
<i class="fa-brands fa-galactic-senate"></i>
<h1>Ui Design</h1>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Lorem ipsum</p>
</i>
</div>
<div class="box red-box">
<i class="fa-brands fa-codepen"></i>
<h1>Product Design</h1>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Lorem ipsum</p>
KNOW MORE<i class="fa-solid fa-arrow-right"></i>
</div>
<div class="box">
<i class="fa-brands fa-mandalorian"></i>
<h1>Branding</h1>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Lorem ipsum</p>
KNOW MORE<i class="fa-solid fa-arrow-right"></i>
</div>
</div>
<article class="cards">
<article class="card">
<img class="card-image" src="//cdn.shopify.com/s/files/1/0306/3834/2281/files/videoImg1.png?v=423003316238239167" alt="image" />
<div class="card-content">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quasi ratione odit voluptatum explicabo sit inventore, minima neque aliquam libero dolorem?</div>
<footer class="card-footer">
Link
Link
</footer>
</article>
<article class="card">
<img class="card-image" src="https://picsum.photos/320/240" alt="image" />
<div class="card-content">Lorem ipsum dolor sit amet.</div>
<footer class="card-footer">
Link
Link
</footer>
</article>
<article class="card">
<img class="card-image" src="https://picsum.photos/1024/768" alt="image" />
<div class="card-content">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad, nam.</div>
<footer class="card-footer">
Link
Link
</footer>
</article>
</article>
Depending on whether you're using flex, grid or block elements - the issue could be coming from various properties. Presuming you have no CSS added in, in the <head> of your html, create a style block like <style></style>where you may want to add your styling properties, or you could extract these to an external file if you wish to. Have a look here for more information about css and how to use it .
Now back to your question, one way would be to simply add height and width properties to the <img /> tags so you'd do something like
img{
width: 300px;
height:200px;
object-fit:contain;
}
object-fit: contain makes sure the image doesn't get stretched.
If you'd like to see other possible solutions (such as grid or flex) please update your question
You can add another div in img tag and give some specific height on it. also in your img give also height same as the div wrapper in your img. and do object-fit cover on it. check the code below
.cards {
border: 1px solid red;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 10px
}
.card-image-wrapper {
border: 1px solid yellow;
height: 300px; /* add height to image wrapper */
}
.card-image {
width: 100%;
height: 300px; /* same height as card image wrapper */
object-fit: cover;
object-position: center;
}
<article class="cards">
<article class="card">
<div class="card-image-wrapper">
<img
class="card-image"
src="//cdn.shopify.com/s/files/1/0306/3834/2281/files/videoImg1.png?v=423003316238239167"
alt="image"
/>
</div>
<div class="card-content">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quasi ratione odit voluptatum explicabo sit inventore, minima neque aliquam libero dolorem?
</div>
<footer class="card-footer">
Link
Link
</footer>
</article>
<article class="card">
<div class="card-image-wrapper">
<img
class="card-image"
src="https://picsum.photos/320/240"
alt="image"
/>
</div>
<div class="card-content">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quasi ratione odit voluptatum explicabo sit inventore, minima neque aliquam libero dolorem?
</div>
<footer class="card-footer">
Link
Link
</footer>
</article>
<article class="card">
<div class="card-image-wrapper">
<img
class="card-image"
src="https://picsum.photos/1024/768"
alt="image"
/>
</div>
<div class="card-content">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quasi ratione odit voluptatum explicabo sit inventore, minima neque aliquam libero dolorem?
</div>
<footer class="card-footer">
Link
Link
</footer>
</article>
</article>
hope it helps and give you little idea.
I made a page on localhost using HTML CSS and Bootstrap and used flickity slider in it and is working fine on localhost, but as soon as i uploaded the same code on wordpress, the slider arrows(previous and next buttons) crosses each other. I think there is some error in the order of putting files.When uploaded to wordpress slider looks like this On localhost slider looks like this Here is the code...
<!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">
<title>Blog Post</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="/fontawesome-free-6.0.0-web/fontawesome-free-6.0.0-web/css/all.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css"
integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="https://unpkg.com/flickity#2/dist/flickity.min.css">
<style>
#media(max-width : 576px) {
.pic {
margin-bottom: 30px;
}
}
#zoom-overflow {
display: inline-block;
width: 100%;
height: 100%;
overflow: hidden;
}
.transition {
box-shadow: 1px 1px 20px -14px rgba(0, 0, 0, 0.63);
transition-duration: 2s;
transition-property: box-shadow;
}
img:hover {
transform: scale(1.2);
overflow: hidden;
}
img {
transition: 1s;
overflow: hidden;
}
.row {
overflow: hidden;
}
.transition:hover {
box-shadow: 7px 10px 20px -14px rgba(0, 0, 0, 0.63);
cursor: pointer;
transition: all 1s;
}
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.blog-title {
color: #EF0001;
margin-bottom: 0px;
}
.blog-heading {
font-size: larger;
font-weight: 500;
margin-bottom: 10px;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<p class="fs-1 mt-5">A home for inspiring stories <br>
on business and technology.</p>
</div>
<div class="row">
<p> <a href="#" class="fs-5" style="color: #EF0001; text-decoration:none"> SUBSCRIBE FOR UPDATES →
</a></p>
</div>
</div>
<div class="container my-5">
<div class="row my-5">
<div class="col-md-4 position-relative mb-sm-5 pic mb-md-0">
<span id="zoom-overflow"> <img src="images/card2.jpg"
style="object-fit: cover; width:100%; height: 100%;overflow: hidden;" alt="" class="pic"></span>
<p class=" position-absolute bottom-0 fs-4 text-light" style="left:5% ;">Lorem ipsum dolor sit amet,
consectetur adipisicing elit. Vero, voluptates.</p>
</div>
<div class="col-md-8">
<div class="container p-0 d-flex-column">
<div class="row">
<div class="col-md-5 text-center"> <span id="zoom-overflow"> <img src="microsoft/m1.jpg"
style="width:100% ;" class="img-fluid" alt=""></span>
</div>
<div class="col-md-7 mt-3 d-md-flex-column flex-grow-1">
<div class="blog-title">BUSINESS</div>
<div class="container-fluid blog-heading p-0"> Collaboration announcement: Toyota Tsusho and
Yalantis
</div>
<div class="container-fluid p-0">
<small> Written by : XYZ</small>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-5 text-center mt-3"><span id="zoom-overflow"> <img src="microsoft/m1.jpg"
style="width:100% ;" class="img-fluid" alt=""></span>
</div>
<div class="col-md-7 mt-3 d-md-flex-column flex-grow-1">
<div class="blog-title">BUSINESS</div>
<div class="container-fluid blog-heading p-0"> Collaboration announcement: Toyota Tsusho and
Yalantis
</div>
<div class="container-fluid p-0">
<small> Written by : XYZ</small>
</div>
</div>
</div>
</div>
</div>
<div class="container fs-2 fw-bold mt-5">
IMPORTANT
</div>
</div>
<div class="container-fluid ">
<div class="row carousel mb-5" data-flickity='{"wrapAround" : true,"autoplay" : true,"pageDots":false, "prevNextButtons": true}'>
<div class="col-md-3 p-5 carousel-cell transition m-3">
<div class="blog-title">BUSINESS </div>
<div class="blog-heading">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis, aliquid!
</div>
<div class="blog-text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia dolorum laudantium exercitationem
eum,
quae
beatae autem ullam explicabo nemo perferendis consectetur modi. Repellat, alias quo amet enim
sapiente,
soluta dolores, possimus quos quae minima veritatis iste dolorum distinctio minus praesentium?
</div>
</div>
<div class="col-md-3 p-5 carousel-cell transition m-3">
<div class="blog-title">BUSINESS </div>
<div class="blog-heading">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis, aliquid!
</div>
<div class="blog-text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia dolorum laudantium exercitationem
eum,
quae
beatae autem ullam explicabo nemo perferendis consectetur modi. Repellat, alias quo amet enim
sapiente,
soluta dolores, possimus quos quae minima veritatis iste dolorum distinctio minus praesentium?
</div>
</div>
<div class="col-md-3 p-5 carousel-cell transition m-3">
<div class="blog-title">BUSINESS </div>
<div class="blog-heading">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis, aliquid!
</div>
<div class="blog-text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia dolorum laudantium exercitationem
eum,
quae
beatae autem ullam explicabo nemo perferendis consectetur modi. Repellat, alias quo amet enim
sapiente,
soluta dolores, possimus quos quae minima veritatis iste dolorum distinctio minus praesentium?
</div>
</div>
<div class="col-md-3 p-5 carousel-cell transition m-3">
<div class="blog-title">BUSINESS </div>
<div class="blog-heading">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis, aliquid!
</div>
<div class="blog-text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia dolorum laudantium exercitationem
eum,
quae
beatae autem ullam explicabo nemo perferendis consectetur modi. Repellat, alias quo amet enim
sapiente,
soluta dolores, possimus quos quae minima veritatis iste dolorum distinctio minus praesentium?
</div>
</div>
<div class="col-md-3 p-5 carousel-cell transition m-3">
<div class="blog-title">BUSINESS </div>
<div class="blog-heading">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis, aliquid!
</div>
<div class="blog-text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia dolorum laudantium exercitationem
eum,
quae
beatae autem ullam explicabo nemo perferendis consectetur modi. Repellat, alias quo amet enim
sapiente,
soluta dolores, possimus quos quae minima veritatis iste dolorum distinctio minus praesentium?
</div>
</div>
<div class="col-md-3 p-5 carousel-cell transition m-3">
<div class="blog-title">BUSINESS </div>
<div class="blog-heading">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis, aliquid!
</div>
<div class="blog-text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia dolorum laudantium exercitationem
eum,
quae
beatae autem ullam explicabo nemo perferendis consectetur modi. Repellat, alias quo amet enim
sapiente,
soluta dolores, possimus quos quae minima veritatis iste dolorum distinctio minus praesentium?
</div>
</div>
</div>
</div>
<div class="container fs-2 fw-bold mt-5">
LATEST
</div>
<div class="container">
<div class="row">
<div class="col-md-4 mt-3">
<span id="zoom-overflow"> <img src="images/card1.jpg" style="width:100% ; height:100% ;" alt=""></span>
</div>
<div class="col-md-8 mt-5">
<div class="blog-title">
BUSINESS
</div>
<div class="blog-heading">
Lorem ipsum dolor sit amet.
</div>
<div class="blog-text">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui quis, neque consequuntur earum a harum
dicta praesentium quam quaerat placeat, exercitationem ratione.
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-4 mt-3">
<span id="zoom-overflow"> <img src="images/card1.jpg" style="width:100% ; height:100% ;" alt=""></span>
</div>
<div class="col-md-8 mt-5">
<div class="blog-title">
BUSINESS
</div>
<div class="blog-heading">
Lorem ipsum dolor sit amet.
</div>
<div class="blog-text">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui quis, neque consequuntur earum a harum
dicta praesentium quam quaerat placeat, exercitationem ratione.
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-4 mt-3">
<span id="zoom-overflow"> <img src="images/card1.jpg" style="width:100% ; height:100% ;" alt=""></span>
</div>
<div class="col-md-8 mt-5">
<div class="blog-title">
BUSINESS
</div>
<div class="blog-heading">
Lorem ipsum dolor sit amet.
</div>
<div class="blog-text">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui quis, neque consequuntur earum a harum
dicta praesentium quam quaerat placeat, exercitationem ratione.
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-4 mt-3">
<span id="zoom-overflow"> <img src="images/card1.jpg" style="width:100% ; height:100% ;" alt=""></span>
</div>
<div class="col-md-8 mt-5">
<div class="blog-title">
BUSINESS
</div>
<div class="blog-heading">
Lorem ipsum dolor sit amet.
</div>
<div class="blog-text">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui quis, neque consequuntur earum a harum
dicta praesentium quam quaerat placeat, exercitationem ratione.
</div>
</div>
</div>
</div>
<div class="container mb-5">
<div class="row justify-content-center fs-5" style="color: #EF0001; text-decoration:none">SEE ALL ARTICLES
→</div>
</div>
<div class="container my-5">
<hr>
</div>
<div class="container">
<div class="row fs-2 fw-bold justify-content-center text-center">
Learn about business and technology from our <br> monthly newsletter!
</div>
</div>
<div class="container text-center mt-5"> <button type="button" class="btn"
style="background-color:#EF0001 ;">SUBSCRIBE</button></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://unpkg.com/flickity#2/dist/flickity.pkgd.min.js"></script>
</body>
</html>
This question already has an answer here:
Bootstrap 4 cards - align content at the bottom
(1 answer)
Closed 4 years ago.
I would like to align links to the bottom center of cards. I tried adding the classes d-flex and flex-column to .card-body and mt-auto to the link, as suggested elsewhere. Note I'm not using a container or container-fluid div class (Bootstrap documentation suggests going without one for an edge-to-edge design).
Relevant HTML (for full code view CodePen):
<div class="row portfolio">
<div class="col-sm-12">
<h2>Portfolio</h2>
</div>
<div class="col-lg-4 col-sm-6 portfolio-item">
<div class="card h-100">
<img class="card-img-top" src="http://placehold.it/700x400" alt="">
<div class="card-body d-flex flex-column">
<h4 class="card-title">Project One</h4>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet numquam aspernatur eum quasi sapiente nesciunt? Voluptatibus sit, repellat sequi itaque deserunt, dolores in, nesciunt, illum tempora ex quae? Nihil, dolorem!</p>
View CodePen
</div>
</div>
</div>
<div class="col-lg-4 col-sm-6 portfolio-item">
<div class="card h-100">
<img class="card-img-top" src="http://placehold.it/700x400" alt="">
<div class="card-body">
<h4 class="card-title">Project Two</h4>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.</p>
View CodePen
</div>
</div>
</div>
<div class="col-lg-4 col-sm-6 portfolio-item">
<div class="card h-100">
<img class="card-img-top" src="http://placehold.it/700x400" alt="">
<div class="card-body">
<h4 class="card-title">Project Three</h4>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos quisquam, error quod sed cumque, odio distinctio velit nostrum temporibus necessitatibus et facere atque iure perspiciatis mollitia recusandae vero vel quam!</p>
View CodePen
</div>
</div>
</div>
<div class="col-lg-4 col-sm-6 portfolio-item">
<div class="card h-100">
<img class="card-img-top" src="http://placehold.it/700x400" alt="">
<div class="card-body">
<h4 class="card-title">Project Four</h4>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.</p>
View CodePen
</div>
</div>
</div>
<div class="col-lg-4 col-sm-6 portfolio-item">
<div class="card h-100">
<img class="card-img-top" src="http://placehold.it/700x400" alt="">
<div class="card-body">
<h4 class="card-title">Project Five</h4>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.</p>
View CodePen
</div>
</div>
</div>
<div class="col-lg-4 col-sm-6 portfolio-item">
<div class="card h-100">
<img class="card-img-top" src="http://placehold.it/700x400" alt="">
<div class="card-body">
<h4 class="card-title">Project Six</h4>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque earum nostrum suscipit ducimus nihil provident, perferendis rem illo, voluptate atque, sit eius in voluptates, nemo repellat fugiat excepturi! Nemo, esse.</p>
View CodePen
</div>
</div>
</div>
</div>
The link is placed on the end with d-flex and flex-column on card-body and mt-auto on the link. On your CodePen you are missing some of these classes (example with classes)!
Note: You can find this example also on the official documentation of Bootstrap 4.
To center the links you can use the text-center class on the card-link.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row portfolio">
<div class="col-sm-12">
<h2>Portfolio</h2>
</div>
<div class="col-lg-4 col-sm-6 portfolio-item">
<div class="card h-100">
<img class="card-img-top" src="http://placehold.it/700x400" alt="">
<div class="card-body d-flex flex-column">
<h4 class="card-title">Project One</h4>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet numquam aspernatur eum quasi sapiente nesciunt? Voluptatibus sit, repellat sequi itaque deserunt, dolores in, nesciunt, illum tempora ex quae? Nihil, dolorem!</p>
View CodePen
</div>
</div>
</div>
<div class="col-lg-4 col-sm-6 portfolio-item">
<div class="card h-100">
<img class="card-img-top" src="http://placehold.it/700x400" alt="">
<div class="card-body d-flex flex-column">
<h4 class="card-title">Project Two</h4>
<p class="card-text ">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.</p>
View CodePen
</div>
</div>
</div>
<div class="col-lg-4 col-sm-6 portfolio-item">
<div class="card h-100">
<img class="card-img-top" src="http://placehold.it/700x400" alt="">
<div class="card-body d-flex flex-column">
<h4 class="card-title">Project Three</h4>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos quisquam, error quod sed cumque, odio distinctio velit nostrum temporibus necessitatibus et facere atque iure perspiciatis mollitia recusandae vero vel quam!</p>
View CodePen
</div>
</div>
</div>
<div class="col-lg-4 col-sm-6 portfolio-item">
<div class="card h-100">
<img class="card-img-top" src="http://placehold.it/700x400" alt="">
<div class="card-body d-flex flex-column">
<h4 class="card-title">Project Four</h4>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.</p>
View CodePen
</div>
</div>
</div>
<div class="col-lg-4 col-sm-6 portfolio-item">
<div class="card h-100">
<img class="card-img-top" src="http://placehold.it/700x400" alt="">
<div class="card-body d-flex flex-column">
<h4 class="card-title">Project Five</h4>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.</p>
View CodePen
</div>
</div>
</div>
<div class="col-lg-4 col-sm-6 portfolio-item">
<div class="card h-100">
<img class="card-img-top" src="http://placehold.it/700x400" alt="">
<div class="card-body d-flex flex-column">
<h4 class="card-title">Project Six</h4>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque earum nostrum suscipit ducimus nihil provident, perferendis rem illo, voluptate atque, sit eius in voluptates, nemo repellat fugiat excepturi! Nemo, esse.</p>
View CodePen
</div>
</div>
</div>
</div>
Add this css, it will work
.card-body {
display: flex;
flex-direction: column;
}
.card-link {
margin-top: auto;
}
codepen link
An alternative solution
You can align the link at the bottom of the card-body by following these three steps:
Apply the d-flex and flex-column classes to card-body
Wrap all the content of card-body in a div.
Use flex: 1 1 auto on this new div
Doing so, the newly created div always takes all the available space. Hence, the link is always at the bottom of the card-body.
.flex-grow {
flex: 1 1 auto;
}
<div class="card-body d-flex flex-column">
<div class="flex-grow">
<h4 class="card-title">Project One</h4>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet numquam aspernatur eum quasi sapiente nesciunt? Voluptatibus sit, repellat sequi itaque deserunt, dolores in, nesciunt, illum tempora ex quae? Nihil, dolorem!</p>
</div>
View CodePen
</div>
Check this pen on CodePen
FYI, You can make an element occupy all the available space using this method.
This is the image I want:
How can I make a fixed bootstrap panel height for all my panels?
<div class="col-md-3 padding-0">
<div class="panel panel-default">
<div class="panel-body" style="min-height: 10px; max-height: 10px;">
<img class="img-responsive" src="images/artgram.png" alt="">
<p>Have you ever been in a company’s reception area that is so impressively stylish that your concept of their professionalism or importance changed for the better? Have you ever been in a company’s reception area that is so impressively stylish that
your concept of their professionalism or importance changed for the better?</p>
</div>
</div>
</div>
<div class="col-md-3 padding-0">
<div class="panel panel-default">
<div class="panel-body" style="min-height: 10px; max-height: 10px;">
<img class="img-responsive" src="images/artgram.png" alt="">
<p>Have you ever been in a company’s reception area that is so impressively stylish that your concept of their professionalism or importance changed for the better?</p>
</div>
</div>
</div>
Either use fixed height with hidden overflow
.panel-body {
height: 100px; // or whatever
overflow: hidden;
}
or assign max rendered height to all panels dynamically using JS after load. See my answer for a quite similar question here. The snippet is copied below
var panels = document.getElementsByClassName('panel-body');
var maxHeight = Array.prototype.map.call(panels, function(panel) {
return parseInt(getComputedStyle(panel).height, 10);
})
.reduce(function(a, b) {
return Math.max(a, b);
});
for (var i = panels.length; i-- > 0;) {
panels[i].style.height = maxHeight + 'px';
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<div class="row">
<div class="col-md-6">
<div class="panel panel-default">
<div class="panel-heading">Panel Heading</div>
<div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
<div class="panel-footer">Panel Footer</div>
</div>
</div>
<div class="col-md-6">
<div class="panel panel-default col">
<div class="panel-heading">Panel Heading</div>
<div class="panel-body">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit
amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</div>
<div class="panel-footer">Panel Footer</div>
</div>
</div>
</div>