Is there a way to move this div to the bottom of the page? https://i.sstatic.net/LR9cNqJd.png
This is the code snippet:
<div class="container-fluid">
<div class="row customRows">
<div class="col col-md-3">
<div class="d-flex mb-4">
<img src="{% static '/img/cat.png' %}" alt="Logo" class="img-fluid w-25 align-self-center">
<h1 class="heading-4 align-self-center">What are we studying today?</h1>
</div>
<ul class="m-0 p-0">
<a href="#" class="text-decoration-none">
<p class="parrafo menuItem rounded-2 p-2">
Home
</p>
</a>
<a href="#" class="text-decoration-none">
<p class="parrafo menuItem rounded-2 p-2">
Chat
</p>
</a>
<a href="#" class="text-decoration-none">
<p class="parrafo menuItem rounded-2 p-2">
Enter your class
</p>
</a>
<a href="#" class="text-decoration-none">
<p class="parrafo menuItem rounded-2 p-2">
Search classes
</p>
</a>
<a href="#" class="text-decoration-none">
<p class="parrafo menuItem rounded-2 p-2">
Calendar
</p>
</a>
</ul>
<div class="text-center">
<img src="{% static '/img/laying.png' %}" alt="" class="w-75">
</div>
<div class="profileContainer row p-2 mt-auto">
<div class="col-2">
<img src="{% static '/img/girl3.png' %}" class="w-100">
</div>
<div class="col-10 my-auto">
<a href="#" class="text-decoration-none">
<p class="parrafo menuItem rounded-2 p-2 m-0">
User Name
</p>
</a>
</div>
</div>
</div>
<div class="col col-md-9"></div>
</div>
I have experimented with various methods such as using the 'mt-auto' class from Bootstrap, 'mb-auto' from Bootstrap (to test if the 'ul' element pushed the container to the bottom), setting margin-bottom auto in CSS, and applying 'd-flex' and 'flex-column' with flex-grow (though this caused a change in content distribution).
.menuItem {
transition: background-color 0.3s ease;
border-bottom: 1px solid var(--grisClaro2);
}
.menuItem:hover {
background-color: var(--grisClaro2)!important;
}
.profileContainer {
border-top: 1px solid var(--grisClaro2);
}
.customRows {
height: 100vh;
}