Within the Bootstrap 5 code snippet provided, there is a nested div with the ID "div-in-right-div" inside another div with the ID "right-div". Currently, "div-in-right-div" is aligned with the top of "right-div". The question arises: How can you adjust the alignment so that the inner div "div-in-right-div" is vertically aligned with the bottom of the outer div "right-div"?
After attempting to use the class "align-bottom" on the div with the ID "right-div", which did not yield the desired outcome, I also experimented by adding the class "align-self-end" to the div "div-in-right-div" without success.
<!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/bootstrap@5/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons/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/bootstrap@5/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>