content logo

Bootstrap Footers:

Bootstrap Footer with Categories and Tags Section

The basic purpose of having a footer at the bottom of your pages is to make people aware of your business. That is exactly what a website is used for as well. So, I hope this made it clear how important it is to have a proper informative footer. All the important information that you think your customers expect to receive can be provided in this section. Just keep in mind that having all those links and contact information can make the footer look messy. The last thing users want is a messy page and footers are part of your page. So, always remember to ensure the information in your website’s footer is organized in the right manner. If you overlook this, the visitors probably won’t take this section seriously and avoid reading it at all. In short, it is necessary to give importance to the arrangement and different categories of the information in the footer.

Here, we have a responsive footer with many great characteristics. This Bootstrap footer has a section for social media, user accounts, tags, payment methods and copyright claims. If you want a footer with social network icons, this is perfect because all the icons in this footer are animated and have hover effects. Also, since this is a Bootstrap footer with category features, it offers a great way to organize your information in the footer.

#Bootstrap Footer #Bootstrap Footer with Category #Responsive Footer #Footer with Social Network

<!-- This script got from www.frontendfreecode.com -->
<footer class="myfooter">
    <div class="container">
        <div class="row">
            <div class="col-sm-3 col-xs-6">
                <h4 class="title-widget">Sumi</h4>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin suscipit, libero a molestie consectetur, sapien elit lacinia mi.</p>
                <ul class="social social-circle">
                    <li> <a href="#" class="icoFacebook"><i class="fa fa-facebook"></i></a></li>
                    <li> <a href="#" class="icoTwitter"> <i class="fa fa-twitter"></i> </a> </li>
                    <li> <a href="#" class="icoGoogle"> <i class="fa fa-google-plus"></i> </a> </li>
                    <li> <a href="#" class="icoRss"> <i class="fa fa-youtube"></i> </a> </li>
                </ul>
            </div>
            <div class="col-sm-3 col-xs-6">
                <h4 class="title-widget">My Account</h4>
                <span class="acount-icon">
                    <a href="#"><i class="fa fa-heart" aria-hidden="true"></i> Wish List</a>
                    <a href="#"><i class="fas fa-cart-plus margin-right-20" aria-hidden="true"></i> Cart</a>
                    <a href="#"><i class="fa fa-user" aria-hidden="true"></i> Profile</a>
                    <a href="#"><i class="fa fa-globe" aria-hidden="true"></i> Language</a>
                </span>
            </div>
            <div class="col-sm-3 col-xs-6">
                <h4 class="title-widget">Category</h4>
                <div class="category">
                    <a href="#" class="zoom">men</a>
                    <a href="#" class="zoom">women</a>
                    <a href="#" class="zoom">boy</a>
                    <a href="#" class="zoom">girl</a>
                    <a href="#" class="zoom">bag</a>
                    <a href="#" class="zoom">teshart</a>
                    <a href="#" class="zoom">top</a>
                    <a href="#" class="zoom">shos</a>
                    <a href="#" class="zoom">glass</a>
                    <a href="#" class="zoom">kit</a>
                    <a href="#" class="zoom">baby dress</a>
                    <a href="#" class="zoom">kurti</a>
                </div>
            </div>
            <div class="col-sm-3 col-xs-6">
                <h4 class="title">Payment Methods</h4>
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
                <ul class="payment">
                    <li><a href="#"><i class="fa fa-cc-amex zoom" aria-hidden="true"></i></a></li>
                    <li><a href="#"><i class="fa fa-credit-card zoom" aria-hidden="true"></i></a></li>
                    <li><a href="#"><i class="fa fa-paypal zoom" aria-hidden="true"></i></a></li>
                    <li><a href="#"><i class="fa fa-cc-visa zoom" aria-hidden="true"></i></a></li>
                </ul>
            </div>
        </div>
        <hr>
        <div class="row text-center"> © 2017. CompanyName.com</div>
    </div> <!-- ./container -->
</footer>
<div class="myfooter-bottom">
    <div class="container">
        <p class="pull-left"> Copyright © Footer E-commerce Plugin 2014. All right reserved. </p>
        <div class="pull-right">
            <ul class="nav nav-pills payments">
                <li><i class="fa fa-cc-visa"></i></li>
                <li><i class="fa fa-cc-mastercard"></i></li>
                <li><i class="fa fa-cc-amex"></i></li>
                <li><i class="fa fa-cc-paypal"></i></li>
            </ul>
        </div>
    </div>
</div><a style="font-size: 8pt; text-decoration: none" target="_blank" href="http://www.frontendfreecode.com">Frontend Free Code</a>
                                                                            
@import url(https://fonts.googleapis.com/css?family=Alegreya+Sans:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,800,800italic,900,900italic);
@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css);
/* myfooter */
.myfooter {
    padding: 50px 0 20px 0;
    background-color: #35404f;
    color: #878c94;
}
.margin-right-20{
    margin-right:20px!important;
}
.myfooter .title-widget {
    text-align: left;
    color: #fff;
    font-size: 25px;
    font-weight: 300;
    line-height: 1;
    position: relative;
    text-transform: uppercase;
    font-family: 'Fjalla One', sans-serif;
    margin-top: 0;
    margin-right: 0;
    margin-bottom: 25px;
    margin-left: 0;
    padding-left: 28px;
}
.myfooter .title-widget::before {
    background-color: #ea5644;
    content: "";
    height: 22px;
    left: 0px;
    position: absolute;
    top: -2px;
    width: 5px;
}
.myfooter .social-icon {
    padding: 0px;
    margin: 0px;
}
.myfooter .social-icon a {
    display: inline-block;
    color: #fff;
    font-size: 25px;
    padding: 5px;
}
.myfooter .acount-icon a {
    display: block;
    color: #fff;
    font-size: 18px;
    padding: 5px;
    text-decoration: none;
}
.myfooter .acount-icon .fa {
    margin-right: 25px;
}
.myfooter .category a {
    text-decoration: none;
    color: #fff;
    display: inline-block;
    padding: 5px 20px;
    margin: 1px;
    border-radius: 4px;
    margin-top: 6px;
    background-color: black;
    border: solid 1px #fff;
}
.myfooter ul {
    font-size: 13px;
    list-style-type: none;
    margin-left: 0;
    padding-left: 0;
    margin-top: 15px;
    color: #7F8C8D;
}
.myfooter .payment {
    margin: 0px;
    padding: 0px;
    list-style-type: none
}
.myfooter .payment li {
    list-style-type: none
}
.myfooter .payment li a {
    text-decoration: none;
    display: inline-block;
    color: #fff;
    float: left;
    font-size: 25px;
    padding: 10px 10px;
}
.myfooter ul.social {
    list-style: none;
    display: inline;
    margin-left: 0 !important;
    padding: 0;
}
.myfooter ul.social li {
    display: inline;
    margin: 0 5px;
}
.myfooter .social li:hover {
    transform: scale(1.15) rotate(360deg);
    -webkit-transform: scale(1.1) rotate(360deg);
    -moz-transform: scale(1.1) rotate(360deg);
    -ms-transform: scale(1.1) rotate(360deg);
    -o-transform: scale(1.1) rotate(360deg);
}
.myfooter .social a.icoRss:hover {
    background-color: #F56505;
}
.myfooter .social a.icoFacebook:hover {
    background-color: #3B5998;
}
.myfooter .social a.icoTwitter:hover {
    background-color: #33ccff;
}
.myfooter .social a.icoGoogle:hover {
    background-color: #BD3518;
}
.myfooter .social a.icoVimeo:hover {
    background-color: #0590B8;
}
.myfooter .social a.icoLinkedin:hover {
    background-color: #007bb7;
}
.myfooter .social a.icoRss:hover i, .myfooter .social a.icoFacebook:hover i, .myfooter .social a.icoTwitter:hover i,
.myfooter .social a.icoGoogle:hover i, .myfooter .social a.icoVimeo:hover i, .myfooter .social a.icoLinkedin:hover i {
    color: #fff;
}
a.myfooter .socialIcon:hover, .myfooter .socialHoverClass {
    color: #44BCDD;
}
.myfooter .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: 50px;
    height: 50px;
    font-size: 20px;
}
.myfooter .social-circle li i {
    margin: 0;
    line-height: 50px;
    text-align: center;
}
.myfooter .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;
}
.myfooter .social-circle i {
    color: #fff;
    -webkit-transition: all 0.8s;
    -moz-transition: all 0.8s;
    -o-transition: all 0.8s;
    -ms-transition: all 0.8s;
    transition: all 0.8s;
}
.myfooter-bottom {
    background: #E3E3E3;
    border-top: 1px solid #DDDDDD;
    padding-top: 10px;
    padding-bottom: 10px;
}
.myfooter-bottom p.pull-left {
    padding-top: 6px;
}
.payments {
    font-size: 1.5em;
}
/*  zooming class */
.zoom:hover {
    -webkit-transform: scale(1.4);
    -moz-transform: scale(1.4);
    -o-transform: scale(1.4);
}
.zoom {
    -webkit-transform: scale(1);
    /* Browser Variations: */

    -moz-transform: scale(1);
    -o-transform: scale(1);
    -webkit-transition-duration: 0.3s;
    -moz-transition-duration: 0.3s;
    -o-transition-duration: 0.3s;
}
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css"/>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- This script got from www.frontendfreecode.com -->

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css"/>
<style>
@import url(https://fonts.googleapis.com/css?family=Alegreya+Sans:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,800,800italic,900,900italic);
@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css);
/* myfooter */
.myfooter {
    padding: 50px 0 20px 0;
    background-color: #35404f;
    color: #878c94;
}
.margin-right-20{
    margin-right:20px!important;
}
.myfooter .title-widget {
    text-align: left;
    color: #fff;
    font-size: 25px;
    font-weight: 300;
    line-height: 1;
    position: relative;
    text-transform: uppercase;
    font-family: 'Fjalla One', sans-serif;
    margin-top: 0;
    margin-right: 0;
    margin-bottom: 25px;
    margin-left: 0;
    padding-left: 28px;
}
.myfooter .title-widget::before {
    background-color: #ea5644;
    content: "";
    height: 22px;
    left: 0px;
    position: absolute;
    top: -2px;
    width: 5px;
}
.myfooter .social-icon {
    padding: 0px;
    margin: 0px;
}
.myfooter .social-icon a {
    display: inline-block;
    color: #fff;
    font-size: 25px;
    padding: 5px;
}
.myfooter .acount-icon a {
    display: block;
    color: #fff;
    font-size: 18px;
    padding: 5px;
    text-decoration: none;
}
.myfooter .acount-icon .fa {
    margin-right: 25px;
}
.myfooter .category a {
    text-decoration: none;
    color: #fff;
    display: inline-block;
    padding: 5px 20px;
    margin: 1px;
    border-radius: 4px;
    margin-top: 6px;
    background-color: black;
    border: solid 1px #fff;
}
.myfooter ul {
    font-size: 13px;
    list-style-type: none;
    margin-left: 0;
    padding-left: 0;
    margin-top: 15px;
    color: #7F8C8D;
}
.myfooter .payment {
    margin: 0px;
    padding: 0px;
    list-style-type: none
}
.myfooter .payment li {
    list-style-type: none
}
.myfooter .payment li a {
    text-decoration: none;
    display: inline-block;
    color: #fff;
    float: left;
    font-size: 25px;
    padding: 10px 10px;
}
.myfooter ul.social {
    list-style: none;
    display: inline;
    margin-left: 0 !important;
    padding: 0;
}
.myfooter ul.social li {
    display: inline;
    margin: 0 5px;
}
.myfooter .social li:hover {
    transform: scale(1.15) rotate(360deg);
    -webkit-transform: scale(1.1) rotate(360deg);
    -moz-transform: scale(1.1) rotate(360deg);
    -ms-transform: scale(1.1) rotate(360deg);
    -o-transform: scale(1.1) rotate(360deg);
}
.myfooter .social a.icoRss:hover {
    background-color: #F56505;
}
.myfooter .social a.icoFacebook:hover {
    background-color: #3B5998;
}
.myfooter .social a.icoTwitter:hover {
    background-color: #33ccff;
}
.myfooter .social a.icoGoogle:hover {
    background-color: #BD3518;
}
.myfooter .social a.icoVimeo:hover {
    background-color: #0590B8;
}
.myfooter .social a.icoLinkedin:hover {
    background-color: #007bb7;
}
.myfooter .social a.icoRss:hover i, .myfooter .social a.icoFacebook:hover i, .myfooter .social a.icoTwitter:hover i,
.myfooter .social a.icoGoogle:hover i, .myfooter .social a.icoVimeo:hover i, .myfooter .social a.icoLinkedin:hover i {
    color: #fff;
}
a.myfooter .socialIcon:hover, .myfooter .socialHoverClass {
    color: #44BCDD;
}
.myfooter .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: 50px;
    height: 50px;
    font-size: 20px;
}
.myfooter .social-circle li i {
    margin: 0;
    line-height: 50px;
    text-align: center;
}
.myfooter .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;
}
.myfooter .social-circle i {
    color: #fff;
    -webkit-transition: all 0.8s;
    -moz-transition: all 0.8s;
    -o-transition: all 0.8s;
    -ms-transition: all 0.8s;
    transition: all 0.8s;
}
.myfooter-bottom {
    background: #E3E3E3;
    border-top: 1px solid #DDDDDD;
    padding-top: 10px;
    padding-bottom: 10px;
}
.myfooter-bottom p.pull-left {
    padding-top: 6px;
}
.payments {
    font-size: 1.5em;
}
/*  zooming class */
.zoom:hover {
    -webkit-transform: scale(1.4);
    -moz-transform: scale(1.4);
    -o-transform: scale(1.4);
}
.zoom {
    -webkit-transform: scale(1);
    /* Browser Variations: */

    -moz-transform: scale(1);
    -o-transform: scale(1);
    -webkit-transition-duration: 0.3s;
    -moz-transition-duration: 0.3s;
    -o-transition-duration: 0.3s;
}
</style>

</head>
<body>
<footer class="myfooter">
    <div class="container">
        <div class="row">
            <div class="col-sm-3 col-xs-6">
                <h4 class="title-widget">Sumi</h4>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin suscipit, libero a molestie consectetur, sapien elit lacinia mi.</p>
                <ul class="social social-circle">
                    <li> <a href="#" class="icoFacebook"><i class="fa fa-facebook"></i></a></li>
                    <li> <a href="#" class="icoTwitter"> <i class="fa fa-twitter"></i> </a> </li>
                    <li> <a href="#" class="icoGoogle"> <i class="fa fa-google-plus"></i> </a> </li>
                    <li> <a href="#" class="icoRss"> <i class="fa fa-youtube"></i> </a> </li>
                </ul>
            </div>
            <div class="col-sm-3 col-xs-6">
                <h4 class="title-widget">My Account</h4>
                <span class="acount-icon">
                    <a href="#"><i class="fa fa-heart" aria-hidden="true"></i> Wish List</a>
                    <a href="#"><i class="fas fa-cart-plus margin-right-20" aria-hidden="true"></i> Cart</a>
                    <a href="#"><i class="fa fa-user" aria-hidden="true"></i> Profile</a>
                    <a href="#"><i class="fa fa-globe" aria-hidden="true"></i> Language</a>
                </span>
            </div>
            <div class="col-sm-3 col-xs-6">
                <h4 class="title-widget">Category</h4>
                <div class="category">
                    <a href="#" class="zoom">men</a>
                    <a href="#" class="zoom">women</a>
                    <a href="#" class="zoom">boy</a>
                    <a href="#" class="zoom">girl</a>
                    <a href="#" class="zoom">bag</a>
                    <a href="#" class="zoom">teshart</a>
                    <a href="#" class="zoom">top</a>
                    <a href="#" class="zoom">shos</a>
                    <a href="#" class="zoom">glass</a>
                    <a href="#" class="zoom">kit</a>
                    <a href="#" class="zoom">baby dress</a>
                    <a href="#" class="zoom">kurti</a>
                </div>
            </div>
            <div class="col-sm-3 col-xs-6">
                <h4 class="title">Payment Methods</h4>
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
                <ul class="payment">
                    <li><a href="#"><i class="fa fa-cc-amex zoom" aria-hidden="true"></i></a></li>
                    <li><a href="#"><i class="fa fa-credit-card zoom" aria-hidden="true"></i></a></li>
                    <li><a href="#"><i class="fa fa-paypal zoom" aria-hidden="true"></i></a></li>
                    <li><a href="#"><i class="fa fa-cc-visa zoom" aria-hidden="true"></i></a></li>
                </ul>
            </div>
        </div>
        <hr>
        <div class="row text-center"> © 2017. CompanyName.com</div>
    </div> <!-- ./container -->
</footer>
<div class="myfooter-bottom">
    <div class="container">
        <p class="pull-left"> Copyright © Footer E-commerce Plugin 2014. All right reserved. </p>
        <div class="pull-right">
            <ul class="nav nav-pills payments">
                <li><i class="fa fa-cc-visa"></i></li>
                <li><i class="fa fa-cc-mastercard"></i></li>
                <li><i class="fa fa-cc-amex"></i></li>
                <li><i class="fa fa-cc-paypal"></i></li>
            </ul>
        </div>
    </div>
</div><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Frontend Free Code</a></div>

</body>
</html>
Preview