How To Create Social Media Icons Footer Using Bootstrap?

How To Create Social Media icons footer using bootstrap?

Today, We want to share with you bootstrap social media icons footer.In this post we will show you bootstrap social media icons navbar, hear for font awesome social media icons we will give you demo and example for implement.In this post, we will learn about social media links for website with an example.

how to add social media icons in html?

Contents

Example 1: index.html
first of all Adding font awesome icon library and then all the available class used to create a social media icons Using font awesome icons.

<html>
 <head>
  <title>Social Media Icon Example - www.pakainfo.com</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <style>
   .fa {  
     width: 25px;
     padding: 20px;
     font-size: 25px;
     text-align: center;
     text-decoration: none;
     margin: 5px 2px;
     color: white;
     border-radius: 50%; 
   }

   .fa:hover {
    opacity: 0.7;
   }

   .fa-facebook {
     background: #3B5998;
   }

   .fa-twitter {
     background: #55ACEE;
   }

   .fa-google {
     background: #dd4b39;
   }

   .fa-linkedin {
     background: #007bb5;
   }

   .fa-youtube {
     background: #bb0000;
   }

   .fa-instagram {
     background: #8a3ab9;
   }

   .fa-whatsapp {
     background: #4FCE5D;
   }

   .fa-pinterest {
     background: #cb2027;
   }

   .fa-snapchat-ghost {
     background: #fffc00;  
     text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
   }

   .fa-skype {
     background: #00aff0;
   }

   .fa-github {
     background: #000000;
   }

   .fa-dribbble {
     background: #ea4c89;
   }

   .fa-vimeo {
     background: #45bbff;
   }

   .fa-foursquare {
     background: #45bbff;
   }

   .fa-stumbleupon {
     background: #eb4924;
   }

   .fa-flickr {
     background: #f40083;
   }

   .fa-yahoo {
     background: #430297;
   }

   .fa-reddit {
     background: #ff5700;
   }

   .fa-rss {
     background: #ff6600;
   }
   </style>
 </head>
 <body>
  <a href="#" class="fa fa-facebook"></a>
  <a href="#" class="fa fa-twitter"></a>
  <a href="#" class="fa fa-google"></a>
  <a href="#" class="fa fa-linkedin"></a>
  <a href="#" class="fa fa-youtube"></a>
  <a href="#" class="fa fa-instagram"></a>
  <a href="#" class="fa fa-whatsapp"></a>
  <a href="#" class="fa fa-pinterest"></a>
  <a href="#" class="fa fa-snapchat-ghost"></a>
  <a href="#" class="fa fa-skype"></a>
  <a href="#" class="fa fa-github"></a>
  <a href="#" class="fa fa-dribbble"></a>
  <a href="#" class="fa fa-vimeo"></a>
  <a href="#" class="fa fa-foursquare"></a>
  <a href="#" class="fa fa-stumbleupon"></a>
  <a href="#" class="fa fa-flickr"></a>
  <a href="#" class="fa fa-yahoo"></a>
  <a href="#" class="fa fa-reddit"></a>
  <a href="#" class="fa fa-rss"></a>
 </body>
</html>

Add icon library

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

Add font awesome icons

<a href="#" class="fa fa-facebook"></a>
<a href="#" class="fa fa-twitter"></a>

Bootstrap 4 Footer with Social icons

HTML Code

<!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>
<body>

<footer class="mainfooter" role="contentinfo">
  <div class="footer-middle">
  <div class="container">
    <div class="row">
      <div class="col-md-3 col-sm-6">
        <!--Column1-->
        <div class="footer-pad">
          <h4>4cgandhi Search</h4>
          <ul class="list-unstyled">
            <li><a href="#"></a></li>
            <li><a href="#">Calculator (2)</a></li>
            <li><a href="#">Conversion (50)</a></li>
            <li><a href="#">converter (62)</a></li>
            <li><a href="#">Typing Tools (1)</a></li>
            <li><a href="#">Web Tools (4)</a></li>
          </ul>
        </div>
      </div>
      <div class="col-md-3 col-sm-6">
        <!--Column1-->
        <div class="footer-pad">
          <h4>★★ Development Tools ★★</h4>
          <ul class="list-unstyled">
            <li><a href="#">Base64 Encode Online</a></li>
            <li><a href="#">Online Image Editor</a></li>
            <li><a href="#">Online JSON Editor</a></li>
            <li><a href="#">Web Collaboration Whiteboard</a></li>
            <li><a href="#">Latex Equation Editor</a></li>
            <li><a href="#">Online Image Optimizer</a></li>
          </ul>
        </div>
      </div>
      <div class="col-md-3 col-sm-6">
        <!--Column1-->
        <div class="footer-pad">
          <h4>★★ Code Formatters ★★</h4>
          <ul class="list-unstyled">
            <li><a href="#">Online Java Formatter</a></li>
            <li><a href="#">Online PHP Formatter</a></li>
            <li><a href="#">Online Python Formatter</a></li>
            <li><a href="#">Online HTML Formatter</a></li>
            <li><a href="#">Online JSON Formatter</a></li>
            <li>
              <a href="#"></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>
            </ul>    
  </div>
    </div>
 <div class="row">
  <div class="col-md-12 copy">
   <p class="text-center">© Copyright 2018 - Pakainfo.com.  All rights reserved.</p>
  </div>
 </div>


  </div>
  </div>
</footer>
  
  
  </body>
</html>

CSS Code


/*FOOTER CSS Code*/
footer {
  background: #16222A;
  background: -webkit-linear-gradient(59deg, #3A6073, #16222A);
  background: linear-gradient(59deg, #3A6073, #16222A);
  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;
}


/*SOCİAL İCONS*/
/* footer social icons */
ul.social-network {
  list-style: none;
  display: inline;
  margin-left: 0 ;
  padding: 0;
}

ul.social-network li {
  display: inline;
  margin: 0 5px;
}


/* footer social icons */
.social-network a.icoFacebook:hover {
  background-color: #3B5998;
}

.social-network a.icoLinkedin:hover {
  background-color: #007bb7;
}

.social-network a.icoFacebook:hover i,
.social-network a.icoLinkedin:hover i {
  color: #fff;
}

.social-network a.socialIcon:hover,
.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,
.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;
}

I hope you get an idea about HTML5 & Bootstrap Social Buttons Templates.
I would like to have feedback on my infinityknow.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.

Pakainfo

I am Jaydeep Gondaliya , a software engineer, the founder and the person running Pakainfo. I'm a full-stack developer, entrepreneur and owner of Pakainfo.com. I live in India and I love to write tutorials and tips that can help to other artisan, a Passionate Blogger, who love to share the informative content on PHP, JavaScript, jQuery, Laravel, CodeIgniter, VueJS, AngularJS and Bootstrap from the early stage.