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.

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;
}

.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;
}