Bootstrap 4 footer

In this article, we will create a Bootstrap 4 footer with the help of various examples.

What do you mean by Bootstrap 4 Footer?

Bootstrap 4 is used for adding design in HTML documents similar to cascading style sheets. In Bootstrap 4, Footer is an additional navigation method for websites. It can hold links, buttons, company info, copyrights, forms and many other elements. We can set the color of the footer by adding one of the classes from our color palette.

Let’s take various examples of Bootstrap 4 footers.

Example 1:

  <! DOCTYPE html>  <html lang=”en”>  <head>    <title> Bootstrap 4 Footer with Social icons </title>    <meta charset=”utf-8″>    <meta name=”viewport” content=”width=device-width, initial-scale=1″>    <link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css”>    <script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js”> </script>    <script src=”https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js”> </script>    <script src=”https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js”> </script>     <link href=”https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css” rel=”stylesheet” >  </head>  <style>  h2 {  padding: 25px 0;  text-align: center;  color: #fff;  background: #7c8490;  }  footer {   background: rgb(9, 95, 234);    color: white;    margin-top:100px;  }  footer a {    color: #fff;    font-size: 14px;    transition-duration: 0.2s;  }  footer a:hover {    color: #FA944B;    text-decoration: none;  }  .copy {    font-size: 12px;    padding: 10px;    border-top: 1px solid #FFFFFF;  }  .footer-middle {    padding-top: 2em;    color: white;  }  ul.social-network {    list-style: none;    display: inline;    margin-left: 0 !important;    padding: 0;  }  ul.social-network li {    display: inline;    margin: 0 5px;  }    .social-network a.icoFacebook:hover {    background-color: #3B5998;  }  .social-network a.icoLinkedin:hover {    background-color: #007bb7;  }  .social-network a.icoFacebook:hover i  {    color: #fff;  }  .social-network a.icoLinkedin:hover i {    color: #fff;  }  .social-network a.socialIcon:hover {    color: #44BCDD;  }  .socialHoverClass {    color: #44BCDD;  }  .social-circle li a {    display: inline-block;    position: relative;    margin: 0 auto 0 auto;    -moz-border-radius: 50%;    -webkit-border-radius: 50%;    border-radius: 50%;    text-align: center;    width: 30px;    height: 30px;    font-size: 15px;  }  .social-circle li i {    margin: 0;    line-height: 30px;    text-align: center;  }  .social-circle li a:hover i  {    -moz-transform: rotate(360deg);    -webkit-transform: rotate(360deg);    -ms–transform: rotate(360deg);    transform: rotate(360deg);    -webkit-transition: all 0.2s;    -moz-transition: all 0.2s;    -o-transition: all 0.2s;    -ms-transition: all 0.2s;    transition: all 0.2s;  }  .triggeredHover {    -moz-transform: rotate(360deg);    -webkit-transform: rotate(360deg);    -ms–transform: rotate(360deg);    transform: rotate(360deg);    -webkit-transition: all 0.2s;    -moz-transition: all 0.2s;    -o-transition: all 0.2s;    -ms-transition: all 0.2s;    transition: all 0.2s;  }  .social-circle i {    color: #595959;    -webkit-transition: all 0.8s;    -moz-transition: all 0.8s;    -o-transition: all 0.8s;    -ms-transition: all 0.8s;    transition: all 0.8s;  }  .social-network a {    background-color: #F9F9F9;  }  ..social-network a:hover {  background: #ff304d;  }  </style>  <body>  <h2>  Bootstrap4 Footer Example  </h2>  <footer class=”mainfooter” role=”contentinfo”>    <div class=”footer-middle”>    <div class=”container”>      <div class=”row”>        <div class=”col-md-3 col-sm-6″>          <div class=”footer-pad”>            <h4> Footer Heading 1</h4>            <ul class=”list-unstyled”>              <li> <a href=”#”> </a> </li>              <li> <a href=”#”>Payment Center</a></li>              <li> <a href=”#”> Contact Directory </a></li>              <li> <a href=”#”>Forms</a></li>              <li> <a href=”#”>News and Updates</a></li>              <li> <a href=”#”>FAQs</a></li>            </ul>          </div>        </div>        <div class=”col-md-3 col-sm-6″>          <div class=”footer-pad”>            <h4> Footer Heading 2</h4>            <ul class=”list-unstyled”>              <li><a href=”#”> Blog </a> </li>              <li><a href=”#”>Accessibility</a> </li>              <li><a href=”#”>Disclaimer</a></li>              <li><a href=”#”>Privacy Policy</a></li>              <li><a href=”#”>FAQs</a></li>              <li><a href=”#”>Webmaster</a></li>            </ul>          </div>        </div>        <div class=”col-md-3 col-sm-6″>          <div class=”footer-pad”>            <h4> Footer Heading 3 </h4>            <ul class=”list-unstyled”>              <li> <a href=”#”> Parks and Recreation </a> </li>              <li> <a href=”#”> Public Works </a> </li>              <li> <a href=”#”>Police Department</a> </li>              <li> <a href=”#”> Fire </a> </li>              <li> <a href=”#”> Mayor and City Council </a> </li>            </ul>          </div>        </div>      <div class=”col-md-3″>      <h4> Follow Us </h4>              <ul class=”social-network social-circle”>               <li> <a href=”#” class=”icoFacebook” title=”Facebook”> <i class=”fa fa-facebook”> </i> </a> </li>               <li> <a href=”#” class=”icoLinkedin” title=”Linkedin”> <i class=”fa fa-linkedin”> </i> </a> </li>  <li> <a href=”#”> <i class=”fa fa-youtube” aria-hidden=”true”> </i> </a> </li>              </ul>  </div>      </div>  <div class=”row”>  <div class=”col-md-12 copy”>  <p class=”text-center”> © Copyright 2021 – Company Name.  All rights reserved. </p>  </div>  </div>    </div>    </div>  </footer>    </body>  </html>  

Explanation:

In the above example, we have created a footer with the help of bootstrap 4.

Output:

Following is the output of this example:

Example 2:

  <! DOCTYPE html>  <html lang=”en”>  <head>    <title> Bootstrap 4 Footer with Social icons </title>    <meta charset=”utf-8″>    <meta name=”viewport” content=”width=device-width, initial-scale=1″>    <link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css”>    <script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js”> </script>    <script src=”https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js”> </script>    <script src=”https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js”> </script>     <link href=”https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css” rel=”stylesheet”>  </head>  <style>  @import url(‘https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css’);  section {      padding: 60px 0;  }  section .section-title {      text-align: center;      color: #007b5e;      margin-bottom: 50px;      text-transform: uppercase;  }  #footer {      background: #bd2130;  }  #footer h5 {     padding-left: 10px;      border-left: 3px solid #eeeeee;      padding-bottom: 6px;      margin-bottom: 20px;      color:#ffffff;  }  #footer a {      color: #ffffff;      text-decoration: none !important;      background-color: transparent;  }  #footer ul.social li {  padding: 3px 0;  }  #footer ul.social li a i {      margin-right: 5px;  font-size:25px;  -webkit-transition: .5s all ease;  -moz-transition: .5s all ease;  transition: .5s all ease;  }  #footer ul.social li:hover a i {  font-size:30px;  margin-top:-10px;  }  #footer ul.social li a  {  color:#ffffff;  }  #footer ul.social li a:hover {  color:#eeeeee;  }  #footer ul.quick-links li a {  color:#ffffff;  }  #footer ul.quick-links li {  padding: 3px 0;  -webkit-transition: .5s all ease;  -moz-transition: .5s all ease;  transition: .5s all ease;  }  #footer ul.quick-links li:hover {  padding: 3px 0;  margin-left:5px;  font-weight:700;  }  #footer ul.quick-links li a i {  margin-right: 5px;  }  #footer ul.quick-links li:hover a i {      font-weight: 700;  }  @media (max-width:767px) {  #footer h5 {        padding-left: 0;      border-left: transparent;      padding-bottom: 0px;      margin-bottom: 10px;  }  }  h2 {  padding: 25px 0;  text-align: center;  color: #fff;  background: #7c8490;  }  </style>  <body>  <h2>  Bootstrap4 Footer Example  </h2>  <section id=”footer”>  <div class=”container”>  <div class=”row text-center text-xs-center text-sm-left text-md-left”>  <div class=”col-xs-12 col-sm-4 col-md-4″>  <h5> Quick links </h5>    <ul class=”list-unstyled quick-links”>  <li> <a href=”#”> <i class=”fa fa-angle-double-right”> </i> Home </a> </li>  <li> <a href=”#”> <i class=”fa fa-angle-double-right”> </i> About </a> </li>  <li> <a href=”#”> <i class=”fa fa-angle-double-right”> </i> FAQ </a> </li>  <li> <a href=”#”> <i class=”fa fa-angle-double-right”> </i> Get Started </a> </li>                <li> <a href=”#”> <i class=”fa fa-angle-double-right”> </i> Videos </a> </li>  </ul>  </div>            <div class=”col-xs-12 col-sm-4 col-md-4″>  <h5> Quick links </h5>  <ul class=”list-unstyled quick-links”>  <li> <a href=”#”> <i class=”fa fa-angle-double-right”> </i> Home </a> </li>  <li> <a href=”#”> <i class=”fa fa-angle-double-right”> </i> About </a> </li>  <li> <a href=”#”> <i class=”fa fa-angle-double-right”> </i> FAQ </a> </li>  <li> <a href=”#”> <i class=”fa fa-angle-double-right”> </i> Our Services </a> </li>  <li> <a href=”#”> <i class=”fa fa-angle-double-right”> </i> Expert Team </a> </li>  </ul>  </div>  <div class=”col-xs-12 col-sm-4 col-md-4″>  <h5> Quick links </h5>               <ul class=”list-unstyled quick-links”>   <li> <a href=”#”> <i class=”fa fa-angle-double-right”> </i> Home </a> </li>  <li> <a href=”#”> <i class=”fa fa-angle-double-right”> </i> About </a></li>  <li> <a href=”#”> <i class=”fa fa-angle-double-right”> </i> FAQ </a> </li>  <li> <a href=”#”> <i class=”fa fa-angle-double-right”> </i> Get Started </a> </li>  <li> <a href=”#”> <i class=”fa fa-angle-double-right”> </i> Contact </a> </li>  </ul>  </div>  </div>  <div class=”row”>  <div class=”col-xs-12 col-sm-12 col-md-12 mt-2 mt-sm-5″>  <ul class=”list-unstyled list-inline social text-center”>  <li class=”list-inline-item”> <a href=”#”> <i class=”fa fa-facebook”> </i> </a> </li>               <li class=”list-inline-item”> <a href=”#”> <i class=”fa fa-twitter”> </i> </a> </li>  <li class=”list-inline-item”> <a href=”#”> <i class=”fa fa-instagram”> </i> </a> </li>  <li class=”list-inline-item”> <a href=”#”> <i class=”fa fa-google-plus”> </i > </a> </li>  <li class=”list-inline-item”> <a href=”#”> <i class=”fa fa-envelope”> </i> </a> </li>  </ul>  </div>  <hr>  </div>  <div class=”row”>  <div class=”col-xs-12 col-sm-12 col-md-12 mt-2 mt-sm-2 text-center text-white”>     <p class=”h6″> 2021 ? All right Reversed. <a class=”text-green ml-2″ href=”#” target=”_blank”>              tutoraspire </a> </p>  </div>  <hr>  </div>  </div>  </section>  </body>  </html>   

Explanation:

In the above example, we have created a footer with the help of bootstrap 4.

Output:

Following is the output of this example:

Next TopicBootstrap 4 Contact form

bootstrap 4 bootstrap 4 Buttons bootstrap 4 Dropdown bootstrap 4 Forms bootstrap 4 Images bootstrap 4 Jumbotron bootstrap 4 Layout bootstrap 4 Lists bootstrap 4 MCQ bootstrap 4 Navs bootstrap 4 Progress Bars bootstrap 4 Spinners bootstrap 4 Tables bootstrap 4 Tooltip bootstrap 4 tutorial what is bootstrap4

Bootstrap 4 footer

Bootstrap 4 footer

What do you mean by Bootstrap 4 Footer?

Example 1:

Example 2:

AutoCAD LT Download

Boostrap3 sticky header

You may also like