Apologies if this question seems basic, I am just beginning to explore HTML, CSS, and bootstrap. My goal is to create a footer with five columns using bootstrap.
While I have managed to establish the five columns, I have spent hours attempting various methods without success. Aligning the items within these columns has proven to be a challenge. To view the complete site, click here:
You can find the repository here: https://github.com/stevenarroyave/UPTAKE
This is the desired layout: https://drive.google.com/file/d/1bp2ZitBU4VGjPLhevdDZPBG5BeyEAO5X/view?usp=sharing
<footer>
<div class="col-sm-12 text-left">
<div class="row">
<div class="col-sm-7 five-three">
<div class="row">
<div class="col-sm-4">
<img id="logo" class="logo" src="img/FooterLogo.png"></img>
</div>
<div class="col-sm-4 text-left">
<h5 class="text mb-4">UPTAKE</h5>
<ul class="list-inline mb-0">
<li class="list-inline-item">
<h5>About us</h5>
<li class="list-inline-item">
<h5>Contact Us</h5>
</li>
<li class="list-inline-item">
<h5>Blog</h5>
</li>
</ul>
</div>
<div class="col-sm-4 text-left">
<h5 class="text mb-4">HELP</h5>
<ul class="list-inline mb-0">
<li class="list-inline-item">
<h5>FAQ</h5>
<li class="list-inline-item">
<h5>Tips and suggestions</h5>
</li>
<li class="list-inline-item">
<h5>Customer service</h5>
</li>
</ul>
</div><!-- end inner row -->
</div>
</div>
<div class="col-sm-5 five-two">
<div class="row">
<div class="col-sm-6 text-left">
<h5 class="text mb-4">LEGAL</h5>
<ul class="list-inline mb-0">
<li class="list-inline-item">
<h5>Privacy Notice</h5>
<li class="list-inline-item">
<h5>Terms of use</h5>
</li>
<li class="list-inline-item">
<h5>How to use Uptake</h5>
</li>
</ul>
</div>
<div class="col-sm-6 text-left">
<h5 class="text mb-4">LANGUAGE</h5>
<ul class="list-inline mb-0">
<li class="list-inline-item">
<input type="text" placeholder="English">
</li>
</ul>
</div>
</div><!-- end inner row -->
</div>
</div><!-- end outer row -->
<div class="row">
<div class="col-12 text-right">
<hr>
<h5>Follow us!</h5>
<i class="fab fa-facebook-f"></i>
<i class="fab fa-twitter"></i>
<i class="fab fa-google-plus-g"></i>
<i class="fab fa-youtube"></i>
<i class="fab fa-instagram"></i>
</div>
</div>
</div>
</footer>
Although I was able to create the 5 columns, they are starting at varying heights. I aim to align them all at the same height and prevent the logo in the first column from resizing when adjusting the window size.
I am also unsure how to place the pink icons on the bottom to appear on the same line as "Follow us!"
Thank you in advance for your assistance.