content logo

Bootstrap Footers:

Bootstrap Footer with Green and Black Theme

Many times, people need additional information that cannot be gained in the normal main pages of your website. For example, you can’t just list all the contact information and social media links in every post it just clutters your pages and make your site look unprofessional. Such causes are exactly why every website should have a professionally designed footer. You can think of these footers as some kind of a safety net that allow those users who were unable to find they were after in other sections of your website to gain additional information. The most basic example is when you provide a link to your contact form or return policy. You can prevent a lot of visitors from leaving your website by designing a simple yet effective footer.

We have a really cool looking HTML dark footer here. This footer dark style has a really unique look to itself and can improve the aesthetic of your website instantly. This Bootstrap footer uses a dark grey and phosphorescent green theme which is quite modern and features a sleek design. This Bootstrap green footer also features different sections of social media links, company introduction, photos, and copyright claim. You can also include the navigation links and the site logo which is also provided in the header in this Bootstrap footer with image.

#

Bootstrap Footer with Image

#

Bootstrap Footer

#

Bootstrap Green Footer

#

HTML Dark Footer

#

Footer Dark Style

<!-- This script got from frontendfreecode.com -->
<footer>
    <section class="nb-footer">
        <div class="container">
            <div class="row">
                <div class="col-md-3 col-sm-6 col-xs-6">
                    <div class="footer-single">
                        <div class="dummy-logo">
                            <div class="icon pull-left brand">
                                <i class="fa fa-copy"></i>
                            </div>
                            <h2>Lorem Ipsum</h2>
                            <p>Another responsive footer</p>
                        </div>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus felis diam, vulputate in risus eu, porttitor condimentum purus. Phasellus ullamcorper, odio id feugiat bibendum.</p>
                        <a href="" class="btn btn-footer">Read More</a>
                    </div>
                </div>
                <div class="col-md-3 col-sm-6 col-xs-6">
                    <div class="footer-single useful-links">
                        <div class="footer-title"><h2>Navigation</h2></div>
                        <ul class="list-unstyled">
                            <li><a href="index.html">Home <i class="fa fa-angle-right pull-right"></i></a></li>
                            <li><a href="about1.html">About Us <i class="fa fa-angle-right pull-right"></i></a></li>
                            <li><a href="service1.html">Services <i class="fa fa-angle-right pull-right"></i></a></li>
                            <li><a href="portfolio1.html">Portfolio <i class="fa fa-angle-right pull-right"></i></a></li>
                            <li><a href="pricing.html">Pricing <i class="fa fa-angle-right pull-right"></i></a></li>
                            <li><a href="contact1.html">Contact Us <i class="fa fa-angle-right pull-right"></i></a></li>
                        </ul>
                    </div>
                </div>
                <div class="clearfix visible-sm"></div>
                <div class="col-md-3 col-sm-6 col-xs-6" style="float:right">
                    <div class="col-sm-12 left-clear right-clear footer-single footer-project">
                        <div class="footer-title"><h2>Latest Projects</h2></div>
                        <div class="col-xs-4">
                            <img src="https://frontendfreecode.com/img/soshi.jpg" class="img-responsive center-block">
                        </div>
                        <div class="col-xs-4">
                            <img src="https://frontendfreecode.com/img/soshi.jpg" class="img-responsive center-block">
                        </div>
                        <div class="col-xs-4">
                            <img src="https://frontendfreecode.com/img/soshi.jpg" class="img-responsive center-block">
                        </div>
                        <div class="clearfix"></div>
                        <div class="col-xs-4">
                            <img src="https://frontendfreecode.com/img/soshi.jpg" class="img-responsive center-block">
                        </div>
                        <div class="col-xs-4">
                            <img src="https://frontendfreecode.com/img/soshi.jpg" class="img-responsive center-block">
                        </div>
                        <div class="col-xs-4">
                            <img src="https://frontendfreecode.com/img/soshi.jpg" class="img-responsive center-block">
                        </div>
                    </div>
                </div>
                <div class="col-md-3 col-sm-6 col-xs-6">
                    <div class="footer-single">
                        <div class="footer-title"><h2>Contact Information</h2></div>
                        <address>
                            999, Holly Eiusmod Tempor, City<br>
                            Your State, Country <br>
                            <i class="fa fa-phone"></i>  987 654 3210 <br>
                            <i class="fa fa-fax"></i> 012 123 2345<br>
                            <i class="fa fa-envelope"></i> info@example.com<br>
                        </address>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <section class="nb-copyright">
        <div class="container">
            <div class="row">
                <div class="col-sm-6 copyrt xs-center">
                    2015 © All Rights Reserved. <a href="">Terms & Conditions</a> | <a href="">Privacy Policy</a>
                </div>
                <div class="col-sm-6 text-right xs-center">
                    <ul class="list-inline footer-social">
                        <li><a href=""><i class="fa fa-facebook"></i></a></li>
                        <li><a href=""><i class="fa fa-twitter"></i></a></li>
                        <li><a href=""><i class="fa fa-youtube-play"></i></a></li>
                        <li><a href=""><i class="fa fa-google-plus"></i></a></li>
                        <li><a href=""><i class="fa fa-skype"></i></a></li>
                    </ul>
                </div>
            </div>
        </div>
    </section>
</footer><a style="font-size: 8pt; text-decoration: none" target="_blank" href="http://frontendfreecode.com">Free Frontend</a>
                                                                            
.nb-footer {
    background: #272727;
    margin-top: 60px;
    padding-bottom: 30px;
}
.nb-footer .footer-single {
    margin-top: 30px;
}
.nb-footer .footer-title {
    display: block;
    margin: 10px 0 25px 0;
    border-bottom: 1px dotted #e4e9f0;
}
.nb-footer .footer-single a {
    text-decoration: none;
}
.nb-footer .footer-single h2 {
    color: #eee;
    font-size: 18px;
    font-weight: 200;
    display: inline-block;
    border-bottom: 2px solid #7BFF00;
    padding-bottom: 5px;
    margin-bottom: -2px;
}
.nb-footer .footer-single li {
    border-top: solid 1px #353535;
}
.nb-footer .footer-single li:first-child {
    border-top: none;
}
.nb-footer .footer-single li a {
    color: #979797;
    font-size: 12px;
    padding: 6px 0px;
    display: block;
    transition: all 0.4s ease-in-out;
}
.nb-footer .footer-single li a:hover {
    color: #7BFF00;
}
.nb-footer .footer-single li a:hover i {
    color: #7BFF00;
}
.nb-footer .dummy-logo {
    margin-top: 11px;
    padding-bottom: 9px;
}
.nb-footer .dummy-logo .icon {
    margin-right: 10px;
    border-radius: 20px;
    margin-top: 24px;
}
.nb-footer .brand {
    background: #7BFF00;
}
.nb-footer .dummy-logo i {
    font-size: 50px;
    color: #fff;
    padding: 5px;
}
.nb-footer .dummy-logo p {
    color: #999;
    font-size: 12px;
}
.nb-footer .dummy-logo h2 {
    font-size: 24px !important;
    border-bottom: none;
    color: #696969;
    padding: 5px 0;
}
.nb-footer .btn-footer {
    border: 1px solid #7BFF00;
    margin-top: 10px;
    color: #999;
}
.nb-footer .btn-footer:hover {
    background: #7BFF00;
    color: #fff;
    transition: all 0.4s ease-in-out;
}
.nb-footer .useful-links li a {
    text-transform: uppercase;
}
.nb-footer .footer-project a {
    font-size: 13px;
}
.nb-footer .footer-project img {
    margin-bottom: 20px;
    border: 1px solid #666;
    border-radius: 6px;
    padding: 1px;
    opacity: 0.7;
    transition: all 0.4s ease-in-out;
}
.nb-footer .footer-project img:hover {
    opacity: 1.0;
    cursor: pointer;
}
.nb-footer .footer-project .footer-title {
    margin-top: 0;
}
.nb-footer .footer-single p, .footer-single address {
    color: #979797;
    font-size: 14px;
    margin-top: 5px;
    line-height: 22px;
}
.nb-copyright {
    background: #171717;
    padding-bottom: 10px;
}
.nb-copyright .copyrt {
    margin-top: 22px;
    font-size: 14px;
}
.nb-copyright .copyrt a {
    color: #7BFF00;
}
.nb-copyright .footer-social {
    margin-top: 10px;
}
.nb-copyright .footer-social i {
    padding: 5px 10px;
    color: #999;
    border: 1px solid #333;
    margin-top: 10px;
    font-size: 20px;
    border-radius: 5px;
    transition: all 0.4s ease-in-out;
}
.nb-copyright .footer-social i:hover {
    background: #7BFF00;
    color: #fff;
}
.nb-copyright .footer-social .fa-facebook {
    padding: 5px 14px;
}
@media(max-width: 767px) {
.xs-center {
    text-align: center;
}
.left-clear {
    padding-left: 0;
}
.right-clear {
    padding-right: 0;
}
}
<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 href='https://netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet' />
<!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 href='https://netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet' />
<style>
.nb-footer {
    background: #272727;
    margin-top: 60px;
    padding-bottom: 30px;
}
.nb-footer .footer-single {
    margin-top: 30px;
}
.nb-footer .footer-title {
    display: block;
    margin: 10px 0 25px 0;
    border-bottom: 1px dotted #e4e9f0;
}
.nb-footer .footer-single a {
    text-decoration: none;
}
.nb-footer .footer-single h2 {
    color: #eee;
    font-size: 18px;
    font-weight: 200;
    display: inline-block;
    border-bottom: 2px solid #7BFF00;
    padding-bottom: 5px;
    margin-bottom: -2px;
}
.nb-footer .footer-single li {
    border-top: solid 1px #353535;
}
.nb-footer .footer-single li:first-child {
    border-top: none;
}
.nb-footer .footer-single li a {
    color: #979797;
    font-size: 12px;
    padding: 6px 0px;
    display: block;
    transition: all 0.4s ease-in-out;
}
.nb-footer .footer-single li a:hover {
    color: #7BFF00;
}
.nb-footer .footer-single li a:hover i {
    color: #7BFF00;
}
.nb-footer .dummy-logo {
    margin-top: 11px;
    padding-bottom: 9px;
}
.nb-footer .dummy-logo .icon {
    margin-right: 10px;
    border-radius: 20px;
    margin-top: 24px;
}
.nb-footer .brand {
    background: #7BFF00;
}
.nb-footer .dummy-logo i {
    font-size: 50px;
    color: #fff;
    padding: 5px;
}
.nb-footer .dummy-logo p {
    color: #999;
    font-size: 12px;
}
.nb-footer .dummy-logo h2 {
    font-size: 24px !important;
    border-bottom: none;
    color: #696969;
    padding: 5px 0;
}
.nb-footer .btn-footer {
    border: 1px solid #7BFF00;
    margin-top: 10px;
    color: #999;
}
.nb-footer .btn-footer:hover {
    background: #7BFF00;
    color: #fff;
    transition: all 0.4s ease-in-out;
}
.nb-footer .useful-links li a {
    text-transform: uppercase;
}
.nb-footer .footer-project a {
    font-size: 13px;
}
.nb-footer .footer-project img {
    margin-bottom: 20px;
    border: 1px solid #666;
    border-radius: 6px;
    padding: 1px;
    opacity: 0.7;
    transition: all 0.4s ease-in-out;
}
.nb-footer .footer-project img:hover {
    opacity: 1.0;
    cursor: pointer;
}
.nb-footer .footer-project .footer-title {
    margin-top: 0;
}
.nb-footer .footer-single p, .footer-single address {
    color: #979797;
    font-size: 14px;
    margin-top: 5px;
    line-height: 22px;
}
.nb-copyright {
    background: #171717;
    padding-bottom: 10px;
}
.nb-copyright .copyrt {
    margin-top: 22px;
    font-size: 14px;
}
.nb-copyright .copyrt a {
    color: #7BFF00;
}
.nb-copyright .footer-social {
    margin-top: 10px;
}
.nb-copyright .footer-social i {
    padding: 5px 10px;
    color: #999;
    border: 1px solid #333;
    margin-top: 10px;
    font-size: 20px;
    border-radius: 5px;
    transition: all 0.4s ease-in-out;
}
.nb-copyright .footer-social i:hover {
    background: #7BFF00;
    color: #fff;
}
.nb-copyright .footer-social .fa-facebook {
    padding: 5px 14px;
}
@media(max-width: 767px) {
.xs-center {
    text-align: center;
}
.left-clear {
    padding-left: 0;
}
.right-clear {
    padding-right: 0;
}
}
</style>

</head>
<body>
<footer>
    <section class="nb-footer">
        <div class="container">
            <div class="row">
                <div class="col-md-3 col-sm-6 col-xs-6">
                    <div class="footer-single">
                        <div class="dummy-logo">
                            <div class="icon pull-left brand">
                                <i class="fa fa-copy"></i>
                            </div>
                            <h2>Lorem Ipsum</h2>
                            <p>Another responsive footer</p>
                        </div>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus felis diam, vulputate in risus eu, porttitor condimentum purus. Phasellus ullamcorper, odio id feugiat bibendum.</p>
                        <a href="" class="btn btn-footer">Read More</a>
                    </div>
                </div>
                <div class="col-md-3 col-sm-6 col-xs-6">
                    <div class="footer-single useful-links">
                        <div class="footer-title"><h2>Navigation</h2></div>
                        <ul class="list-unstyled">
                            <li><a href="index.html">Home <i class="fa fa-angle-right pull-right"></i></a></li>
                            <li><a href="about1.html">About Us <i class="fa fa-angle-right pull-right"></i></a></li>
                            <li><a href="service1.html">Services <i class="fa fa-angle-right pull-right"></i></a></li>
                            <li><a href="portfolio1.html">Portfolio <i class="fa fa-angle-right pull-right"></i></a></li>
                            <li><a href="pricing.html">Pricing <i class="fa fa-angle-right pull-right"></i></a></li>
                            <li><a href="contact1.html">Contact Us <i class="fa fa-angle-right pull-right"></i></a></li>
                        </ul>
                    </div>
                </div>
                <div class="clearfix visible-sm"></div>
                <div class="col-md-3 col-sm-6 col-xs-6" style="float:right">
                    <div class="col-sm-12 left-clear right-clear footer-single footer-project">
                        <div class="footer-title"><h2>Latest Projects</h2></div>
                        <div class="col-xs-4">
                            <img src="https://frontendfreecode.com/img/soshi.jpg" class="img-responsive center-block">
                        </div>
                        <div class="col-xs-4">
                            <img src="https://frontendfreecode.com/img/soshi.jpg" class="img-responsive center-block">
                        </div>
                        <div class="col-xs-4">
                            <img src="https://frontendfreecode.com/img/soshi.jpg" class="img-responsive center-block">
                        </div>
                        <div class="clearfix"></div>
                        <div class="col-xs-4">
                            <img src="https://frontendfreecode.com/img/soshi.jpg" class="img-responsive center-block">
                        </div>
                        <div class="col-xs-4">
                            <img src="https://frontendfreecode.com/img/soshi.jpg" class="img-responsive center-block">
                        </div>
                        <div class="col-xs-4">
                            <img src="https://frontendfreecode.com/img/soshi.jpg" class="img-responsive center-block">
                        </div>
                    </div>
                </div>
                <div class="col-md-3 col-sm-6 col-xs-6">
                    <div class="footer-single">
                        <div class="footer-title"><h2>Contact Information</h2></div>
                        <address>
                            999, Holly Eiusmod Tempor, City<br>
                            Your State, Country <br>
                            <i class="fa fa-phone"></i>  987 654 3210 <br>
                            <i class="fa fa-fax"></i> 012 123 2345<br>
                            <i class="fa fa-envelope"></i> info@example.com<br>
                        </address>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <section class="nb-copyright">
        <div class="container">
            <div class="row">
                <div class="col-sm-6 copyrt xs-center">
                    2015 © All Rights Reserved. <a href="">Terms & Conditions</a> | <a href="">Privacy Policy</a>
                </div>
                <div class="col-sm-6 text-right xs-center">
                    <ul class="list-inline footer-social">
                        <li><a href=""><i class="fa fa-facebook"></i></a></li>
                        <li><a href=""><i class="fa fa-twitter"></i></a></li>
                        <li><a href=""><i class="fa fa-youtube-play"></i></a></li>
                        <li><a href=""><i class="fa fa-google-plus"></i></a></li>
                        <li><a href=""><i class="fa fa-skype"></i></a></li>
                    </ul>
                </div>
            </div>
        </div>
    </section>
</footer><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Free Frontend</a></div>

</body>
</html>
Preview