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 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://frontendfreecode.com">Free Frontend</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 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">Free Frontend</a></div>

</body>
</html>

Preview

Developers Codes
Graphic Photo World
Crypto Best World
Code Free Tutorial
CSS Free Codes
PHP Free Codes
Javascript Codes

TOP CODES

Toggle Switch Button for Changing Language with Bootstrap

Draggable Cards with Bootstrap Grids

Bootstrap Table with Add New Row Button

WHAT IS NEW IN KERIXA?

Glassy Chat Box Code with Reaction Emojis

Dark Neo Brutal Resume Template

Nvidia RTX 3070 Graphic Card Hashrate and Mining Profitability

Nvidia RTX 3080 Graphic Card Hashrate and Mining Profitability

Flat Photo Frame Template

Cute Photo Frame Template

16 React JS Accordions

17 React JS Buttons

RECENT CODES

Bootstrap Timeline with Colorful Lines and Icons

Simple Dark Vertical Timeline with Bootstrap

Colorful Icons for Bootstrap Timeline Joints

Bootstrap Vertical Timeline with Image Cards and Descriptions

Vertical Bootstrap Timeline in Half Page

Drop Down Menu by React JS

Animating React Popup with Float in and Zoom Effects

Popup vs. Alert Code using React JS

React Glassy Gradient Popup Modal

Animating Toggle Popup Menu with React JS