×
FREE ASSISTANCE FOR THE INQUISITIVE PEOPLE
Tutorial Topics
X
softetechnologies
Bootstrap Large Footer [ 3/4 columns footer ] Bootstrap column system: Create a Team Section
Bootstrap Footer with copyright text and footer menu - Bootstrap 3
11386    Arnab De    18/05/2017

Copyright text placed in the footer

Most of the modern web sites have footer just below the every page. Under the heading Bootstrap Footer we demonstrate how we create different footer in different web site. Generally, this footer populated by the copyright information or the footer menu. Here we place the copyright information at the left side of the footer and footer menu placed at the right side of the footer.

N.B. we must download and placed the bootstrap.min.css file in the home folder.

softetechnologies

Code for Bootstrap Footer 

<section id="lower-footer">
<div class="container">
<div class="row">
<div class="col-md-12">
<!--left text-->
<div class="col-md-6">
<div class="left-text pad"> &copy; 2017 Tutorial At Home. </div>
</div>
<!--Right menu-->
<div class="col-md-6">
<div class="pull-right pad">
<ul class="menu">
<li> <a href="#"> HOME </a> </li>
<li> <a href="#"> PRODUCT </a> </li>
<li> <a href="#">CONTACT US</a> </li>
<li> <a href="#">ABOUT US</a> </li>
</ul>
</div>
</div>
</div>
</div>
</div>
</section>

CSS CODE

#lower-footer
{
min-height: 20px;
background-color: black;
}

.left-text
{
color:white;
}

.menu
{
padding: 5px 0 5px 0;
}

.menu li
{
display:inline-block;
padding:0 15px 0 15px;
border-left:solid 1px #fff;
}

softetechnologies

.menu li a
{
display:inline-block;
padding:0 15px 0 15px;
}

.menu li:first-child
{
border-left:none;
}

.menu li a
{
color:white;
}

.menu li a:hover
{
color:red;
}

.pad
{
padding-top: 12px;
}

Video Tutorials

Bootstrap Large Footer [ 3/4 columns footer ] Bootstrap column system: Create a Team Section
softetechnologies
Author Details
Arnab De
I have over 16 years of experience working as an IT professional, ranging from teaching at my own institute to being a computer faculty at different leading institute across Kolkata. I also work as a web developer and designer, having worked for renowned companies and brand. Through tutorialathome, I wish to share my years of knowledge with the readers.
Enter New Comment
Comment History
No Comment Found Yet.
Sri Sri Ramakrishna Paramahamsa
The supreme purpose and goal for human life... is to cultivate love.
Sri Sri Ramakrishna Paramahamsa
1982
32.39
Today So Far
Total View (Lakh)
softetechnologies
01/01/2018     33195
28/06/2017     29002
02/08/2017     26440
26/05/2018     25917
15/05/2017     22730
06/07/2017     21157
01/08/2017     20858
21/04/2018     18365
25/06/2018     17076
14/07/2017     15980
softetechnologies