Developing the Footer Section of the Bootstrap Website | Tutorial – 8

In this tutorial we will be developing the footer section of the bootstrap website. The footer section of the website consists of 2 major parts – top footer & bottom footer
The top footer has 4 columns and the bottom footer has only 1. This is how the footer section looks like –

bootstrap footer section

Setting up everything Library into our Project Offline –

Download this entire test code folder which will the full folder hierarchy with the necessary library files already set up – DOWNLOAD HERE

The folder hierarchy should look like this –

  • test code
    • bootstrap
      • css
        • bootstrap.min.css
      • js
        • bootstrap.min.js
        • jquery-3.3.1.slim.min.js
        • popper.min.js
    • css
      • style.css (our custom css file)
    • fontawesome-free-5.6.3-web
      • css
        • all.css (the only one we need to link in our project for font awesome icons)
      • js
      • etc
      • etc
    • imgs
      • logo_text_white_small.png
    • default.html

If you already have the entire code folder from the previous tutorial, then the only changes you have to do is to make the changes that needs to be done in the default.html page and style.css –

default.html page –
<!doctype html>
<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
  <link rel="stylesheet" href="fontawesome-free-5.6.3-web/css/all.css">
  <!-- Our Custom CSS style sheet -->
  <link rel="stylesheet" href="css/style.css">
  <title>Home - Simple Snippets</title>
</head>
<!-- xs<576 | 576<sm<768 | 768<md<992 | 992<lg<1200 | 1200<xl -->

<body>
  <header>
    <div class="p-1" id="topHeader">
      <div class="container">
        <div class="row">
          <div class="col-12 text-right">
            <a class="p-1" href="tel:+919090909090"> <i class="fas fa-phone"></i> +(91) 9090909090 </a>
            <a class="p-1" href="mailto:[email protected]"> <i class="fas fa-envelope"></i> [email protected] </a>
          </div>
        </div>
      </div>
    </div>
    <div id="bottomHeader">
      <div class="container-fluid">
        <nav class="navbar navbar-dark navbar-expand-md" style="background-color:#004d80;">
          <a class="navbar-brand" href="">
            <img src="imgs/logo_text_white_small.png" width="250px" alt="">
          </a>
          <button data-toggle="collapse" data-target="#navbarToggler" type="button" class="navbar-toggler"><span class="navbar-toggler-icon"></span></button>
          <div class="collapse navbar-collapse" id="navbarToggler">
            <ul class="navbar-nav">
              <li class="nav-item">
                <a class="nav-link" href="#">Home</a>
              </li>
              <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" data-toggle="dropdown" role="button" href="#">Services</a>
                <div class="dropdown-menu">
                  <a class="dropdown-item" href="#">Web Designing</a>
                  <a class="dropdown-item" href="#">Web Development</a>
                  <a class="dropdown-item" href="#">SEO Services</a>
                  <a class="dropdown-item" href="#">Software Development</a>
                  <a class="dropdown-item" href="#">Mobile App Development</a>
                  <div class="dropdown-divider"></div>
                  <a class="dropdown-item" href="#">Graphic Designing</a>
                </div>

              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">Portfolio</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">About Us</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">Contact Us</a>
              </li>
            </ul>
          </div>
        </nav>

      </div>
    </div>

  </header>

  <footer class="full-footer">
    <div class="container top-footer p-md-3 p-1">
      <div class="row">
        <div class="col-md-3 pl-4 pr-4">
          <img class="img-fluid" src="imgs/logo_text_white_small.png" alt="">
          <p>
            Simple Snippets is a Tech-Educational Channel / Platform / Blog / Medium for anyone and everyone ...<a href="#">Read
              more...</a>
          </p>
          <a style="color:silver;" class="p-1" href="#"><i class="fab fa-2x fa-facebook-square"></i></a>
          <a style="color: silver;" class="p-1" href="#"><i class="fab fa-2x fa-google-plus-square"></i></a>
          <a style="color: silver;" class="p-1" href="#"><i class="fab fa-2x fa-twitter-square"></i></a>
          <a style="color: silver;" class="p-1" href="#"><i class="fab fa-2x fa-instagram"></i></a>
        </div>

        <div class="col-md-3  pl-4 pr-4">
          <h3>Important Links</h3>
          <a href="#">Privacy Policy</a><br>
          <a href="#">Youtube Channel Link </a><br>
          <a href="#">Blog Articles </a><br>
          <a href="#">Social Media</a>
        </div>

        <div class="col-md-3  pl-4 pr-4">
          <h3>Our Services</h3>
          <a href="#">Web Designing </a><br>
          <a href="#">Web Development  </a><br>
          <a href="#">SEO services  </a><br>
          <a href="#">Software Development </a>
          <a href="#">Mobile App Development  </a>
          <a href="#">Graphic Designing</a>
        </div>
     
      <div class="col-md-3  pl-4 pr-4">
          <h3>Contact Us</h3>
          <a href="#"><i class="fas fa-phone"></i> +(91) 9090909090  </a><br>
          <a href="#"><i class="fas fa-envelope"></i> [email protected]  </a><br>
          <div class="embed-responsive embed-responsive-16by9">
              <iframe class="embed-responsive-item" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d241316.64333236168!2d72.74110193617271!3d19.082522317332813!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3be7c6306644edc1%3A0x5da4ed8f8d648c69!2sMumbai%2C+Maharashtra!5e0!3m2!1sen!2sin!4v1547151374329" frameborder="0"></iframe>
          </div>
          
      </div>
    </div>
    </div>
    <div class="container-fluid bottom-footer pt-2">
      <div class="row">
        <div class="col-12 text-center">
          <p>Copyrights © 2018 - All rights reserved</p>
        </div>
      </div>
    </div>

  </footer>



  <!-- Optional JavaScript -->
  <!-- jQuery first, then Popper.js, then Bootstrap JS -->
  <script src="bootstrap/js/jquery-3.3.1.slim.min.js"></script>
  <script src="bootstrap/js/popper.min.js"></script>
  <script src="bootstrap/js/bootstrap.min.js"></script>
</body>

</html>
style.css page –
.myrows{
  border: 3px solid green;
  padding: 5px;
}
.mycols{
  border: 3px solid red;
}
.mycontainer{
  background-color: aqua;
}
#topHeader{
  border-bottom: 1px solid #ebebeb;
}
#topHeader a{
  color: #2c3e50;
  font-weight: 600;
  font-size: 0.89rem;
}
.container-fluid{
  padding-left: 0;
  padding-right: 0;
}
nav ul li a {
	font-size: 1.1rem;
	font-weight: 600;
}

/* START : Footer */
.full-footer{
  background-color: #243c4f;
  
}
.top-footer p{
  color: white;
}
.top-footer a{
  color: white;
  font-weight: 600;
}
.top-footer h3{
  color: white;
}
.bottom-footer{
  background-color: #031b2e;
}
.bottom-footer p{
  color: white;
}

/* END : Footer */
YouTube video tutorial –

Leave a Reply

Your email address will not be published. Required fields are marked *