I am trying to design a page in bootstrap. I have added 3 cards in a row but for some reason they are not getting of equal size. The data in the cards is getting random size along with the headings and image. Following is the code of the cards:
<div class="container">
<div class="row">
<!--ADD CLASSES HERE d-flex align-items-stretch-->
<div class="col-md-4 mb-3 d-flex align-items-stretch">
<div class="card shadow h-100">
<img src="https://rifaikuci.com/management/assets/images/projects/default.jpg" class="card-img-top" alt="Card Image">
<div class="card-body d-flex flex-column">
<h3 class="card-title">Web Development</h3>
<p class="card-text">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Assumenda molestiae quaerat architecto minima, id illum?</p>
Book now
</div>
</div>
</div>
<!--ADD CLASSES HERE d-flex align-items-stretch-->
<div class="col-md-4 mb-3 d-flex align-items-stretch">
<div class="card shadow h-100">
<img src="https://websolguru.com/admin/dist/img/services/ios-app-development.jpg" class="card-img-top" alt="Card Image">
<div class="card-body d-flex flex-column">
<h3 class="card-title">IOS Development</h3>
<p class="card-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident odit nobis voluptatibus dolorem non! Consequuntur dolor corporis nesciunt sint, recusandae corrupti ducimus officiis quae consectetur adipisci unde voluptas, ipsa inventore.</p>
Book now
</div>
</div>
</div>
<!--ADD CLASSES HERE d-flex align-items-stretch-->
<div class="col-md-4 mb-3 d-flex align-items-stretch">
<div class="card shadow h-100">
<img src="https://zendenwebdesign.com/wp-content/uploads/2016/02/shutterstock_196510706-3.jpg" class="card-img-top" alt="Card Image">
<div class="card-body d-flex flex-column">
<h3 class="card-title">SEO</h3>
<p class="card-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis voluptas vitae pariatur possimus ipsam laborum, dolore asperiores impedit debitis architecto.</p>
Book now
</div>
</div>
</div>
</div>
Add the following CSS:
img {
height: 150px;
object-fit: cover; /* If you add this images won't be distorted (try to remove it to see the effect) */
}
See the snippet below.
img {
height: 150px;
object-fit: cover;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap demo</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="row">
<!--ADD CLASSES HERE d-flex align-items-stretch-->
<div class="col-md-4 mb-3 d-flex align-items-stretch">
<div class="card shadow h-100">
<img src="https://rifaikuci.com/management/assets/images/projects/default.jpg" class="card-img-top" alt="Card Image">
<div class="card-body d-flex flex-column">
<h3 class="card-title">Web Development</h3>
<p class="card-text">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Assumenda molestiae quaerat architecto minima, id illum?</p>
Book now
</div>
</div>
</div>
<!--ADD CLASSES HERE d-flex align-items-stretch-->
<div class="col-md-4 mb-3 d-flex align-items-stretch">
<div class="card shadow h-100">
<img src="https://websolguru.com/admin/dist/img/services/ios-app-development.jpg" class="card-img-top" alt="Card Image">
<div class="card-body d-flex flex-column">
<h3 class="card-title">IOS Development</h3>
<p class="card-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident odit nobis voluptatibus dolorem non! Consequuntur dolor corporis nesciunt sint, recusandae corrupti ducimus officiis quae consectetur adipisci unde voluptas, ipsa inventore.</p>
Book now
</div>
</div>
</div>
<!--ADD CLASSES HERE d-flex align-items-stretch-->
<div class="col-md-4 mb-3 d-flex align-items-stretch">
<div class="card shadow h-100">
<img src="https://zendenwebdesign.com/wp-content/uploads/2016/02/shutterstock_196510706-3.jpg" class="card-img-top" alt="Card Image">
<div class="card-body d-flex flex-column">
<h3 class="card-title">SEO</h3>
<p class="card-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis voluptas vitae pariatur possimus ipsam laborum, dolore asperiores impedit debitis architecto.</p>
Book now
</div>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
</body>
</html>
Related
I have tried the basic bootstrap to get a toggle menu. But it does not get expand when the screen size is m. It is getting collapsed.But when the toggle icon is clicked it does not get expanded
<!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 href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<title>Bootstrap</title>
</head>
<body>
<div class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container">
NinjaXeries
<button
class="navbar-toggler"
data-toggle="collapse"
data-bs-target="#ccs"
>
<span class="navbar-toggler-icon"></span></button>
<div class="collapse navbar-collapse" id="ccs">
<ul class="navbar-nav">
<li class="nav-item">Home</li>
<li class="nav-item">Price</li>
<li class="nav-item">General</li>
<li class="nav-item">Galle</li>
</ul>
</div>
</div>
</div>
<div class="container mt-3">
<div class="row">
<div class="col-12 ">
<h1 class="text-center">Our Destination</h1>
<p class="text-center lead">Let's Go</p>
</div>
</div> <!--row-->
<div class="row">
<div class="col-12 col-sm-6 col-md-4 col-lg-4 col-xl-2 col-xxl-2">
<h1 class="text-center">Berlin</h1>
<img src="img/img1.jpg" width="250px" height="250px" class="mx-auto d-block img-fluid">
<P class="text-center">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Pariatur non, mollitia voluptates nemo culpa perferendis numquam, et totam, minus labore libero accusantium recusandae magnam incidunt.</P>
</div>
<div class="col-12 col-sm-6 col-md-4 col-lg-4 col-xl-2 col-xxl-2">
<h1 class="text-center">Sri Lanka</h1>
<img src="img/img2.jpg" width="250px" height="250px" class="mx-auto d-block img-fluid">
<P class="text-center">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Pariatur non, mollitia voluptates nemo culpa perferendis numquam, et totam, minus labore libero accusantium recusandae magnam incidunt.</P>
</div>
<div class="col-12 col-sm-6 col-md-4 col-lg-4 col-xl-2 col-xxl-2">
<h1 class="text-center">Canada</h1>
<img src="img/img3.jpg" width="250px" height="250px" class="mx-auto d-block img-fluid">
<P class="text-center">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Pariatur non, mollitia voluptates nemo culpa perferendis numquam, et totam, minus labore libero accusantium recusandae magnam incidunt.</P>
</div>
<div class="col-12 col-sm-6 col-md-4 col-lg-4 col-xl-2 col-xxl-2">
<h1 class="text-center">Europe</h1>
<img src="img/img4.jpg" width="250px" height="250px" class="mx-auto d-block img-fluid">
<P class="text-center">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Pariatur non, mollitia voluptates nemo culpa perferendis numquam, et totam, minus labore libero accusantium recusandae magnam incidunt.</P>
</div>
<div class="col-12 col-sm-6 col-md-4 col-lg-4 col-xl-2 col-xxl-2">
<h1 class="text-center">Nether</h1>
<img src="img/img5.jpg" width="250px" height="250px" class="mx-auto d-block img-fluid">
<P class="text-center">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Pariatur non, mollitia voluptates nemo culpa perferendis numquam, et totam, minus labore libero accusantium recusandae magnam incidunt.</P>
</div>
<div class="col-12 col-sm-6 col-md-4 col-lg-4 col-xl-2 col-xxl-2">
<h1 class="text-center">Amster</h1>
<img src="img/img6.jpg" width="250px" height="250px" class="mx-auto d-block img-fluid">
<P class="text-center">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Pariatur non, mollitia voluptates nemo culpa perferendis numquam, et totam, minus labore libero accusantium recusandae magnam incidunt.</P>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>
</body>
</html>
Issue is this line: data-bs-target="#ccs"
Please replace it with this: data-target="#ccs"
In my project, I am using Bootstrap 4. I like to position the below image absolutely in .row but I couldn't find proper classes like top-0 top-50 etc. as it is in Bootstrap 5.
Should I write the classes myself? I need it responsively as well. So I don't want to write media queries for every break point.
What I want to do is below:
<div class="container mb-10">
<div class="row position-relative">
<div class="col-12 col-md-6 mb-6 mb-md-0">
<div class="p-8 p-sm-9 img-container" >
<img src="/myImage1.png" class="img-fluid" alt="">
</div>
</div>
<div class="col-12 col-md-6 text-center text-md-left">
<h2 class="display-3 font-weight-bold ">Education</h2>
<p class="text-muted">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Odio reprehenderit ipsa repellendus nam debitis. Quaerat, delectus consequuntur quasi adipisci aspernatur cumque facere mollitia ea sit, minima, veniam beatae molestias voluptatibus!</p>
</div>
<div class="position-absolute top-50 end-0 top-md-70 end-md-30">
<img src="/myImage2.png" alt="">
</div>
</div>
</div>
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>
I have a bootstrap based template that outputs a text with a button and an image. By checkbox you can select here that the picture appears either to the right or to the left of the text.
Now I have the problem that the text and button always appears above or below the picture in the mobile viewport. But I want the text and button to always appear below the picture.
I just can not figure out how to customize the template. Since I can not read the viewport size with PHP, I can not think of anything but JavaScript. Or is there a better and easier way?
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
</head>
<body>
</section>
<section id="leistungen" class="projects-section bg-light">
<div class="container">
<div class="row no-gutters mb-4 mb-lg-5">
<div class="col-xl-4 col-lg-12">
<div class="featured-text">
<h4>Privatumzüge</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum voluptatibus facere recusandae perspiciatis, nobis voluptates, sed quod dolorum distinctio odit tempora exercitationem corporis magni at ea, sint, in ipsam doloremque!</p>
</div>
Anfrage stellen!
</div>
<div class="col-xl-8 col-lg-12">
<img src="https://dummyimage.com/600x400/000/fff" width="700" height="500" alt="Blablabla" itemprop="image">
</div>
</div>
</div>
</section>
<section id="leistungen" class="projects-section bg-light">
<div class="container">
<div class="row no-gutters mb-4 mb-lg-5">
<div class="col-xl-8 col-lg-12">
<img src="https://dummyimage.com/600x400/000/fff" width="700" height="500" alt="Blablabla" itemprop="image">
</div>
<div class="col-xl-4 col-lg-12">
<div class="featured-text">
<h4>Büroumzüge</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum voluptatibus facere recusandae perspiciatis, nobis voluptates, sed quod dolorum distinctio odit tempora exercitationem corporis magni at ea, sint, in ipsam doloremque!</p>
</div>
Anfrage stellen!
</div>
</div>
</div>
</section>
<section id="leistungen" class="projects-section bg-light">
<div class="container">
<div class="row no-gutters mb-4 mb-lg-5">
<div class="col-xl-4 col-lg-12">
<div class="featured-text">
<h4>Projektumzüge</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum voluptatibus facere recusandae perspiciatis, nobis voluptates, sed quod dolorum distinctio odit tempora exercitationem corporis magni at ea, sint, in ipsam doloremque!</p>
</div>
Anfrage stellen!
</div>
<div class="col-xl-8 col-lg-12">
<img src="https://dummyimage.com/600x400/000/fff" width="700" height="500" alt="Blablabla" itemprop="image">
</div>
</div>
</div>
</section>
<section id="leistungen" class="projects-section bg-light">
<div class="container">
<div class="row no-gutters mb-4 mb-lg-5">
<div class="col-xl-8 col-lg-12">
<img src="files/theme/img/demo-image-02.jpg" width="700" height="500" alt="Blablabla" itemprop="image">
</div>
<div class="col-xl-4 col-lg-12">
<div class="featured-text">
<h4>Möbelmontage</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum voluptatibus facere recusandae perspiciatis, nobis voluptates, sed quod dolorum distinctio odit tempora exercitationem corporis magni at ea, sint, in ipsam doloremque!</p>
</div>
Anfrage stellen!
</div>
</div>
</div>
</section>
<section id="leistungen" class="projects-section bg-light">
<div class="container">
<div class="row no-gutters mb-4 mb-lg-5">
<div class="col-xl-4 col-lg-12">
<div class="featured-text">
<h4>Mitarbeiterumzüge</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum voluptatibus facere recusandae perspiciatis, nobis voluptates, sed quod dolorum distinctio odit tempora exercitationem corporis magni at ea, sint, in ipsam doloremque!</p>
</div>
Anfrage stellen!
</div>
<div class="col-xl-8 col-lg-12">
<img src="https://dummyimage.com/600x400/000/fff" width="700" height="500" alt="Blablabla" itemprop="image">
</div>
</div>
</div>
</section>
<section id="leistungen" class="projects-section bg-light">
<div class="container">
<div class="row no-gutters mb-4 mb-lg-5">
<div class="col-xl-8 col-lg-12">
<img src="files/theme/img/demo-image-02.jpg" width="700" height="500" alt="Blablabla" itemprop="image">
</div>
<div class="col-xl-4 col-lg-12">
<div class="featured-text">
<h4>Möbellogistik</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum voluptatibus facere recusandae perspiciatis, nobis voluptates, sed quod dolorum distinctio odit tempora exercitationem corporis magni at ea, sint, in ipsam doloremque!</p>
</div>
Anfrage stellen!
</div>
</div>
</div>
</section>
</body>
</html>
</section>
<section id="leistungen" class="projects-section bg-light">
<div class="container">
<div class="row no-gutters mb-4 mb-lg-5">
<div class="col-xl-4 col-lg-12">
<div class="featured-text">
<h4>Privatumzüge</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum voluptatibus facere recusandae perspiciatis, nobis voluptates, sed quod dolorum distinctio odit tempora exercitationem corporis magni at ea, sint, in ipsam doloremque!</p>
</div>
Anfrage stellen!
</div>
<div class="col-xl-8 col-lg-12">
<img src="https://dummyimage.com/600x400/000/fff" width="700" height="500" alt="Blablabla" itemprop="image">
</div>
</div>
</div>
</section>
<section id="leistungen" class="projects-section bg-light">
<div class="container">
<div class="row no-gutters mb-4 mb-lg-5">
<div class="col-xl-8 col-lg-12">
<img src="files/theme/img/demo-image-02.jpg" width="700" height="500" alt="Blablabla" itemprop="image">
</div>
<div class="col-xl-4 col-lg-12">
<div class="featured-text">
<h4>Büroumzüge</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum voluptatibus facere recusandae perspiciatis, nobis voluptates, sed quod dolorum distinctio odit tempora exercitationem corporis magni at ea, sint, in ipsam doloremque!</p>
</div>
Anfrage stellen!
</div>
</div>
</div>
</section>
<section id="leistungen" class="projects-section bg-light">
<div class="container">
<div class="row no-gutters mb-4 mb-lg-5">
<div class="col-xl-4 col-lg-12">
<div class="featured-text">
<h4>Projektumzüge</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum voluptatibus facere recusandae perspiciatis, nobis voluptates, sed quod dolorum distinctio odit tempora exercitationem corporis magni at ea, sint, in ipsam doloremque!</p>
</div>
Anfrage stellen!
</div>
<div class="col-xl-8 col-lg-12">
<img src="https://dummyimage.com/600x400/000/fff" width="700" height="500" alt="Blablabla" itemprop="image">
</div>
</div>
</div>
</section>
<section id="leistungen" class="projects-section bg-light">
<div class="container">
<div class="row no-gutters mb-4 mb-lg-5">
<div class="col-xl-8 col-lg-12">
<img src="https://dummyimage.com/600x400/000/fff" width="700" height="500" alt="Blablabla" itemprop="image">
</div>
<div class="col-xl-4 col-lg-12">
<div class="featured-text">
<h4>Möbelmontage</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum voluptatibus facere recusandae perspiciatis, nobis voluptates, sed quod dolorum distinctio odit tempora exercitationem corporis magni at ea, sint, in ipsam doloremque!</p>
</div>
Anfrage stellen!
</div>
</div>
</div>
</section>
<section id="leistungen" class="projects-section bg-light">
<div class="container">
<div class="row no-gutters mb-4 mb-lg-5">
<div class="col-xl-4 col-lg-12">
<div class="featured-text">
<h4>Mitarbeiterumzüge</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum voluptatibus facere recusandae perspiciatis, nobis voluptates, sed quod dolorum distinctio odit tempora exercitationem corporis magni at ea, sint, in ipsam doloremque!</p>
</div>
Anfrage stellen!
</div>
<div class="col-xl-8 col-lg-12">
<img src="https://dummyimage.com/600x400/000/fff" width="700" height="500" alt="Blablabla" itemprop="image">
</div>
</div>
</div>
</section>
<section id="leistungen" class="projects-section bg-light">
<div class="container">
<div class="row no-gutters mb-4 mb-lg-5">
<div class="col-xl-8 col-lg-12">
<img src="https://dummyimage.com/600x400/000/fff" width="700" height="500" alt="Blablabla" itemprop="image">
</div>
<div class="col-xl-4 col-lg-12">
<div class="featured-text">
<h4>Möbellogistik</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum voluptatibus facere recusandae perspiciatis, nobis voluptates, sed quod dolorum distinctio odit tempora exercitationem corporis magni at ea, sint, in ipsam doloremque!</p>
</div>
Anfrage stellen!
</div>
</div>
</div>
</section>
That's what it looks like on desktop:
And that's what it looks like on mobile. Here, I just want the text always to appear under the picture and not over it:
I have solved it with the bootstrap classes d-flex and flex-column-reverse.
$(window).resize(function(){
// add bootstrap flex classes to :even rows if viewport is smaller then 1200px, remove otherwise
if ($(window).width() < 1200){
$('.services-section:even .row').addClass('d-flex flex-column-reverse');
}else{
$('.services-section:even .row').removeClass('d-flex flex-column-reverse');
}
});
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.