While experimenting with Bootstrap, I encountered an issue where an element in the sidebar remains at the bottom instead of aligning to the right as intended.
https://i.sstatic.net/LdoS8.jpg
I attempted to float it to the right, but its position didn't change accordingly.
Below is the code snippet for reference:
I'm running out of ideas on how to fix this problem, so any assistance would be greatly appreciated.
HTML:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8" />
<title>Learning Bootstrap</title>
<link rel="stylesheet" href="Bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div class="container border">
<div class="row">
<header id="header" class="col-12 bg-primary text-white p-2 pl-5">
<h1>Learning Bootstrap</h1>
</header>
<nav id="menu" class="col-12 bg-secondary text-white">
<ul class="row w-50">
<li class="col">Home</li>
<li class="col">Page 1</li>
<li class="col">Page 2</li>
<li class="col">Page 3</li>
<li class="col">Contact</li>
</ul>
</nav>
<section id="content" class="col-12">
<div class="row">
<section id="products" class="col-9 border m-2">
<h2>Products</h2>
<hr>
<div class="items">
<div class="row">
<div class="item col bg-primary m-2">
Product
</div>
<div class="item col bg-warning m-2">
Product
</div>
<div class="item col bg-danger m-2">
Product
</div>
</div>
<div class="row mt-5">
<div class="item col bg-primary m-2">
Product
</div>
<div class="item col bg-warning m-2">
Product
</div>
<div class="item col bg-danger m-2">
Product
</div>
<div class="item col bg-success m-2">
Product
</div>
</div>
<div class="row mt-1 justify-content-around">
<div class="item col-3 bg-primary">
Product
</div>
<div class="item col-3 bg-warning">
Product
</div>
<div class="item col-3 bg-primary">
Product
</div>
</div>
</div>
</section>
<aside class="col-3 border">
<h2>Sidebar</h2>
<div class="lateral row bg-light align-items-center">
<div class="col-4 bg-primary align-self-start">
Element 1
</div>
<div class="col-4 bg-success align-self-center">
Element 2
</div>
<div class="col-4 bg-warning align-self-end">
Element 3
</div>
</div>
</aside>
</div>
</section>
<footer class="col-lg-12 bg-info">
Bootstrap Master - Cristina Martinez©
</footer>
</div>
</div>
<script type="text/javascript" src="JQuery/jquery-3.5.1.min.js"></script>
<script type="text/javascript" src="Bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
If more specific details are needed, please feel free to ask me directly.
Appreciate your support!