Footer layout, responsiveness and hiding on small devices with Bootstrap 4
Stack Overflow Asked by hotmeatballsoup on January 29, 2021
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> <a href="mailto:[email protected]">[email protected]</a>
<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"><a href="" class="">Status</a></div>
<div class="col-sm"><a href="" class="">Legal</a></div>
<div class="col-sm"><a href="" class="">Privacy</a></div>
<div class="col-sm"><a href="" class="">Terms</a></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?
3 Answers
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/[email protected]/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"><a href="" class="">Status</a></div>
<div class="col-sm-3"><a href="" class="">Legal</a></div>
<div class="col-sm-3"><a href="" class="">Privacy</a></div>
<div class="col-sm-3"><a href="" class="">Terms</a></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> <a href="mailto:[email protected]">[email protected]</a>
<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.
Answered by A. Meshu on January 29, 2021
.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/[email protected]/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"><a href="" class="">Status</a></div>
<div class="col-sm-3"><a href="" class="">Legal</a></div>
<div class="col-sm-3"><a href="" class="">Privacy</a></div>
<div class="col-sm-3"><a href="" class="">Terms</a></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> <a href="mailto:[email protected]">[email protected]</a>
<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;}
}
Answered by Meghshyam Sonar on January 29, 2021
<link href="https://cdn.jsdelivr.net/npm/[email protected]/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>Answered by Tanim on January 29, 2021
Add your own answers!
Ask a Question
Get help from others!
Recent Answers
- haakon.io on Why fry rice before boiling?
- Peter Machado on Why fry rice before boiling?
- Jon Church on Why fry rice before boiling?
- Lex on Does Google Analytics track 404 page responses as valid page views?
- Joshua Engel on Why fry rice before boiling?
Recent Questions
- How can I transform graph image into a tikzpicture LaTeX code?
- How Do I Get The Ifruit App Off Of Gta 5 / Grand Theft Auto 5
- Iv’e designed a space elevator using a series of lasers. do you know anybody i could submit the designs too that could manufacture the concept and put it to use
- Need help finding a book. Female OP protagonist, magic
- Why is the WWF pending games (“Your turn”) area replaced w/ a column of “Bonus & Reward”gift boxes?