How to create Bootstrap 4 Footer?

There is no built-in component for creating the fixed/sticky or simple footer like forms, buttons, tooltips, popovers, etc. However, by using a few CSS styles/properties you may create a fixed or static footer easily.

You may include other components in the footer with a few lines of code.

In this article, I am going to show you a few footer templates based on Bootstrap 4 framework that you may use in your Bootstrap projects.

An example of a fixed/sticky footer

You simply need to use the <footer> tag after all other content where you require to refer the .footer class shown below. It will create a sticky footer that remains fixed even vertical scroll bar appears.

Bootstrap 4 sticky footer

The style for the footer:

<style>

.footer {

    position: fixed;

    bottom: 0;

    width: 100%;

    height: 55px;

    background-color: #DFDFDF;

}

</style>

The markup used for the footer:

    <footer class="footer">

      <div class="container">

      <p>&copy; Company Name | Privacy Policy | Terms of Service</p>

      </div>

    </footer>

In the CSS code, you can see the position is used as fixed. That makes the footer fixed as you scroll down the page.

Tweaking a little for centered text and linear background

This sticky footer is centered text and uses padding for lowering the text along with changing the background a bit. For that, a linear background is added along with other properties to stand out in the fixed footer. Have a look:

Bootstrap footer

Only this style is changed than the above example:

<style>

.footer {

    position: fixed;

    height: 55px;

    bottom: 0;

    color:#fff;

    padding-top:20px;

    width: 100%;

    background: #00003E;

    background: -webkit-linear-gradient(to right, #31BDE6, #00003E); 

    background: linear-gradient(to right, #31BDE6, #00003E);

    text-align:center;

}

</style>

A large size static footer example

You may use this large footer menu in Bootstrap if the footer is supposed to contain many links. For example, for services like hosting, an e-commerce store or any other website, the footer may require presenting a good number of link or information that goes across the site. Have a look at the demo and code of CSS and HTML:

Bootstrap footer large

Complete code including custom CSS:

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<style>
.full {
    width: 100%;	
}

.footer {
	height: auto;
	padding-bottom: 30px;
	position: relative;
	width: 100%;
    color:#fff;
	border-bottom: 1px solid #CCCCCC;
	border-top: 1px solid #DDDDDD;
    background: #00003E; 
    background: -webkit-linear-gradient(to right, #31BDE6, #00003E);  
    background: linear-gradient(to right, #31BDE6, #00003E);     
}


.footer h3 {
	border-bottom: 1px solid #BAC1C8;
    color:#fff;
	font-size: 18px;
	font-weight: 600;
	line-height: 27px;
	padding: 40px 0 10px;
	text-transform: uppercase;
}
.footer ul {
	font-size: 13px;
	list-style-type: none;
	margin-left: 0;
	padding-left: 0;
	margin-top: 15px;
	color: #7F8C8D;
}
.footer ul li a {
	padding: 0 0 5px 0;
	display: block;
}
.footer a {
	color: #78828D;
    color:#fff;
}
.supportLi h4 {
	font-size: 20px;
	font-weight: lighter;
	line-height: normal;
	margin-bottom: 0 !important;
	padding-bottom: 0;
}

.subscribe-btn .btn {
	border: medium none;
	border-radius: 4px;
	display: inline-block;
	height: 40px;
	padding: 0;
	width: 100%;
	color: #fff;
    margin-top:10px;
}
.subscribe-btn {
	overflow: hidden;
}

.social li {
	border: 2px solid #B5B5B5;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	-o-border-radius: 50%;
	-ms-border-radius: 50%;
	border-radius: 50%;
	float: left;
	height: 36px;
	line-height: 36px;
	margin: 0 8px 0 0;
	padding: 0;
	text-align: center;
	width: 36px;
	transition: all 0.5s ease 0s;
	-moz-transition: all 0.5s ease 0s;
	-webkit-transition: all 0.5s ease 0s;
	-ms-transition: all 0.5s ease 0s;
	-o-transition: all 0.5s ease 0s;
}

.social li a {
	color: #EDEFF1;
}
.social li:hover {
	border: 2px solid #2c3e50;
	background: #2c3e50;
}
.social li a i {
	font-size: 16px;
	margin: 0 0 0 5px;
	color: #EDEFF1 !important;
}
.footer-bottom {
    background: #40E0D0;
    background: -webkit-linear-gradient(to right, #FF0080, #FF8C00, #40E0D0);
    background: linear-gradient(to right, #FF0080, #FF8C00, #40E0D0);
	border-top: 1px solid #DDDDDD;
	padding-top: 20px;
	padding-bottom: 40px;
    color:#fff;
}
.footer-bottom p.pull-left {
	padding-top: 6px;
}
.payments {
	font-size: 1.5em;	
}
</style>
</head>
<body>
<div class="container">
<h3>A Demo of sticket footer</h3>
<div class="card">
  <div class="card-header">
    Featured
  </div>
  <div class="card-block">
    <h4 class="card-title">Special title treatment</h4>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

<div class="card">
  <div class="card-header">
    Featured
  </div>
  <div class="card-block">
    <h4 class="card-title">Special title treatment</h4>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

<div class="card">
  <div class="card-header">
    Featured
  </div>
  <div class="card-block">
    <h4 class="card-title">Special title treatment</h4>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

<br /><br /><br /><br />

<footer>
    <div class="footer" id="footer">
        <div class="container">
            <div class="row">
                <div class="col-lg-2  col-md-2 col-sm-4 col-xs-6">
                    <h3> Specials</h3>
                    <ul>
                        <li> <a href="#"> Product 1</a> </li>
                        <li> <a href="#"> Product 1 </a> </li>
                        <li> <a href="#"> Product 3 </a> </li>
                        <li> <a href="#"> Product 4 </a> </li>
                        <li> <a href="#"> Product 5 </a> </li>
                    </ul>
                </div>
                <div class="col-lg-2  col-md-2 col-sm-4 col-xs-6">
                    <h3> Services </h3>
                    <ul>
                        <li> <a href="#"> Services 1 </a> </li>
                        <li> <a href="#"> Services 2 </a> </li>
                        <li> <a href="#"> Services 3 </a> </li>
                        <li> <a href="#"> Services 4 </a> </li>
                        <li> <a href="#"> Services 5 </a> </li>
                    </ul>
                </div>
                <div class="col-lg-2  col-md-2 col-sm-4 col-xs-6">
                    <h3> About </h3>
                    <ul>
                        <li> <a href="#"> Our Company </a> </li>
                        <li> <a href="#"> About Us </a> </li>
                        <li> <a href="#"> Terms of Services </a> </li>
                        <li> <a href="#"> Our Team </a> </li>
                    </ul>
                </div>
                <div class="col-lg-2  col-md-2 col-sm-4 col-xs-6">
                    <h3> Contact </h3>
                    <ul>
                        <li> <a href="#"> Contact Marketing </a> </li>
                        <li> <a href="#"> Contact Sales </a> </li>
                        <li> <a href="#"> Contact HR </a> </li>
                        <li> <a href="#"> Contact Admin </a> </li>
                    </ul>
                </div>
                <div class="col-lg-3  col-md-3 col-sm-6 col-xs-12 ">
                    <h3> Subscribe Us </h3>
                    <ul>
                        <li>
                            <div class="input-append subscribe-btn text-center">
                                <input type="text" class="full text-center" placeholder="Email ">
                                <button class="btn  btn-success" type="button"> Subscribe <i class="fa fa-save"> </i> </button>
                            </div>
                        </li>
                    </ul>
                    <ul class="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-google-plus">   </i> </a> </li>
                        <li> <a href="#"> <i class="fa fa-pinterest">   </i> </a> </li>
                        <li> <a href="#"> <i class="fa fa-youtube">   </i> </a> </li>
                    </ul>
                </div>
            </div>
            <!--/.row--> 
        </div>
        <!--/.container--> 
    </div>
    <!--/.footer-->
    
    <div class="footer-bottom">
        <div class="container">
            <p class="pull-left"> Copyright � 2004-2018. All rights reserved. </p>
            <div class="pull-right"> 
                <ul class="nav nav-pills payments">
                    <li>We Accept:  </li>
                    <li><i class="fa fa-cc-paypal"></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-visa"></i></li>                    
                </ul> 
            </div>
        </div>
    </div>
    <!--/.footer-bottom--> 
</footer>

</div>
</body>
</html>

Large footer style number 2

The markup and most of the CSS are the same for this footer template as in the above example. I just changed the linear background colors for both footer classes along with the button style, payment option icon size, etc. Have a look:

Bootstrap footer style 2

The CSS:

.footer {

                height: auto;

                padding-bottom: 30px;

                position: relative;

                width: 100%;

    color:#fff;

                border-bottom: 1px solid #CCCCCC;

                border-top: 1px solid #DDDDDD;

    background: #182765; 

    background: -webkit-linear-gradient(to right, #FDBD37, #B92020, #182765); 

    background: linear-gradient(to right, #FDBD37, #B92020, #182765);



}

And

.footer-bottom {

    background: #d9a7c7;

    background: -webkit-linear-gradient(to right, #fffcdc, #d9a7c7);

    background: linear-gradient(to right, #fffcdc, #d9a7c7);



                border-top: 1px solid #DDDDDD;

                padding-top: 20px;

                padding-bottom: 40px;

    color:#000;

}

 

 

Author - Abu Hassam

Abu Hassam is an experienced web developer. He graduated in Computer Science in 2000. Started as a software engineer and worked mostly on web-based projects.
Just like any great adventure, web development is about discovery and learning.
The web is a vast playground, and the best adventures are yet to come. Happy coding and exploring! 🌍⌨️