NiceSnippets.com
Bootstrap 4 Footer Design Demo
In this snippet We are giving you responsive footer design demo. In html theme you can simply implement this footer design. In this bottom footer design we are include description about site,famous category,list,recent activity,copyright text and breadcrumbs design.
We allows to free snippets of responsive footer in bootstrap , you can download full code of bootstrap navbar footer layout. Here in this post i will give you example of bootstrap footer bottom snippet and you will get simple code of html, css and jquery. In bootstrap 4 footer sample snippet i give you three tab with html, css and js, you can easily get code of bootstrap 4 footer bottom of page layout.
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="custom.css">
</head>
<body>
<div class="footer-first">
<div class="container">
<div class="row pt-3">
<div class="col-md-3 col-12 scope-mag-box">
<h3><strong>SCOPE</strong>MAG</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation.</p>
</div>
<div class="col-md-3 col-12 mb-3 categories-box">
<h6><span class="heading">FAMOUS</span> CATEGORIES</h6>
<span class="category-box">BEAUTY</span>
<span class="category-box">CAR</span>
<span class="category-box">COLOURFUL</span>
<span class="category-box">DARK</span>
<span class="category-box">FLOWERS</span>
<span class="category-box">FOODS</span>
<span class="category-box">GRAIN</span>
<span class="category-box">GREEN</span>
<span class="category-box">HD</span>
<span class="category-box">HOT-FOODS</span>
<span class="category-box">HOT</span>
<span class="category-box">LIGHTS</span>
<span class="category-box">NATURE</span>
<span class="category-box">OLD</span>
<span class="category-box">PHOTOGRAPHY</span>
<span class="category-box">PIZZA</span>
<span class="category-box">QUALITY</span>
<span class="category-box">TECHNOLOGY</span>
<span class="category-box">PLACE</span>
<span class="category-box">VEHICLE</span>
<span class="category-box">NEW</span>
<span class="category-box">LATEST</span>
<span class="category-box">UPDATE</span>
</div>
<div class="col-md-3 col-12 list-box">
<h6><span class="heading">BLOGROLL</span> LIST</h6>
<ul class="pl-3">
<li><a href="#">Themeforest</a></li>
<li><a href="#">Codecanyon</a></li>
<li><a href="#">Videohive</a></li>
<li><a href="#">Audiojungle</a></li>
<li><a href="#">Graphicriver</a></li>
<li><a href="#">Photodune</a></li>
<li><a href="#">Photodune</a></li>
</ul>
</div>
<div class="col-md-3 col-12 posts-box">
<h6><span class="heading">RECENT</span> POST</h6>
<div class="post-box mb-1 mt-2 pb-2">
<div class="row">
<div class="col-md-4 col-4">
<img src="//nicesnippets.com/demo/image1.jpg" class="w-100">
</div>
<div class="col-md-8 col-8 pl-0">
<h6>Lorem ipsum dolor sit sed do eiusmod.</h6>
<p class="mb-2"><i class="fa fa-calendar-o mr-1" aria-hidden="true"></i> JANUARY 21,2018</p>
</div>
</div>
</div>
<div class="post-box mb-1 mt-2 pb-2">
<div class="row">
<div class="col-md-4 col-4">
<img src="//nicesnippets.com/demo/image1.jpg" class="w-100">
</div>
<div class="col-md-8 col-8 pl-0">
<h6>Lorem ipsum dolor sit sed do eiusmod.</h6>
<p class="mb-2"><i class="fa fa-calendar-o mr-1" aria-hidden="true"></i> JANUARY 21,2018</p>
</div>
</div>
</div>
<div class="post-box mb-1 mt-2 pb-2">
<div class="row">
<div class="col-md-4 col-4">
<img src="//nicesnippets.com/demo/image1.jpg" class="w-100">
</div>
<div class="col-md-8 col-8 pl-0">
<h6>Lorem ipsum dolor sit sed do eiusmod.</h6>
<p class="mb-2"><i class="fa fa-calendar-o mr-1" aria-hidden="true"></i> JANUARY 21,2018</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container footer-second p-2 mt-2">
<div class="row">
<div class="col-md-8 col-12">
© 2018 COPYRIGHT SCOPEMAG BLOGGING THEME BY VPNSMART
</div>
<div class="col-md-4 col-12">
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item"><a href="#">Buy Now</a></li>
<li class="breadcrumb-item"><a href="#">Page</a></li>
<li class="breadcrumb-item"><a href="#">Forum</a></li>
</ol>
</nav>
</div>
</div>
</div>
</div>
</body>
</html>
body{
font-family: ubuntu;
}
.footer-first{
background: #252525;
color: #fff;
}
.scope-mag-box p{
color: #414141;
font-size: 13px;
}
.categories-box .heading, .list-box .heading, .posts-box .heading{
color: #EF4840;
}
.categories-box .category-box{
color: #8B8B8B;
font-size: 11px;
border: 1px solid #3F3F3F;
border-radius: 2px;
padding: 3px 4px;
}
.list-box ul{
list-style: none;
font-size: 12px;
}
.list-box ul li{
border-bottom: 1px solid #303030;
position: relative;
}
.list-box ul li::before{
content: " ";
width: 0;
height: 0;
border-top: 4px solid transparent;
border-bottom: 4px solid transparent;
border-left: 4px solid #3F3F3F;
position: absolute;
top: 305%;
margin-top: -50px;
left: -6%;
}
.list-box ul li a{
text-decoration: none;
color: #7F7F7F;
}
.posts-box .post-box{
border-bottom: 1px solid #303030;
}
.posts-box .post-box img{
height: 55px;
}
.posts-box .post-box h6{
font-size: 13px;
}
.posts-box .post-box P{
font-size: 8px;
color: #505050;
}
.footer-second{
color: #fff;
background: #EF4840;
font-size: 12px;
}
.footer-second .breadcrumb{
border-radius: 0px;
padding:0px;
background: none;
margin: 0px;
}
.footer-second .breadcrumb li a{
color: #fff !important;
font-size: 12px;
text-decoration: none;
}
.breadcrumb-item+.breadcrumb-item::before{
color: #fff !important;
}
