After searching and trying various solutions, I am still unable to get the desired output. My goal is to use grids in Bootstrap to set the footer layout with the class "link-footer" positioned at the middle height of the div and the class "footer-copyright" at the bottom. Here is an example of what I am aiming for:
Below is the clean code:
<footer class="page-footer">
<div class="container-fluid text-center">
<div class="row">
<div class="col-4 col-footer">
<h1>aloha name</h1>
</div>
<div class="col-2 link-footer">
<a href="#" class="text-uppercase">home</a>
</div>
<div class="col-2 link-footer">
<a href="#" class="text-uppercase">about me</a>
</div>
<div class="col-2 link-footer">
<a href="#" class="text-uppercase">projects</a>
</div>
<div class="col-2 link-footer">
<a href="#" class="text-uppercase">contact</a>
</div>
</div>
</div>
<div class="footer-copyright text-center">© 2020 Copyright:
<span>aloha</span>
</div>
</footer>
The accompanying CSS is straightforward:
footer {
background-color: #545454;
height: 200px;
}
.col-footer h1 {
text-transform: uppercase;
font-family: 'Montserrat', sans-serif;
font-weight: 800;
font-size:2em;
color:white;
}
.link-footer a {
font-size:1em;
color:white;
font-weight: 600;
text-decoration: none;
}
.link-footer a:hover {
color:#4860FF;
}
.footer-copyright {
background-color: #3b3b3b;
color: #838383;
}
.footer-copyright span{
color: white;
}
I have tried using margins, padding, vertical-align properties, but nothing seems to achieve the desired outcome. Any suggestions? Thank you!