How to align at the bottom a flex-row inside a card? I currently have two cards aligned side by side but when one of the texts is smaller than the other the divs that contain "(100)(100)" lose their alignment.
I'm aware of questions likes this one but I have tried their solutions and nothing worked.
Running example.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row mb-2">
<div class="col-md-6 d-flex align-items-stretch">
<div class="card mb-4 shadow bg-white rounded">
<div class="card-body">
<div class="row pb-0">
<div class="col-9">
<strong class="mb-2 text-secondary"">Name A</strong>
</div>
<div class="col-3">
<img class="mb-2 rounded-circle float-right" src="" style="max-width:30px; height:auto;" alt="">
</div>
</div>
<h3 class="card-title mb-0">
<a target="_blank" rel="noopener noreferrer" class="text-dark" href="">Article 1 Title</a>
</h3>
<div class="mb-1 text-muted date">2020-01-01</div>
<p class="card-text mb-auto blog-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eu sem integer vitae justo eget magna fermentum. Ultricies lacus sed turpis tincidunt id aliquet risus feugiat in. Eget felis eget nunc lobortis mattis aliquam faucibus.</p>
<!-- This should be aligned to the bottom -->
<div class="d-flex flex-row mt-0 ml-0 pl-0 ">
<!-- <span class="flaticon-clapping-2" data-toggle="tooltip" data-placement="top" title="Nº de likes no Arquivo de Opinião"></span> -->
<span class="flaticon-facebook-1" data-toggle="tooltip" data-placement="top" title="Engagment Facebook: nº de partilhas + nº de reações + nº de comentários"></span>
<span class="flaticon-facebook-1-text" data-toggle="tooltip" data-placement="top" data-html="true">(100)</span>
<span class="flaticon-twitter-1" data-toggle="tooltip" data-placement="top" ></span>
<span class="flaticon-twitter-1-text" data-toggle="tooltip" data-placement="top" title="">(100)</span>
</div>
</div>
</div>
</div>
<div class="col-md-6 d-flex align-items-stretch">
<div class="card mb-4 shadow bg-white rounded">
<div class="card-body">
<div class="row pb-0">
<div class="col-9">
<strong class="mb-2 text-secondary"">Name A</strong>
</div>
<div class="col-3">
<img class="mb-2 rounded-circle float-right" src="" style="max-width:30px; height:auto;" alt="">
</div>
</div>
<h3 class="card-title mb-0">
<a target="_blank" rel="noopener noreferrer" class="text-dark" href="">Article 1 Title</a>
</h3>
<div class="mb-1 text-muted date">2020-02-01</div>
<p class="card-text mb-auto blog-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
<!-- This should be aligned to the bottom -->
<div class="d-flex flex-row mt-0 ml-0 pl-0 ">
<span class="flaticon-facebook-1" data-toggle="tooltip" data-placement="top" title="Engagment Facebook: nº de partilhas + nº de reações + nº de comentários"></span>
<span class="flaticon-facebook-1-text" data-toggle="tooltip" data-placement="top" data-html="true">(100)</span>
<span class="flaticon-twitter-1" data-toggle="tooltip" data-placement="top" ></span>
<span class="flaticon-twitter-1-text" data-toggle="tooltip" data-placement="top" title="">(100)</span>
</div>
</div>
</div>
</div>
</div>
If you add d-flex flex-column in card-body div and mt-auto in bottom div, will solve your problem.
Full code below:
<!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>Document</title>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row mb-2">
<div class="col-md-6 d-flex align-items-stretch">
<div class="card mb-4 shadow bg-white rounded">
<div class="card-body d-flex flex-column">
<div class="row pb-0">
<div class="col-9">
<strong class="mb-2 text-secondary">Name A</strong>
</div>
<div class="col-3">
<img class="mb-2 rounded-circle float-right" src="" style="max-width:30px; height:auto;" alt="">
</div>
</div>
<h3 class="card-title mb-0">
<a target="_blank" rel="noopener noreferrer" class="text-dark" href="">Article 1 Title</a>
</h3>
<div class="mb-1 text-muted date">2020-01-01</div>
<p class="card-text mb-auto blog-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eu sem integer vitae justo eget magna fermentum. Ultricies lacus sed turpis tincidunt id aliquet risus feugiat in. Eget felis eget nunc lobortis mattis aliquam faucibus.</p>
<!-- This should be aligned to the bottom -->
<div class="d-flex flex-row mt-auto ml-0 pl-0 ">
<!-- <span class="flaticon-clapping-2" data-toggle="tooltip" data-placement="top" title="Nº de likes no Arquivo de Opinião"></span> -->
<span class="flaticon-facebook-1" data-toggle="tooltip" data-placement="top" title="Engagment Facebook: nº de partilhas + nº de reações + nº de comentários"></span>
<span class="flaticon-facebook-1-text" data-toggle="tooltip" data-placement="top" data-html="true">(100)</span>
<span class="flaticon-twitter-1" data-toggle="tooltip" data-placement="top" ></span>
<span class="flaticon-twitter-1-text" data-toggle="tooltip" data-placement="top" title="">(100)</span>
</div>
</div>
</div>
</div>
<div class="col-md-6 d-flex align-items-stretch">
<div class="card mb-4 shadow bg-white rounded">
<div class="card-body d-flex flex-column">
<div class="row pb-0">
<div class="col-9">
<strong class="mb-2 text-secondary">Name A</strong>
</div>
<div class="col-3">
<img class="mb-2 rounded-circle float-right" src="" style="max-width:30px; height:auto;" alt="">
</div>
</div>
<h3 class="card-title mb-0">
<a target="_blank" rel="noopener noreferrer" class="text-dark" href="">Article 1 Title</a>
</h3>
<div class="mb-1 text-muted date">2020-02-01</div>
<p class="card-text mb-auto blog-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
<!-- This should be aligned to the bottom -->
<div class="d-flex flex-row mt-auto ml-0 pl-0 ">
<span class="flaticon-facebook-1" data-toggle="tooltip" data-placement="top" title="Engagment Facebook: nº de partilhas + nº de reações + nº de comentários"></span>
<span class="flaticon-facebook-1-text" data-toggle="tooltip" data-placement="top" data-html="true">(100)</span>
<span class="flaticon-twitter-1" data-toggle="tooltip" data-placement="top" ></span>
<span class="flaticon-twitter-1-text" data-toggle="tooltip" data-placement="top" title="">(100)</span>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Related
I am trying to make a carousel using Bootstrap, I was using an example but it uses the entire window and any further div's are not shown, how do I fix this so the div's can be shown correctly, please?
Whilst researching I came across this example but I can't figure out what they have done to fix this.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://getbootstrap.com/docs/5.2/assets/css/docs.css" rel="stylesheet">
<title>Test</title>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/js/bootstrap.bundle.min.js"></script>
<!-- Icon Font Stylesheet -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.0/css/all.min.css" rel="stylesheet">
<link href="header_style.css" rel="stylesheet">
</head>
<body>
<!-- Carousel Start -->
<div class="container-fluid p-0 mb-5">
<div id="header-carousel" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="w-100" src="licensed/p1.jpeg" alt="Image">
<div class="carousel-caption">
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-7 pt-5">
<h1 class="display-4 text-white mb-3 animated slideInDown">Let's Change The World With Humanity</h1>
<p class="fs-5 text-white-50 mb-5 animated slideInDown">Aliqu diam amet diam et eos. Clita erat ipsum et lorem sed stet lorem sit clita duo justo erat amet</p>
<a class="btn btn-primary py-2 px-3 animated slideInDown" href="">
Learn More
<div class="d-inline-flex btn-sm-square bg-white text-primary rounded-circle ms-2">
<i class="fa fa-arrow-right"></i>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<img class="w-100" src="licensed/p2.jpeg" alt="Image">
<div class="carousel-caption">
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-7 pt-5">
<h1 class="display-4 text-white mb-3 animated slideInDown">Let's Save More Lifes With Our Helping Hand</h1>
<p class="fs-5 text-white-50 mb-5 animated slideInDown">Aliqu diam amet diam et eos. Clita erat ipsum et lorem sed stet lorem sit clita duo justo erat amet</p>
<a class="btn btn-primary py-2 px-3 animated slideInDown" href="">
Learn More
<div class="d-inline-flex btn-sm-square bg-white text-primary rounded-circle ms-2">
<i class="fa fa-arrow-right"></i>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#header-carousel"
data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#header-carousel"
data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</div>
<!-- Carousel End -->
<div">
<p>Test #1</p>
</div>
<div">
<p>Test #1</p>
</div>
<div">
<p>Test #1</p>
</div>
</body>
</html>
you can make it more responsive using height: 100vh which is equal to vh-100 in bootstrap. (add this class with the width class of before w-100)
and for making the image more responsive for all dimensions, just use object-fit: cover
now is responsive for mobile and pc
also solve the div error ❌<div"> -> ✅<div>
.carousel-item img {
height: 100vh; /* vh-100 class */
width: 100%; /* w-100 class */
object-fit: cover; /* make image not stretch */
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://getbootstrap.com/docs/5.2/assets/css/docs.css" rel="stylesheet" />
<title>Test</title>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/js/bootstrap.bundle.min.js"></script>
<!-- Icon Font Stylesheet -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.0/css/all.min.css" rel="stylesheet" />
<link href="header_style.css" rel="stylesheet" />
</head>
<body>
<!-- Carousel Start -->
<div class="container-fluid p-0 mb-5">
<div id="header-carousel" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://picsum.photos/5000" alt="Image" />
<div class="carousel-caption">
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-7 pt-5">
<h1 class="display-4 text-white mb-3 animated slideInDown">
Let's Change The World With Humanity
</h1>
<p class="fs-5 text-white-50 mb-5 animated slideInDown">
Aliqu diam amet diam et eos. Clita erat ipsum et lorem sed stet lorem sit clita duo justo erat amet
</p>
<a class="btn btn-primary py-2 px-3 animated slideInDown" href="">
Learn More
<div
class="d-inline-flex btn-sm-square bg-white text-primary rounded-circle ms-2"
>
<i class="fa fa-arrow-right"></i>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<img src="https://picsum.photos/5000" alt="Image" />
<div class="carousel-caption">
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-7 pt-5">
<h1 class="display-4 text-white mb-3 animated slideInDown">
Let's Save More Lifes With Our Helping Hand
</h1>
<p class="fs-5 text-white-50 mb-5 animated slideInDown">
Aliqu diam amet diam et eos. Clita erat ipsum et lorem sed stet lorem sit clita duo justo erat amet
</p>
<a class="btn btn-primary py-2 px-3 animated slideInDown" href="">
Learn More
<div
class="d-inline-flex btn-sm-square bg-white text-primary rounded-circle ms-2"
>
<i class="fa fa-arrow-right"></i>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#header-carousel" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#header-carousel" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</div>
<!-- Carousel End -->
<div>
<p>Test #1</p>
</div>
<div>
<p>Test #1</p>
</div>
<div>
<p>Test #1</p>
</div>
</body>
</html>
Add width:100% and height for carousel-item
.carousel-item {
height: 500px;
width: 100%;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.0/css/all.min.css" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/js/bootstrap.bundle.min.js"></script>
<div class="container-fluid p-0 mb-5">
<div id="header-carousel" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="w-100" src="https://via.placeholder.com/150" alt="Image">
<div class="carousel-caption">
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-7 pt-5">
<h1 class="display-4 text-white mb-3 animated slideInDown">Let's Change The World With Humanity</h1>
<p class="fs-5 text-white-50 mb-5 animated slideInDown">Aliqu diam amet diam et eos. Clita erat ipsum et lorem sed stet lorem sit clita duo justo erat amet</p>
<a class="btn btn-primary py-2 px-3 animated slideInDown" href="">
Learn More
<div class="d-inline-flex btn-sm-square bg-white text-primary rounded-circle ms-2">
<i class="fa fa-arrow-right"></i>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<img class="w-100" src="https://via.placeholder.com/150" alt="Image">
<div class="carousel-caption">
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-7 pt-5">
<h1 class="display-4 text-white mb-3 animated slideInDown">Let's Save More Lifes With Our Helping Hand</h1>
<p class="fs-5 text-white-50 mb-5 animated slideInDown">Aliqu diam amet diam et eos. Clita erat ipsum et lorem sed stet lorem sit clita duo justo erat amet</p>
<a class="btn btn-primary py-2 px-3 animated slideInDown" href="">
Learn More
<div class="d-inline-flex btn-sm-square bg-white text-primary rounded-circle ms-2">
<i class="fa fa-arrow-right"></i>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#header-carousel"
data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#header-carousel"
data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</div>
<!-- Carousel End -->
<div>
<p>Test #1</p>
</div>
<div>
<p>Test #1</p>
</div>
<div>
<p>Test #1</p>
</div>
The text col-xs-9 col-md-9 overlaps with the image col-xs-3 col-md-3. I tried to include img-responsive in the img src but it doesn't work. I didn't use CSS in this part of my activity.
<!-- Latest compiled and minified CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<div class="container-fluid padding">
<div class="p-3 my-4 bg-light rounded-3">
<div class="row">
<div class="col-xs-3 col-md-3">
<img src="https://via.placeholder.com/500" height="224" width="224" class="img-responsive">
</div>
<div class="col-xs-9 col-md-9">
<h1> HELLO!</h1>
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
</div>
</div>
The img-responsive was renamed to img-fluid. Replace the class name and that should solve your problem.
This question already has answers here:
Bootstrap 4 card-deck with number of columns based on viewport
(11 answers)
Boostrap 4 - Card deck and different sizes
(3 answers)
bootstrap 4 card-deck containing cards with different width
(1 answer)
Closed 1 year ago.
I've seen a couple similar questions, but none of them seem to address cards that are generated. My goal is to have 4 or less cards per row, at a fixed height/width. Below is the code I currently have:
<div class="container">
<div class="card-deck">
#foreach (var item in Model)
{
<div class="card shadow">
<div class="card-title pl-4 pr-4 pt-3">
<h4><a class="stretched-link deco-none font-weight-bold" asp-controller="Home" asp-action="TrainingDetails" asp-route-id="#item.TrainingId">#Html.DisplayFor(modelItem => item.Title)</a></h4>
</div>
<div class="card-body overflow pl-4 pr-4 pb-2">
<div class="font-weight-bold text-secondary">
#Convert.ToDateTime(item.DateCreated).ToString("MM/dd/yy")
</div>
#Html.DisplayFor(modelItem => item.Description)
</div>
<div class="card-footer">
<div class="text-center text-muted training-footer">
#Html.DisplayFor(modelItem => item.Topic.Topic)
</div>
</div>
</div>
}
</div>
</div>
Currently it puts all the cards on a single row, and each card itself is incredibly thin. What do I have to add to get it to break off into multiple rows of fixed size?
Thanks for any help!
You can use Bootstrap’s grid system with row-cols-1 row-cols-md-2 to define how many cards in a row at each breakpoint. All of the cards will be the same height.
<link href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/js/bootstrap.bundle.min.js"></script>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav ml-auto">
<a class="nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
<a class="nav-link" href="#">Features</a>
<a class="nav-link" href="#">Pricing</a>
</div>
</div>
</nav>
<div class="container mt-5">
<div class="row row-cols-1 row-cols-md-2 row-cols-lg-3">
<div class="col mb-4">
<div class="card shadow h-100">
<div class="card-title pl-4 pr-4 pt-3">
<h4><a class="stretched-link deco-none font-weight-bold" asp-controller="Home" asp-action="TrainingDetails" asp-route-id="TrainingRoute">First Title</a></h4>
</div>
<div class="card-body overflow pl-4 pr-4 pb-2">
<div class="font-weight-bold text-secondary">
03/21/21
</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
<div class="card-footer">
<div class="text-center text-muted training-footer">
Last updated 7 days ago
</div>
</div>
</div>
</div>
<div class="col mb-4">
<div class="card shadow h-100">
<div class="card-title pl-4 pr-4 pt-3">
<h4><a class="stretched-link deco-none font-weight-bold" asp-controller="Home" asp-action="TrainingDetails" asp-route-id="TrainingRoute">Second Title</a></h4>
</div>
<div class="card-body overflow pl-4 pr-4 pb-2">
<div class="font-weight-bold text-secondary">
03/22/21
</div>
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
<div class="card-footer">
<div class="text-center text-muted training-footer">
Last updated 6 days ago
</div>
</div>
</div>
</div>
<div class="col mb-4">
<div class="card shadow h-100">
<div class="card-title pl-4 pr-4 pt-3">
<h4><a class="stretched-link deco-none font-weight-bold" asp-controller="Home" asp-action="TrainingDetails" asp-route-id="TrainingRoute">Third Title</a></h4>
</div>
<div class="card-body overflow pl-4 pr-4 pb-2">
<div class="font-weight-bold text-secondary">
03/24/21
</div>
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
</div>
<div class="card-footer">
<div class="text-center text-muted training-footer">
Last updated 5 days ago
</div>
</div>
</div>
</div>
<div class="col mb-4">
<div class="card shadow h-100">
<div class="card-title pl-4 pr-4 pt-3">
<h4><a class="stretched-link deco-none font-weight-bold" asp-controller="Home" asp-action="TrainingDetails" asp-route-id="TrainingRoute">Fourth Title</a></h4>
</div>
<div class="card-body overflow pl-4 pr-4 pb-2">
<div class="font-weight-bold text-secondary">
03/25/21
</div>
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div class="card-footer">
<div class="text-center text-muted training-footer">
Last updated 4 days ago
</div>
</div>
</div>
</div>
<div class="col mb-4">
<div class="card shadow h-100">
<div class="card-title pl-4 pr-4 pt-3">
<h4><a class="stretched-link deco-none font-weight-bold" asp-controller="Home" asp-action="TrainingDetails" asp-route-id="TrainingRoute">Fifth Title</a></h4>
</div>
<div class="card-body overflow pl-4 pr-4 pb-2">
<div class="font-weight-bold text-secondary">
03/26/21
</div>
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
</div>
<div class="card-footer">
<div class="text-center text-muted training-footer">
Last updated 3 days ago
</div>
</div>
</div>
</div>
<div class="col mb-4">
<div class="card shadow h-100">
<div class="card-title pl-4 pr-4 pt-3">
<h4><a class="stretched-link deco-none font-weight-bold" asp-controller="Home" asp-action="TrainingDetails" asp-route-id="TrainingRoute">Sixth Title</a></h4>
</div>
<div class="card-body overflow pl-4 pr-4 pb-2">
<div class="font-weight-bold text-secondary">
03/27/21
</div>
Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
</div>
<div class="card-footer">
<div class="text-center text-muted training-footer">
Last updated 2 days ago
</div>
</div>
</div>
</div>
</div>
</div>
So - yes, it's some sort of vertical align thing again (sorry!). I read the documentation and other questions regarding this topic, did my first projects and tried out different approaches, but somehow I can't figure out how to do this the "right way" with bootrap.
I want the elements inside of the columns to align on the same horizontal line (starting from the top) with the respective element from the other column. So, the h3 elements are all on the same horizontal line , the buttons are all on the same line etc.
I made 3 columns
<div class="container">
<div class="row justify-content-around>
<div class="col-md-4 d-flex flex-column align-items-center">
<h3> A Title </h3>
<hr>
<p> looooong text </p> <br>
<img src="an icon" width="55" height="55">
<button> A button </button>
</div>
<div class="col-md-4 d-flex flex-column align-items-center">
<h3> A Title </h3>
<hr>
<p> looooong text </p> <br>
<img src="an icon" width="55" height="55">
<button> A button </button>
</div>
<div class="col-md-4 d-flex flex-column align-items-center">
<h3> A Title </h3>
<hr>
<p> Short text </p> <br>
<img src="an icon" width="55" height="55">
<button> A button </button>
</div>
</div>
</div>
I could use "justify-content-between" on each column. But then, if one of the "p" content is longer than the one of another column, it won't work as intended - the shorter text would not start on the same horizontal line as the other texts, as my example below will demonstrate. Fixing it with manual margins would mess it up, should the text be changed later on by a client.
Justify-Content-Between: This is what I don't want
What would be a good way to achieve this kind of alignment?
You can divide your content and your icon/button into separate rows within each column, and then align the div with the icon/button to the bottom of the column.
<link href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row justify-content-around">
<div class="col-md-4 d-flex flex-column mb-5">
<div class="row">
<div class="col">
<h3> A Title </h3>
<hr>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
</div>
</div>
<div class="row align-self-center h-100">
<div class="col d-flex">
<div class="align-self-end">
<img src="an icon" class="d-block my-1 mx-auto" width="55" height="55">
<button> A button </button>
</div>
</div>
</div>
</div>
<div class="col-md-4 d-flex flex-column mb-5">
<div class="row">
<div class="col">
<h3> A Title </h3>
<hr>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
<div class="row align-self-center h-100">
<div class="col d-flex">
<div class="align-self-end">
<img src="an icon" class="d-block my-1 mx-auto" width="55" height="55">
<button> A button </button>
</div>
</div>
</div>
</div>
<div class="col-md-4 d-flex flex-column mb-5">
<div class="row">
<div class="col">
<h3> A Title </h3>
<hr>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<div class="row align-self-center h-100">
<div class="col d-flex">
<div class="align-self-end">
<img src="an icon" class="d-block my-1 mx-auto" width="55" height="55">
<button> A button </button>
</div>
</div>
</div>
</div>
</div>
</div>
I used align-self-end to position the row with the icon and button at the bottom, but IE11 doesn’t support flex start and end, so the layout doesn’t look as nice on IE11.
One other note – your sample code is missing the closing quote for the classes in the line: <div class="row justify-content-around>
Here are the elements that I want them to be combined into a swipeable carousel. Is there a way to do this? I just want them to turn into carousel only in mobile view.
Here is the HTML if needed. Thanks for help.
<div class="col-md-5 col-xs-12 d-flex justify-content-center little">
<div class="col launch">
<div class="row-sm-3 row-md-4 fx">
<div class="row d-flex justify-content-center resim"><img src="css/img/Icon1.png" alt=""></div>
<div class="row d-flex justify-content-center baslik">First 7 Days Free</div>
<div class="row d-flex justify-content-center yazi">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut.</div>
</div>
<div class="row-sm-3 row-md-4 fx">
<div class="row d-flex justify-content-center resim"><img src="css/img/Icon2.png" alt=""></div>
<div class="row d-flex justify-content-center baslik">Fully Support</div>
<div class="row d-flex justify-content-center yazi">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut.</div>
</div>
</div>
<div class="col star">
<div class="row-sm-3 row-md-4 fx">
<div class="row d-flex justify-content-center resim"><img src="css/img/Icon3.png" alt=""></div>
<div class="row d-flex justify-content-center baslik">Modern Flat Design</div>
<div class="row d-flex justify-content-center yazi">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut.</div>
</div>
<div class="row-sm-3 row-md-4 fx" >
<div class="row d-flex justify-content-center resim" ><img src="css/img/Icon4.png" alt="" id="ozel"></div>
<div class="row d-flex justify-content-center baslik">User Friendly</div>
<div class="row d-flex justify-content-center yazi">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut.</div>
</div>
</div>
</div>
I guess the only opportunity is to have both code for your grid-like display (as shown above) and for your carousel like this:
<!-- Code of your grid view -->
<div id="gridView">
<div class="col-md-5 col-xs-12 d-flex justify-content-center little">
...
</div>
</div>
<!-- Code of your carousel -->
<div id="carouselExampleControls" class="carousel slide mx-3 my-2" data-ride="carousel">
...
</div>
Next use Bootstrap display property to properly show and hide the containers, e.g., d-md-none to hide on md and wider screens and d-none d-md-block to hide on screens smaller than md:
<!-- Code of your grid view -->
<div id="gridView" class="d-none d-md-block">
<div class="col-md-5 col-xs-12 d-flex justify-content-center little">
...
</div>
</div>
<!-- Code of your carousel -->
<div id="carouselExampleControls" class="carousel slide mx-3 my-2 d-md-none" data-ride="carousel">
...
</div>
Since you are using d-flex, I put the extra <div id="gridView"> around it.
Here is an example of a Bootstrap carousel with captions:
<div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
<li data-target="#carouselExampleCaptions" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="..." class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>First slide label</h5>
<p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
</div>
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>Second slide label</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>Third slide label</h5>
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleCaptions" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleCaptions" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
You can easily integrate your containers there and combine it with the above mentioned approach.
Good luck!