content logo
Bootstrap Footers: Bootstrap Dark Footer

In all websites, footer is used at the bottom of the website page. Below is a beautiful and 4 columns with a dark theme for you. This footer includes a section about us and important links. Also, the phrase "All rights reserved" is written at the end of it and has created a complete footer. You can put the link of your latest news in the footer of your website to increase the SEO of your site.

#Bootstrao Footer #Bootstrap Dark Footer # Four Column Footer #Dark Footer
<!-- this script got from www.frontendfreecode.com -->
<footer id="fh5co-footer" class="fh5co-bg" role="contentinfo"> <div class="overlay"></div> <div class="container"> <div class="row row-pb-md"> <div class="col-md-4 col-sm-4 col-xs-4 fh5co-widget"> <h3>A Little About Stamina.</h3> <p>Facilis ipsum reprehenderit nemo molestias. Aut cum mollitia reprehenderit. Eos cumque dicta adipisci architecto culpa amet.</p> <p><a class="btn btn-primary" href="#">Become A Member</a></p> </div> <div class="col-md-8 col-xs-8"> <h3>Classes</h3> <div class="col-md-4 col-sm-4 col-xs-4"> <ul class="fh5co-footer-links"> <li><a href="#">Cardio</a></li> <li><a href="#">Body Building</a></li> <li><a href="#">Yoga</a></li> <li><a href="#">Boxing</a></li> <li><a href="#">Running</a></li> </ul> </div> <div class="col-md-4 col-sm-4 col-xs-4"> <ul class="fh5co-footer-links"> <li><a href="#">Boxing</a></li> <li><a href="#">Martial Arts</a></li> <li><a href="#">Karate</a></li> <li><a href="#">Kungfu</a></li> <li><a href="#">Basketball</a></li> </ul> </div> <div class="col-md-4 col-sm-4 col-xs-4"> <ul class="fh5co-footer-links"> <li><a href="#">Badminton</a></li> <li><a href="#">Body Building</a></li> <li><a href="#">Teams</a></li> <li><a href="#">Advertise</a></li> <li><a href="#">API</a></li> </ul> </div> </div> </div> <div class="row copyright"> <div class="col-md-12 text-center"> <p> <small class="block">&copy; 2017 | All Rights Reserved.</small> <small class="block">Powered by siteName.com</small> </p> </div> </div> </div> </footer><a style="font-size: 8pt; text-decoration: none" target="_blank" href="http://www.frontendfreecode.com">Frontend Code</a>
.content-main {
  height: 200vh;
}
.fh5co-bg {
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  position: relative;
}
.fh5co-bg {
  background-size: cover;
  background-position: center center;
  position: relative;
  width: 100%;
  float: left;
}
.fh5co-bg .overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  -webkit-transition: 0.5s;
  -o-transition: 0.5s;
  transition: 0.5s;
}
.fh5co-bg-section {
  background: rgba(0, 0, 0, 0.05);
}
#fh5co-footer {
  padding: 7em 0;
  clear: both;
}
@media screen and (max-width: 768px) {
  #fh5co-footer {
    padding: 3em 0;
  }
}
#fh5co-footer {
  position: relative;
}
#fh5co-footer .overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.9);
  -webkit-transition: 0.5s;
  -o-transition: 0.5s;
  transition: 0.5s;
}
#fh5co-footer h3 {
  margin-bottom: 15px;
  font-weight: bold;
  font-size: 15px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.8);
}
#fh5co-footer .fh5co-footer-links {
  padding: 0;
  margin: 0;
}
#fh5co-footer .fh5co-footer-links li {
  padding: 0;
  margin: 0;
  list-style: none;
}
#fh5co-footer .fh5co-footer-links li a {
  color: rgba(255, 255, 255, 0.5);
  text-decoration: none;
}
#fh5co-footer .fh5co-footer-links li a:hover {
  text-decoration: underline;
}
#fh5co-footer .fh5co-widget {
  margin-bottom: 30px;
}
@media screen and (max-width: 768px) {
  #fh5co-footer .fh5co-widget {
    text-align: left;
  }
}
#fh5co-footer .fh5co-widget h3 {
  margin-bottom: 15px;
  font-weight: bold;
  font-size: 15px;
  letter-spacing: 2px;
  text-transform: uppercase;
}
#fh5co-footer .copyright .block {
  display: block;
}
.btn-primary {
  background: #F85A16;
  color: #fff;
  border: 2px solid #F85A16;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
  background: #f96c2f !important;
  border-color: #f96c2f !important;
}
.btn-primary.btn-outline {
  background: transparent;
  color: #F85A16;
  border: 1px solid #F85A16;
}
.btn-primary.btn-outline:hover, .btn-primary.btn-outline:focus, .btn-primary.btn-outline:active {
  background: #F85A16;
  color: #fff;
}
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"><!-- this script got from www.frontendfreecode.com -->
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>
<style>
.content-main {
  height: 200vh;
}
.fh5co-bg {
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  position: relative;
}
.fh5co-bg {
  background-size: cover;
  background-position: center center;
  position: relative;
  width: 100%;
  float: left;
}
.fh5co-bg .overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  -webkit-transition: 0.5s;
  -o-transition: 0.5s;
  transition: 0.5s;
}
.fh5co-bg-section {
  background: rgba(0, 0, 0, 0.05);
}
#fh5co-footer {
  padding: 7em 0;
  clear: both;
}
@media screen and (max-width: 768px) {
  #fh5co-footer {
    padding: 3em 0;
  }
}
#fh5co-footer {
  position: relative;
}
#fh5co-footer .overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.9);
  -webkit-transition: 0.5s;
  -o-transition: 0.5s;
  transition: 0.5s;
}
#fh5co-footer h3 {
  margin-bottom: 15px;
  font-weight: bold;
  font-size: 15px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.8);
}
#fh5co-footer .fh5co-footer-links {
  padding: 0;
  margin: 0;
}
#fh5co-footer .fh5co-footer-links li {
  padding: 0;
  margin: 0;
  list-style: none;
}
#fh5co-footer .fh5co-footer-links li a {
  color: rgba(255, 255, 255, 0.5);
  text-decoration: none;
}
#fh5co-footer .fh5co-footer-links li a:hover {
  text-decoration: underline;
}
#fh5co-footer .fh5co-widget {
  margin-bottom: 30px;
}
@media screen and (max-width: 768px) {
  #fh5co-footer .fh5co-widget {
    text-align: left;
  }
}
#fh5co-footer .fh5co-widget h3 {
  margin-bottom: 15px;
  font-weight: bold;
  font-size: 15px;
  letter-spacing: 2px;
  text-transform: uppercase;
}
#fh5co-footer .copyright .block {
  display: block;
}
.btn-primary {
  background: #F85A16;
  color: #fff;
  border: 2px solid #F85A16;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
  background: #f96c2f !important;
  border-color: #f96c2f !important;
}
.btn-primary.btn-outline {
  background: transparent;
  color: #F85A16;
  border: 1px solid #F85A16;
}
.btn-primary.btn-outline:hover, .btn-primary.btn-outline:focus, .btn-primary.btn-outline:active {
  background: #F85A16;
  color: #fff;
}
</style>

</head>
<body>
<footer id="fh5co-footer" class="fh5co-bg" role="contentinfo">
    <div class="overlay"></div>
    <div class="container">
        <div class="row row-pb-md">
            <div class="col-md-4 col-sm-4 col-xs-4 fh5co-widget">
                <h3>A Little About Stamina.</h3>
                <p>Facilis ipsum reprehenderit nemo molestias. Aut cum mollitia reprehenderit. Eos cumque dicta adipisci architecto culpa amet.</p>
                <p><a class="btn btn-primary" href="#">Become A Member</a></p>
            </div>
            <div class="col-md-8 col-xs-8">
                <h3>Classes</h3>
                <div class="col-md-4 col-sm-4 col-xs-4">
                    <ul class="fh5co-footer-links">
                        <li><a href="#">Cardio</a></li>
                        <li><a href="#">Body Building</a></li>
                        <li><a href="#">Yoga</a></li>
                        <li><a href="#">Boxing</a></li>
                        <li><a href="#">Running</a></li>
                    </ul>
                </div>

                <div class="col-md-4 col-sm-4 col-xs-4">
                    <ul class="fh5co-footer-links">
                        <li><a href="#">Boxing</a></li>
                        <li><a href="#">Martial Arts</a></li>
                        <li><a href="#">Karate</a></li>
                        <li><a href="#">Kungfu</a></li>
                        <li><a href="#">Basketball</a></li>
                    </ul>
                </div>

                <div class="col-md-4 col-sm-4 col-xs-4">
                    <ul class="fh5co-footer-links">
                        <li><a href="#">Badminton</a></li>
                        <li><a href="#">Body Building</a></li>
                        <li><a href="#">Teams</a></li>
                        <li><a href="#">Advertise</a></li>
                        <li><a href="#">API</a></li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="row copyright">
            <div class="col-md-12 text-center">
                <p>
                    <small class="block">&copy; 2017 | All Rights Reserved.</small>
                    <small class="block">Powered by  siteName.com</small>
                </p>
            </div>
        </div>

    </div>
</footer>
<div id="bcl"><a style="font-size: 8pt; text-decoration: none" target="_blank" href="http://www.frontendfreecode.com">Frontend Code</a></div>

</body>
</html>
Preview