In the Bootstrap 5 code below there is a div with id "div-in-right-div" which is inside of a div with id "right-div". "div-in-right-div" is aligned with the top of "right-div".
What changes need to be done so that the inner div "div-in-right-div" is aligned vertically with the bottom of the outer div "right-div"?
I thought the class "align-bottom" which I’ve added to the div with id="right-div"
should do the trick, but it didn’t.
I’ve also added class "align-self-end" to div "div-in-right-div" in addition to the above and that also didn’t accomplish what I want.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
<style>
.custom-header {
max-width: 1200px;
margin: 0 auto;
background-color: yellow;
}
.right-block ul.nav {
display: flex;
align-items: center;
list-style: none;
padding: 0;
}
.right-block ul.nav li {
margin-left: 20px;
}
.right-block ul.nav li a {
text-decoration: none;
display: flex;
align-items: center;
position: relative;
}
.right-block ul.nav li .icon {
font-size: 20px;
margin-right: 5px;
}
/* Mobile-specific styling */
@media (max-width: 767px) {
/* ... Mobile styles ... */
}
/* Large screen specific styling */
@media (min-width: 992px) {
.right-block ul.nav li a::before {
content: "";
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 0;
height: 2px;
background-color: black;
transition: all 0.3s ease;
}
.right-block ul.nav li a:hover::before {
width: 100%;
}
}
</style>
<title>Bootstrap 5 Header Example</title>
</head>
<body>
<header class="custom-header">
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="left-block">
<!-- Content for the left block -->
<h3>Left Block</h3>
</div>
</div>
<div class="col-md-4">
<div class="central-block text-center">
<!-- Content for the center block -->
<h3>Central Block</h3>
</div>
</div>
<div class="col-md-4 align-bottom" id="right-div">
<div class="right-block align-self-end" id="div-in-right-div">
<!-- Content for the right block -->
<ul class="nav justify-content-end">
<li>
<a href="#">
<i class="bi bi-house icon"></i>
<span>Add</span>
</a>
</li>
<li>
<a href="#">
<i class="bi bi-person icon"></i>
<span>Login</span>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</header>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
2
Answers
Add
display: inline-grid;ordisplay: grid;style to#right-div.