Footer layout, responsiveness and hiding on small devices with Bootstrap 4 - html

Question

New to Bootstrap 4 here. I'm trying to get my page footer to conform to the same layout as the following mockup:
My best attempt thus far is as follows:
index.html (snippet):
<!-- footer -->
<hr/>
<div class="container-fluid">
<div class="row">
<div class="col-sm">
<span class="linklist-label">Foobar</span>
<ul class="linklist">
<li><a class="footer-link" href="">Fizz</a></li>
<li><a class="footer-link" href="">Buzz</a></li>
<li><a class="footer-link" href="">Foobar</a></li>
</ul>
</div>
<div class="col-sm">
<span class="linklist-label">Other Stuff</span>
<ul class="linklist">
<li><a class="footer-link" href="">Cool Links</a></li>
<li><a class="footer-link" href="">What's New</a></li>
<li><a class="footer-link" href="">Newsletter</a></li>
</ul>
</div>
<div class="col-sm">
<span class="linklist-label">Zoo Stuff</span>
<ul class="linklist">
<li><a class="footer-link" href="">Zebras</a></li>
<li><a class="footer-link" href="">Rhinos</a></li>
<li><a class="footer-link" href="">Monkeys</a></li>
</ul>
</div>
</div>
<div class="row">
<div class="col-6">
<img src="dummy-logo.png" class="img-fluid footer-logo" alt="My logo">
</div>
<div class="col-sm">
<span class="linklist-label">Contact Us</span>
<br/><span class="fas fa-phone" aria-hidden="true"></span> 800.555.5555
<br/><span class="fas fa-envelope" aria-hidden="true"></span> info#example.com
<br/><span class="fas fa-map-marker-alt" aria-hidden="true"></span> 123 Testville Rd
<br/> Testville, XY 12345
</div>
</div>
</div>
<div class="row">
<div class="col-sm">Status</div>
<div class="col-sm">Legal</div>
<div class="col-sm">Privacy</div>
<div class="col-sm">Terms</div>
</div>
main.css:
html, body {
height: 100%;
font-family: 'Lato';
}
.bordered {
border-radius: 5px;
border: 1px solid white;
}
.navbar {
background-color: #00142E;
}
#navb ul {
align-items: center;
}
.red-button {
border-radius: 5px;
border: 1px solid #A81E30;
background-color: #A81E30;
color: beige;
}
.mainlogo {
height: 50px;
}
.footer-logo {
height: 100px;
}
hr {
margin-top: 1rem;
margin-bottom: 1rem;
border: 0;
border-top: 1px solid rgba(0, 0, 0, 0.1);
}
.linklist {
list-style-type: none;
padding-left: 0;
}
.linklist-label {
font-weight: bolder;
color: #A81E30;
}
.linklist a.footer-link {
color: #00142E;
}
.linklist a.footer-link:hover {
color: gray;
}
When this runs in the browser, I get:
As you can see, I'm kinda sorta somewhat there, but still have a ways to go. As far as responsiveness goes, I think that if the screen is small (mobile device, etc.) I want the footer (everything here) to disappear entirely.
Can anyone spot where my layout/positioning is going awry and also help me achieve the "disappear on small screen" functionality I'm looking for?

Answer 1

.mainlogo {
height: 50px;
}
.footer-logo {
height: 100px;
}
hr {
margin-top: 1rem;
margin-bottom: 1rem;
border: 0;
border-top: 1px solid rgba(0, 0, 0, 0.1);
}
.linklist {
list-style-type: none;
padding-left: 0;
}
.linklist-label {
font-weight: bolder;
color: #A81E30;
}
.linklist a.footer-link {
color: #00142E;
}
.linklist a.footer-link:hover {
color: gray;
}
#myLogo {
width: 360px;
height: 58px;
border: 1px solid red;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css"
integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<hr>
<div class="container-fluid d-none d-sm-block">
<div class="row">
<div class="col-sm-8">
<div class="row">
<div class="col-sm-6">
<span class="linklist-label">Foobar</span>
<ul class="linklist">
<li><a class="footer-link" href="">Fizz</a></li>
<li><a class="footer-link" href="">Buzz</a></li>
<li><a class="footer-link" href="">Foobar</a></li>
</ul>
</div>
<div class="col-sm-6">
<span class="linklist-label">Other Stuff</span>
<ul class="linklist">
<li><a class="footer-link" href="">Cool Links</a></li>
<li><a class="footer-link" href="">What's New</a></li>
<li><a class="footer-link" href="">Newsletter</a></li>
</ul>
</div>
<div class="col-sm-12">
<img src="dummy-logo.png" class="img-fluid footer-logo" alt="My logo" id="myLogo">
</div>
<div class="col-sm-12">
<div class="row">
<div class="col-sm-3">Status</div>
<div class="col-sm-3">Legal</div>
<div class="col-sm-3">Privacy</div>
<div class="col-sm-3">Terms</div>
</div>
</div>
</div>
</div>
<div class="col-sm-4">
<span class="linklist-label">Zoo Stuff</span>
<ul class="linklist">
<li><a class="footer-link" href="">Zebras</a></li>
<li><a class="footer-link" href="">Rhinos</a></li>
<li><a class="footer-link" href="">Monkeys</a></li>
</ul>
<span class="linklist-label">Contact Us</span>
<br/><span class="fas fa-phone" aria-hidden="true"></span> 800.555.5555
<br/><span class="fas fa-envelope" aria-hidden="true"></span> info#example.com
<br/><span class="fas fa-map-marker-alt" aria-hidden="true"></span> 123 Testville Rd
<br/> Testville, XY 12345
</div>
</div>
</div>
For making your footer disappear for certain device you need to mentioned maximum and minimum size of screen where you want to display.
#media only screen and (max-width: 767px) and (min-width: 480px) {
.footer{ display: none !important;}
}

Answer 2

<link href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<footer class="d-none d-sm-block">
<div class="container-fluid">
<div class="row my-2">
<div class="col-4">
<div class="footer-col py-5 bg-success">
<p class="text-white text-center">Title & list items</p>
</div>
</div>
<div class="col-4">
<div class="footer-col py-5 bg-success">
<p class="text-white text-center">Title & list items</p>
</div>
</div>
<div class="col-4">
<div class="footer-col py-5 bg-success">
<p class="text-white text-center">Title & list items</p>
</div>
</div>
</div>
<div class="row my-3">
<div class="col-8">
<div class="footer-col">
<figure class="py-5 bg-info">
<p class="text-white text-center">The image</p>
</figure>
<ul class="nav justify-content-around py-1 bg-primary">
<p class="text-white text-center">Footer nav</p>
</ul>
</div>
</div>
<div class="col-4">
<div class="footer-col py-5 bg-success">
<p class="text-white text-center">Title & list items</p>
</div>
</div>
</div>
</div>
</footer>

Answer 3

You can nest row and columns like this:
html, body {
height: 100%;
font-family: 'Lato';
}
.bordered {
border-radius: 5px;
border: 1px solid white;
}
.navbar {
background-color: #00142E;
}
#navb ul {
align-items: center;
}
.red-button {
border-radius: 5px;
border: 1px solid #A81E30;
background-color: #A81E30;
color: beige;
}
.mainlogo {
height: 50px;
}
.footer-logo {
height: 100px;
}
hr {
margin-top: 1rem;
margin-bottom: 1rem;
border: 0;
border-top: 1px solid rgba(0, 0, 0, 0.1);
}
.linklist {
list-style-type: none;
padding-left: 0;
}
.linklist-label {
font-weight: bolder;
color: #A81E30;
}
.linklist a.footer-link {
color: #00142E;
}
.linklist a.footer-link:hover {
color: gray;
}
#myLogo { display: block; width: 360px; height: 58px; border: 1px solid red; margin: 1em auto;}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css"
integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<hr>
<div class="container-fluid d-none d-sm-block">
<div class="row">
<div class="col-sm-8">
<div class="row">
<div class="col-sm-6">
<span class="linklist-label">Foobar</span>
<ul class="linklist">
<li><a class="footer-link" href="">Fizz</a></li>
<li><a class="footer-link" href="">Buzz</a></li>
<li><a class="footer-link" href="">Foobar</a></li>
</ul>
</div>
<div class="col-sm-6">
<span class="linklist-label">Other Stuff</span>
<ul class="linklist">
<li><a class="footer-link" href="">Cool Links</a></li>
<li><a class="footer-link" href="">What's New</a></li>
<li><a class="footer-link" href="">Newsletter</a></li>
</ul>
</div>
<div class="col-sm-12">
<img src="dummy-logo.png" class="img-fluid footer-logo" alt="My logo" id="myLogo">
</div>
<div class="col-sm-12">
<div class="row">
<div class="col-sm-3">Status</div>
<div class="col-sm-3">Legal</div>
<div class="col-sm-3">Privacy</div>
<div class="col-sm-3">Terms</div>
</div>
</div>
</div>
</div>
<div class="col-sm-4">
<span class="linklist-label">Zoo Stuff</span>
<ul class="linklist">
<li><a class="footer-link" href="">Zebras</a></li>
<li><a class="footer-link" href="">Rhinos</a></li>
<li><a class="footer-link" href="">Monkeys</a></li>
</ul>
<span class="linklist-label">Contact Us</span>
<br/><span class="fas fa-phone" aria-hidden="true"></span> 800.555.5555
<br/><span class="fas fa-envelope" aria-hidden="true"></span> info#example.com
<br/><span class="fas fa-map-marker-alt" aria-hidden="true"></span> 123 Testville Rd
<br/> Testville, XY 12345
</div>
</div>
</div>
Notes::
This markup completely fit for both bootstrap 3x and 4x (haven't tried 5).
Read more on grid system here: boots4, boots3 .
The only different is the class combination d-none.d-sm-block that replace hidden-xs of bootstrap 3: This class(es) would hide the element on small devices based on framework #media rules.
Read more about helper classes for display content here.