Hi Friends, when i design template at that time i got idea about footer social icon design. bootstrap 4 social media icons hover effect css. social media buttons bootstrap 4. this is nice and one of the best social icon display design. In bootstrap 4 you can display social icon like this way.

We allows to free snippets of bootstrap social media icons footer , you can download full code of social media buttons bootstrap layout. Here in this post i will give you example of bootstrap social media icons navbar snippet and you will get simple code of html, css and jquery. In social media icons html generator snippet i give you three tab with html, css and js, you can easily get code of html code for social media buttons to website layout.

<!doctype html> <html lang="en"> <head> <title>Social Footer | Bootstrap 4</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous"> <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <link rel="stylesheet" type="text/css" href="custom.css"> <link href="https://fonts.googleapis.com/css?family=Ropa+Sans" rel="stylesheet"> </head> <body class="bg-secondary"> <div class="footer-main w-100"> <div class="footer-first"> <div class="container"> <div class="row"> <div class="col-md-12 col-12"></div> </div> </div> </div> <div class="footer-second"> <div class="container"> <div class="row"> <div class="col-md-12 col-12 text-white"> <div class="row p-3"> <div class="col-md-6 col-12"> <p class="m-0">All Right Reserved 2018 - <a href="http://nicesnippets.com/" target="_blank">nicesnippets.com</a></p> </div> <div class="col-md-6 col-12 footer-icon text-right"> <i class="fa fa-twitter"></i> <i class="fa fa-instagram"></i> <i class="fa fa-pinterest"></i> <i class="fa fa-linkedin"></i> <i class="fa fa-youtube"></i> <i class="fa fa-vimeo"></i> </div> </div> </div> </div> </div> </div> </div> </body> </html>
body{ font-family: 'Ropa Sans', sans-serif; } .footer-main{ position: fixed; bottom: 0; } .footer-first{ height: 300px; border-top: 2px solid #E45641; border-bottom: 2px solid #E45641; background: #3D687C; } .footer-second{ background: #212C43; } .footer-second p{ color: #5A6F95; padding-top: 10px; } .footer-second a{ color: #5A6F95; } .footer-icon i{ border: 2px solid #fff; border-radius: 4px; padding: 10px 13px; margin-right: 5px; } .footer-icon i:hover{ color: #fff; transition: 0.5s; cursor: pointer; border-color: #fff; background: rgba(255,255,255,0.05); -webkit-transform: scale(0.93); -moz-transform: scale(0.93); -ms-transform: scale(0.93); transform: scale(0.93); } @media screen and (min-width:320px) and (max-width:360px) { .footer-second p{ font-size: 15px !important; margin-bottom: 2px !important; text-align: center; } .footer-icon i{ padding: 7px 8px !important; } }

Please Subscribe Your Email Address, We Will Notify You When Add New Snippet:

Random Post