Designing the footer for small devices using Bootstrap 4, including layout, responsiveness, and hiding functionalities

Just diving into the world of Bootstrap 4 and facing a challenge with my page footer layout. I have a mockup that I'm trying to replicate:

https://i.sstatic.net/pXyMR.png

This is what I've come up with so far:

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">

      ...

</div>

<div class="row">

          ...
          
+-- insert code here --+

<pre><code>

While making progress, I still have some work ahead of me to reach my goal. Additionally, for responsive design purposes, I want the entire footer to disappear on smaller screens like mobile devices.

If anyone could provide guidance on correcting my layout and achieving the "disappear on small screen" functionality, it would be greatly appreciated!

htmlcssbootstrap-4responsive-design

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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a2c0cdcdd6d1d6d0c3d2e2968c978c91">[email protected]</a>/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:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a9c0c7cfc6e9ccd1c8c4d9c5cc87cac6c4">[email protected]</a>"><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="355c5b535a75504d54584559501b565a58">[email protected]</a></a>
            <br/><span class="fas fa-map-marker-alt" aria-hidden="true"></span> 123 Testville Rd
            <br/>&nbsp;&nbsp;Testville, XY 12345
        </div>
    </div>
  </div>

If you wish to hide the footer on certain devices based on screen size, use this code:

@media only screen and (max-width: 767px) and (min-width: 480px) {
 .footer{ display: none !important;}
}

Answer №2

<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f6949999828582849786b6c2d8c3d8c5">[email protected]</a>/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

To create a nested structure of rows and columns, follow this example:

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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="07656868737473756677473329322934">[email protected]</a>/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:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="4920272f26092c31282439252c672a2624">[email protected]</a>"><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1c75727a735c79647d716c7079327f7371">[email protected]</a></a>
            <br/><span class="fas fa-map-marker-alt" aria-hidden="true"></span> 123 Testville Rd
            <br/>&nbsp;&nbsp;Testville, XY 12345
        </div>
    </div>
  </div>

Some Points to Note::

This layout is compatible with both Bootstrap 3x and 4x (not tested with 5). To learn more about the grid system, visit: boots4, boots3 .

The only difference is the class combination d-none.d-sm-block replacing hidden-xs from Bootstrap 3. This class(es) will hide elements on small devices according to the framework @media rules. For more information on helper classes for displaying content, check here.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Scrollable content below the div

I have encountered an issue where a div is positioned above another div, and when I scroll the upper div to the bottom, it ends up scrolling the entire body. To better illustrate this problem, I have created a demo on JSFiddle: http://jsfiddle.net/2Ydr4/ ...

csshtml

Can you confirm if the content-type of this SOAP response is valid?

While trying to utilize a third-party WebService within Visual Studio 2008, I received a unique response from the server. This particular response contained two content-type tags. HTTP/1.0 200 OK Server: SMBDK_1/2.3.0 Date: Thu, 09 Aug 2012 18:59:14 G ...

htmlwcfsoapwsdl

Tips for enlarging an image element without causing the header to expand

I'm looking to enhance a logo image within a header element by expanding it on hover or creating a pulse effect. I thought of increasing the max-width and adding a transition for simplicity. However, my main concern is how to make only the img element ...

htmlcssbootstrap-4

Use include files to wrap content in a div tag

I have a webpage index.html with the following JavaScript scripts: <script type="text/javascript> $(document).ready(function() { $('a.link').click(function() {var url = $(this).attr('href'); $('#content'). ...

javascriptjqueryhtml

Accessing office documents such as XLS and PPT files directly within the browser window using Internet Explorer 7.0

Currently using XP, IE 7.0, Office 2010, and operating within a company INTRAnet environment. I have created a HomePage in Word and saved it as HTML, including links to other Office files. Despite my attempts, I am unable to get these office files to ope ...

htmlinternet-explorerms-office

Is there a way to display a vertical list in a horizontal orientation?

I am in the process of creating my portfolio on Cargo Collective and have customized one of their pre-made themes to suit my preferences. The only thing I'm currently struggling with is how to change a set of vertical links to display horizontally ins ...

htmlcsslistheaderalignment

Utilizing the content of an HTML element within Ruby embedded code - a comprehensive guide

Below is the code snippet in question: <% @groups.each do |group| %> <tr> <td id="groupid"><%= group.id %></td> <td><a href="#dialog" name="modal"><%= group.title %></a></td> </tr> &l ...

javascriptjqueryhtmlruby-on-railsruby

Adjust the font size within the grid layout

I'm utilizing the grid system to display 7 small images with a number next to each one, just like in this example. In my initial attempt, I didn't use the grid system, which made the process quite complex and time-consuming, taking me around 60 t ...

htmlcssbootstrap-4

Enhance your web design skills by customizing Bootstrap5 framework styles using the @layer feature

Here is the HTML code I am working with: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name=& ...

cssbootstrap-5css-layer

Adjusting image sizes in WordPress using CSS and HTML

I am currently working on a blog using the Marlene theme on Wordpress. For my posts, the default image resolution is 835x577, which suits my needs perfectly (see example post). However, I also have a "News" page where I want to display a list of all news ...

phphtmlcsswordpress

Instructions for creating a distinct click listener for each <img> element inside a table cell

Within my table, each row contains multiple columns with images as data. I successfully implemented a 'common listener' that is triggered when any image within a table row is clicked. $('#mytable tbody td img').click(function () { // ...

javascriptjqueryhtml

When using @font-face, Chrome supports it while IE and Firefox do not

I am finding this quite perplexing. I am currently using font-squirrel to download a web kit in order to display a custom font. You can access the font through this link: If you visit the homepage now: The main text in the center reads "Custom Built Webs ...

htmlcssfont-face

What is the best way to implement dynamic generation of Form::date() in Laravel 8?

Is there a way to dynamically generate the Form::date() based on the selection of 1? If 1 is selected, then display the Form::date() under the Form::select(). However, if 0 is selected, then hide the Form::date() in this particular view. For example: Sel ...

javascriptphphtmlajaxlaravel-8

How can I ensure the text remains centered within a div, even when there are buttons aligned to the left or

I have a CSS class called .text-align-center that I used to center text. .text-align-center { text-align:center; } However, I noticed that when there is a left or right arrow icon within the <div>, the text does not appear perfectly centered. Is ...

htmlcss

When the async attribute is added to the HTML code, Angular is no longer defined

Looking to optimize the performance of my website in Chrome Audit, I decided to add 'async' to my script tag like this: <body ng-cloak id="body"> <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=geometry ...

javascripthtmlangularjsseoaudit

Adding a Material Icon to an input type of 'submit' can be done by including the necessary HTML code and

Can Material Icon classes be used with button inputs? For example, using the <button> tag allows us to do this: <button class="btn btn-secondary btn-block btn-flat" id="submit"><i class="zmdi zmdi-long-arrow-right"></i> Login< ...

htmlmaterial-ui

How can you change the list-style-type to switch between lower-alpha and decimal on nested items within an ordered list?

I am attempting to reverse the list-style-type of nested items within an ordered list, including sub-items and sub-sub-items. I have tried using CSS counters but it doesn't seem to be working. Can anyone point out what I might be doing incorrectly? ol ...

htmlcss

Hey there, I'm looking to make sure that my div is consistently bigger than my content, even with text that cannot wrap. Can you help me figure out how to

Behold the current appearance of my window: https://i.sstatic.net/iIxDS.png Despite my efforts to maintain proper sizing, when I shrink the screen, the text (with white-space set to nowrap) ends up looking like this: https://i.sstatic.net/uXqox.png Is t ...

htmlcssreactjsfrontend

Ways to implement multi-file loading on a website using separate HTML segments

Currently, I am working on a website for my local community. Each page contains similar content like header, navigation bar, and footer. I want to streamline this process by storing these common elements as separate HTML files. Is it possible to link the ...

html

Implementing the Fixed Header feature in DataTables - A Step-by-Step Guide

I'm encountering an issue with implementing a fixed header for my table using the DataTables plugin. Despite previously asked questions addressing similar problems, I am still unable to resolve it. I suspect that conflicting CSS or missing CDN links c ...

htmlcssdatatables