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="//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;
}
}