Reference Websites
Create A Bootstrap Ecommerce Website
  Start Coding
 Step 1 : Basic HTML Structure
  HTML Code
<html>
<head>
<title>How To Create A Basic Bootstrap Ecommerce Website - Free Time Learning</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=yes">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css" />
</head>

<body>

<div class="container-fluid">
   <div class="main_shadow">


   </div>
</div>

<script type="text/javascript" src="http://www.freetimelearning.com/js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>

</body>
</html>
  CSS Code
*{
	margin-left:auto;
	margin-right:auto;
}
.row{ margin:0px;}
body{
	font-family:Arial, Helvetica, sans-serif;
	background:#FFF;
	margin:0px;
	}
.main_shadow{
	-webkit-box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12), 0 3px 5px -1px rgba(0, 0, 0, 0.3) !important; 
	box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12), 0 3px 5px -1px rgba(0, 0, 0, 0.3) !important;
	margin-bottom:20px;
	}
.clearfix{ clear:both;}
.m10_0{ margin:10px auto;} .m20_0{ margin:20px auto;} .m30_0{ margin:30px auto;} .m40_0{ margin:40px auto;} .m50_0{ margin:50px auto;}
@media only screen and (min-width:320px) and (max-width:480px){ #wrapper{ width:375px;} }
@media only screen and (min-width:600px) and (max-width:768px){#wrapper{ width:768px;} }
 Step 2 : Header
Responsive Website
  HTML Code
<div class="row main_header">
	<div class="col-md-3 col-sm-3 col-xs-12 logo" align="center">
    	<a href="http://www.freetimelearning.com/" target="_blank"><img src="images/logo.png" class="img-responsive" alt="Logo"></a></div>
    <div class="col-md-9 col-sm-9 col-xs-12">
    
    	<div class="row">
            <div class="col-md-5 col-sm-5 col-xs-12 form-top hidden-xs" align="center">
                <div class="input-group">
                    <input type="text" class="form-control" placeholder="Search Here">
                    <span class="input-group-btn">
                        <button type="button" class="btn btn_search"><i class="fa fa-search"></i></button>
                    </span>
                </div>
            </div>
            <div class="col-md-7 col-sm-7 col-xs-12" align="right">
                <div class="row hidden-xs">
                     <div class="row">
                        <div class="header-top pull-right">
                            <ul>
                                <li><a href=""><i class="fa fa-facebook"></i>&nbsp;</a></li>
                                <li><a href=""><i class="fa fa-twitter"></i></a></li>
                                <li><a href=""><i class="fa fa-linkedin"></i></a></li>
                                <li><a href=""><i class="fa fa-google"></i></a></li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="clearfix" style="margin:2px 0px;"></div>
                <div class="row" align="center">
                	<div class="col-md-7 col-sm-7 col-xs-12">
                        <div class="header-right-bottom">
                            <ul>
                                <li><a href="#!">Sign In</a></li>
                                <li style="border-right:none;"><a href="#!">Sign Up</a></li>
                            </ul>
                        </div>
                    </div>
                    <div class="col-md-5 col-sm-5 col-xs-12">
                        <div class="header-right-bottom">
                            <i class="fa fa-cart-plus cart_size"></i> &nbsp; 
                            <i class="fa fa-inr inr_size"></i> <span class="amount">1569 /-</span>
                        </div>
                    </div>
                </div>
            </div>
    	</div>
        
   </div>
</div>
  CSS Code
.main_header{border-top:2px solid #df001a;}
.logo{ padding:12px 0px 0px;}
.btn_search{ background:#df001a !important; color:#FFF;}
.btn_search:hover, .btn_search:active, .btn_search:focus{ background:#bb0016; color:#FFF;}
.form-top{ margin-top:50px;}
.form-control{ border-radius:2px; margin:0px auto 4px;}
.form{padding:0px 10px; border:1px solid #df001a; border-radius:2px;}
.btn{ outline:none !important;}
.input-group-btn:last-child>.btn, .input-group-btn:last-child>.btn-group {
    padding: 8px 10px 9px;
	border-radius:2px;
}
.header-top{ height:35px; margin:10px auto 0px;}
.header-top ul{ list-style:none; margin:2px 5px 5px;}
.header-top ul li{ float:left; padding:0px 11px; margin-top:2px;}
.header-top ul li a{ font-size:12px; text-decoration:none; background:#df001a; color:#FFF; 
padding:8px 10px; border-radius:100px; text-align:center;}
.header-top ul li a:hover{ background:#bb0016; color:#FFF;}

.header-right-bottom{ list-style:none;}
.header-right-bottom ul{list-style:none; margin:0px; padding-left:100px}
.header-right-bottom ul li{ list-style:none; font-family:arial; font-size:12px; padding:5px 0px; 
margin:10px 0px; float:left; font-weight:bold;}
.header-right-bottom ul li a{ padding:5px 10px; border-radius:3px;
margin:2px 5px 5px; text-decoration:none; color:#FFF; background:#df001a;}
.header-right-bottom ul li a:hover{ color:#FFF; background:#bb0016;}
.cart_size{ font-size:30px !important; color:#df001a;}
.inr_size, .amount{ font-size:24px !important; color:#000;}

@media only screen and (min-width:960px) and (max-width:1024px){
	.header-right-bottom ul{padding-left:35px;}
	.header-right-bottom ul li{ margin: 0px 0px 10px;}
	.cart_size{ font-size:20px !important;}
	.inr_size, .amount{ font-size:16px !important;}
	.form-top{ margin-top:40px;}
}
@media only screen and (min-width:600px) and (max-width:768px){
	.header-right-bottom ul{padding-left:5px;}
	.header-right-bottom ul li{ margin: 0px 0px 10px;}
	.header-right-bottom ul li a{ padding:3px 5px; margin:2px 2px 5px;}
	.cart_size{ font-size:16px !important;}
	.inr_size, .amount{ font-size:14px !important;}
	.form-top{ margin-top:30px;}
	}
 Step 3 : Menu Bar
Responsive Website
  HTML Code
<nav class="navbar navbar-default">
    <div class="navbar-header">
        <button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
       <!-- <a href="#!" class="navbar-brand">Logo</a>-->
     </div>
    <div id="navbarCollapse" class="collapse navbar-collapse">
    <ul class="nav navbar-nav">
      <li> <a href="http://freetimelearning.com/" target="_blank">Home</a></li>
      <li class="dropdown">
        <a class="dropdown-toggle" data-toggle="dropdown" href="#">Men Shoes &nbsp;
        <span class="caret"></span></a>
        <ul class="dropdown-menu">
            <li><a href="#!"> Barnd Name</a></li>
            <li><a href="#!"> Barnd Name</a></li>
            <li><a href="#!"> Barnd Name</a></li>
            <li><a href="#!"> Barnd Name</a></li>
        </ul>
      </li>
      <li class="dropdown">
        <a class="dropdown-toggle" data-toggle="dropdown" href="#">Women Shoes &nbsp;
        <span class="caret"></span></a>
        <ul class="dropdown-menu">
            <li><a href="#!"> Barnd Name</a></li>
            <li><a href="#!"> Barnd Name</a></li>
            <li><a href="#!"> Barnd Name</a></li>
            <li><a href="#!"> Barnd Name</a></li>
        </ul>
      </li>
      <li class="dropdown">
        <a class="dropdown-toggle" data-toggle="dropdown" href="#">Kids Shoes &nbsp;
        <span class="caret"></span></a>
        <ul class="dropdown-menu">
            <li><a href="#!"> Barnd Name</a></li>
            <li><a href="#!"> Barnd Name</a></li>
            <li><a href="#!"> Barnd Name</a></li>
            <li><a href="#!"> Barnd Name</a></li>
        </ul>
      </li>
      <li class="dropdown">
        <a class="dropdown-toggle" data-toggle="dropdown" href="#">Formal Shoes &nbsp;
        <span class="caret"></span></a>
        <ul class="dropdown-menu">
            <li><a href="#!"> Barnd Name</a></li>
            <li><a href="#!"> Barnd Name</a></li>
            <li><a href="#!"> Barnd Name</a></li>
            <li><a href="#!"> Barnd Name</a></li>
        </ul>
      </li>
      <li class="dropdown">
        <a class="dropdown-toggle" data-toggle="dropdown" href="#">Top Brands &nbsp;
        <span class="caret"></span></a>
        <ul class="dropdown-menu">
            <li><a href="#!"> Barnd Name</a></li>
            <li><a href="#!"> Barnd Name</a></li>
            <li><a href="#!"> Barnd Name</a></li>
            <li><a href="#!"> Barnd Name</a></li>
        </ul>
      </li>
      <li><a href="#!">Products</a></li>
      <li><a href="#!">Services</a></li>
      <li><a href="#!">Gallery</a></li>
	  <li><a href="#!">Branches</a></li>
    </ul>
  </div>
</nav>
  CSS Code
.navbar-brand {
    float: left;
    height: 65px;
    padding: 5px 15px;
    font-size: 18px;
    line-height: 20px;
}
.navbar-default{ 
	border-radius:2px; 
	background:#df001a; 
	margin-bottom:0px; 
	border:none !important;
}
.navbar-default ul{ padding:9px 0px 5px;}
.navbar-default .navbar-nav>li>a{ 
	color:#FFF; 
	padding:7px 27px; 
	font-size:13px; 
	font-weight:600;
	font-style:italic;
}
.navbar-default .navbar-collapse, .navbar-default .navbar-form{
    border-color: #e7e7e7;
}
.navbar-default .navbar-nav>.open>a, .navbar-default .navbar-nav>.open>a:focus, .navbar-default .navbar-nav>.open>a:hover{
	color:#000;
	background:#df001a;
	}
.dropdown-menu{ border-radius:1px; background:#df001a;}
.navbar-nav>li>.dropdown-menu{ margin-top:0px; border-top:#df001a 2px solid;}
.dropdown-menu>li>a{ color:#FFF !important; font-style:italic; font-size:12px; font-weight:bold;}
.dropdown-menu>li>a:hover{ color:#000 !important; background:#df001a !important;}
.navbar-default .navbar-nav>li>a:hover{ color:#000; background:#df001a;}
@media only screen and (min-width:320px) and (max-width:480px){ .logo{ padding:10px 0px 0px;} }
@media only screen and (min-width:600px) and (max-width:768px){
	.navbar-default .navbar-nav>li>a{padding:7px 3px; font-size:11px; }
	}
@media only screen and (min-width:1025px) and (max-width:1280px){
	.navbar-default .navbar-nav>li>a{ padding:7px 21px; }
   }
@media only screen and (min-width:960px) and (max-width:1024px){
	.navbar-default .navbar-nav>li>a{ padding:7px 10px; }
   }
  JavaScript Code
$(function(){
$(".dropdown").hover(            
		function() {
			$('.dropdown-menu', this).stop( true, true ).fadeIn("fast");
			$(this).toggleClass('open');
			$('b', this).toggleClass("caret caret-up");                
		},
		function() {
			$('.dropdown-menu', this).stop( true, true ).fadeOut("fast");
			$(this).toggleClass('open');
			$('b', this).toggleClass("caret caret-up");                
		});
});
 Step 4 : Banner (or) Slider
Responsive Website
  HTML Code
<div class="row">
	<div class="slider">
       <div class="slider-padding">
            <div style="padding-top:30px;"><a href="#" class="btn">Click Here!</a></div>
       </div>
    </div>
</div>
  CSS Code
.slider{ background:url(../images/slider.jpg); height:300px;}
.slider-padding{padding:150px 0px 0px 100px;}
.btn{ background:#df001a; color:#FFF; padding:6px 20px; font-size:16px; 
text-decoration:none; border-radius:3px; text-shadow:none; float:left;}
.btn:hover{ background:#bb0016; color:#FFF;}
@media only screen and (min-width:320px) and (max-width:480px){ 
.slider-h3{ font-size:22px; padding:40px 0px 0px 30px;} 
}
 Step 5 : Content
Responsive Website
  HTML Code
<div class="row">
     <div class="col-lg-3 col-md-3 col-sm-4 col-xs-12">
     
     	<div id='content_left_menu'>
        <div class="categories">All Categories</div>
        <ul>
        	<li class='has-sub'><a href='#'><span>Featured brands</span></a>
              <ul>
                 <li><a href='#!'><span>Lorem Ipsum</span></a></li>
                 <li><a href='#!'><span>Lorem Ipsum</span></a></li>
                 <li><a href='#!'><span>Lorem Ipsum</span></a></li>
                 <li><a href='#!'><span>Lorem Ipsum</span></a></li>
                 <li><a href='#!'><span>Lorem Ipsum</span></a></li>
                 <li><a href='#!'><span>Lorem Ipsum</span></a></li>
                 <li><a href='#!'><span>Lorem Ipsum</span></a></li>
              </ul>
           </li>
            <li class='has-sub'><a href='#'><span>Men's Shoes</span></a>
              <ul>
                 <li><a href='#!'><span>Lorem Ipsum</span></a></li>
                 <li><a href='#!'><span>Lorem Ipsum</span></a></li>
                 <li><a href='#!'><span>Lorem Ipsum</span></a></li>
                 <li><a href='#!'><span>Lorem Ipsum</span></a></li>
                 <li><a href='#!'><span>Lorem Ipsum</span></a></li>
                 <li><a href='#!'><span>Lorem Ipsum</span></a></li>
                 <li><a href='#!'><span>Lorem Ipsum</span></a></li>
                 <li><a href='#!'><span>Lorem Ipsum</span></a></li>
              </ul>
           </li>
           <li class='has-sub'><a href='#'><span>Women's Shoes</span></a>
              <ul>
                 <li><a href='#!'><span>Lorem Ipsum</span></a></li>
                 <li><a href='#!'><span>Lorem Ipsum</span></a></li>
                 <li><a href='#!'><span>Lorem Ipsum</span></a></li>
                 <li><a href='#!'><span>Lorem Ipsum</span></a></li>
              </ul>
           </li>
           <li class='has-sub'><a href='#'><span>Kids's Shoes</span></a>
              <ul>
                 <li><a href='#!'><span>Lorem Ipsum</span></a></li>
                 <li><a href='#!'><span>Lorem Ipsum</span></a></li>
                 <li><a href='#!'><span>Lorem Ipsum</span></a></li>
                 <li><a href='#!'><span>Lorem Ipsum</span></a></li>
                 <li><a href='#!'><span>Lorem Ipsum</span></a></li>
              </ul>
           </li>
           <li class='has-sub'><a href='#'><span>Shoe care & accessories</span></a>
              <ul>
                 <li><a href='#!'><span>Lorem Ipsum</span></a></li>
                 <li><a href='#!'><span>Lorem Ipsum</span></a></li>
                 <li><a href='#!'><span>Lorem Ipsum</span></a></li>
              </ul>
           </li>
           <li><a href='#'><span>Formal Shoes</span></a></li>
           <li><a href='#'><span>Party Wear Shoes</span></a></li>
           <li><a href='#'><span>Leather Shoes</span></a></li>
           <li><a href='#'><span>International Shoes Store</span></a></li>
        </ul>
        </div>
        
     </div>
     
     <div class="col-lg-9 col-md-9 col-sm-8 col-xs-12">
         <div class="row" align="center">
            <div class="categories-right">All Products</div>
                <div class="content-right">
                    <div class="col-md-4 col-sm-6 col-xs-12">
                        <div class="content-right-product">
                            <div><img src="images/1.jpg" class="img-responsive" alt="Top Shoes"></div>
                            <div class="content-right-product-h4">Lorem Ipsum</div>
                            <div class="content-right-product-p">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
                            <div class="content-right-product-amount"><i class="fa fa-inr" style="color:#df001a;"></i> 1500.00</div>
                            <div class="cart" align="center"><a href="" class="btn">Add to Cart</a></div>
                        </div>
                    </div>
                    <div class="col-md-4 col-sm-6 col-xs-12">
                        <div class="content-right-product">
                            <div><img src="images/2.jpg" class="img-responsive" alt="Top Shoes"></div>
                            <div class="content-right-product-h4">Lorem Ipsum</div>
                            <div class="content-right-product-p">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
                            <div class="content-right-product-amount"><i class="fa fa-inr" style="color:#df001a;"></i> 1500.00</div>
                            <div class="cart" align="center"><a href="" class="btn">Add to Cart</a></div>
                        </div>
                    </div>
                    <div class="col-md-4 col-sm-6 col-xs-12">
                        <div class="content-right-product">
                            <div><img src="images/3.jpg" class="img-responsive" alt="Top Shoes"></div>
                            <div class="content-right-product-h4">Lorem Ipsum</div>
                            <div class="content-right-product-p">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
                            <div class="content-right-product-amount"><i class="fa fa-inr" style="color:#df001a;"></i> 1500.00</div>
                            <div class="cart" align="center"><a href="" class="btn">Add to Cart</a></div>
                        </div>
                    </div>
                    <div class="col-md-4 col-sm-6 col-xs-12">
                        <div class="content-right-product">
                            <div><img src="images/4.jpg" class="img-responsive" alt="Top Shoes"></div>
                            <div class="content-right-product-h4">Lorem Ipsum</div>
                            <div class="content-right-product-p">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
                            <div class="content-right-product-amount"><i class="fa fa-inr" style="color:#df001a;"></i> 1500.00</div>
                            <div class="cart" align="center"><a href="" class="btn">Add to Cart</a></div>
                        </div>
                    </div>
                    <div class="col-md-4 col-sm-6 col-xs-12">
                        <div class="content-right-product">
                            <div><img src="images/5.jpg" class="img-responsive" alt="Top Shoes"></div>
                            <div class="content-right-product-h4">Lorem Ipsum</div>
                            <div class="content-right-product-p">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
                            <div class="content-right-product-amount"><i class="fa fa-inr" style="color:#df001a;"></i> 1500.00</div>
                            <div class="cart" align="center"><a href="" class="btn">Add to Cart</a></div>
                        </div>
                    </div>
                    <div class="col-md-4 col-sm-6 col-xs-12">
                        <div class="content-right-product">
                            <div><img src="images/6.jpg" class="img-responsive" alt="Top Shoes"></div>
                            <div class="content-right-product-h4">Lorem Ipsum</div>
                            <div class="content-right-product-p">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
                            <div class="content-right-product-amount"><i class="fa fa-inr" style="color:#df001a;"></i> 1500.00</div>
                            <div class="cart" align="center"><a href="" class="btn">Add to Cart</a></div>
                        </div>
                    </div>
                 </div>
            </div>
      </div>
</div>
  CSS Code
.categories{ font-size:24px; background:#EEE; padding:8px 15px; border:1px solid #df001a; margin-top:15px;}
#content_left_menu,
#content_left_menu a,
#content_left_menu li,
#content_left_menu ul {
    margin: 0;
    padding: 0;
    border: 0;
    list-style: none;
    font-weight: 400;
    text-decoration: none;
    line-height: 1;
    font-family: Arial, Helvetica, sans-serif;
    font-variant: small-caps!important;
    position: relative
}
#content_left_menu a { line-height: 1.3}
#content_left_menu>ul>li>a {
    padding-right: 40px;
    font-weight: 700;
    display: block;
    background: #df001a;
    color: #fff;
    border-bottom: 1px solid #590000
}
#content_left_menu>ul>li>a>span { background: #bb0016;padding: 12px 15px; display: block; font-size: 16px; font-weight: 300;}
#content_left_menu>ul>li>a:hover {text-decoration: none}
#content_left_menu>ul>li.active {border-bottom: none}
#content_left_menu>ul>li.active>a { color: #fff;}
#content_left_menu>ul>li.active>a span { background: #df001a;}
#content_left_menu span.cnt { position: absolute; top: 8px; right: 15px; padding: 0; margin: 0; background: 0 0}
#content_left_menu ul ul {display: none}
#content_left_menu ul ul li {border: 1px solid #e0e0e0; border-top: 0}
#content_left_menu ul ul a { padding: 10px; display: block;color: #ed1144; font-size: 13px}
#content_left_menu ul ul a:hover { color: #bd0e36;}
#content_left_menu ul ul li.odd {background: #f4f4f4;}
#content_left_menu ul ul li.even { background: #fff;}

.content-right{ margin:0px -15px;}
.categories-right{ 
font-variant:small-caps; font-size:23px; background:#EEE; 
margin:15px 15px 0px; padding:8px 15px; border:1px solid #df001a;
}
.content-right-product{ 
padding:0px 5px; margin:15px; float:left;
 -webkit-box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12), 0 3px 5px -1px rgba(0, 0, 0, 0.3) !important; 
 box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12), 0 3px 5px -1px rgba(0, 0, 0, 0.3) !important;
}
.content-right-product-h4{font-size:18px; font-weight:600; color:#000; padding:5px 15px; float:left; text-align:center !important;} 
.content-right-product-p{color:#333; line-height:26px; padding:5px 15px; float:left; text-align:center !important;}
.content-right-product-amount{color:#df001a !important; font-weight:bold; font-size:26px; padding:5px 15px 10px; clear:both; 
text-align:center !important;}
.cart{ margin:0px 27% 10px; clear:both; float:left;}
@media only screen and (min-width:600px) and (max-width:768px){.cart{ margin:0px 15% 10px;} }
  JavaScript Code
$( document ).ready(function() {
$(document).ready(function(){

$('#content_left_menu> ul > li ul').each(function(index, e){
  var count = $(e).find('li').length;
  var content = '<span class="cnt">' + count + '</span>';
  $(e).closest('li').children('a').append(content);
});
$('#content_left_menuul ul li:odd').addClass('odd');
$('#content_left_menuul ul li:even').addClass('even');
$('#content_left_menu> ul > li > a').click(function() {
  $('#content_left_menuli').removeClass('active');
  $(this).closest('li').addClass('active');	
  var checkElement = $(this).next();
  if((checkElement.is('ul')) && (checkElement.is(':visible'))) {
    $(this).closest('li').removeClass('active');
    checkElement.slideUp('normal');
  }
  if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
    $('#content_left_menuul ul:visible').slideUp('normal');
    checkElement.slideDown('normal');
  }
  if($(this).closest('li').find('ul').children().length == 0) {
    return true;
  } else {
    return false;	
  }		
});
});
});
 Step 6 : Footer
Responsive Website
  HTML Code
<div class="row footer">
	<div class="col-md-3 col-sm-6 col-xs-12">
    	<div class="footer-parts">
            <div class="footer-parts-h4">About Us</div>
            <div class="about-footer">Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
            Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</div>
        </div>
    </div>
    <div class="col-md-3 col-sm-6 col-xs-12">
    	<div class="footer-parts">
            <div class="footer-parts-h4">Extra Links</div>
            <ul>
                <li><a href="#">Blog</a></li>
                <li><a href="#">Careers</a></li>
                <li><a href="#">Terms &amp; Conditions</a></li>
            </ul>
        </div>
    </div>
    <div class="col-md-3 col-sm-6 col-xs-12">
    	<div class="footer-parts">
            <div class="footer-parts-h4">Extra Links</div>
            <ul>
                <li><a href="#">Privacy Policy</a></li>
                <li><a href="#">Contact</a></li>
                <li><a href="#">Diclimer</a></li>
            </ul>
        </div>
    </div>
    <div class="col-md-3 col-sm-6 col-xs-12">
    	<div class="footer-parts">
            <div class="footer-parts-h4">Social Links</div><br />
            <div style="padding-left:20px; font-size:22px;">
                <a href="https://www.facebook.com/freetimelearn/" target="_blank"><i class="fa fa-facebook fa_footer"></i></a> &nbsp; &nbsp;
                <a href="https://www.linkedin.com/in/free-time-learn-07598b143/" target="_blank"><i class="fa fa-linkedin fa_footer"></i></a> &nbsp; &nbsp;
                <a href="https://twitter.com/freetimelearn" target="_blank"><i class="fa fa-twitter fa_footer"></i></a> &nbsp; &nbsp;
                <a href="https://plus.google.com/101612697119159092378" target="_blank"><i class="fa fa-google-plus fa_footer"></i></a>
            </div>
            <div style="padding-left:20px; padding-top:15px; font-size:22px;">
                <div class="input-group">
                    <input type="text" class="form-control" placeholder="Subscribe Now">
                    <span class="input-group-btn">
                        <button type="button" class="btn btn_search"><i class="fa fa-search"></i></button>
                    </span>
                </div><br />
            </div>
        </div>
    </div>
    <div class="clearfix"></div>
    <div class="copyrights">
    	<div class="col-md-8 col-sm-8 col-xs-12">
            <div class="copyrights-left">
            &copy; 2018. All rights reserved by <a href="http://www.freetimelearning.com" target="_blank">Free Time Learn</a>.
            </div>
        </div>
        <div class="col-md-4 col-sm-4 col-xs-12">
            <div class="copyrights-right">
                Designed by <a href="http://www.freetimelearning.com" target="_blank">F T L</a>
            </div>
        </div>
    </div>
</div>
  CSS Code
.footer{background:#eb3d51;}
.footer-parts{padding:0px 10px;}
.fa_footer{ color:#FFF;}
.about-footer{ padding:10px 10px; color:#FFF; text-align:justify;}
.footer-parts-h4{ font-size:18px; padding:15px 10px 0px; color:#FFF;}
.footer-parts ul{list-style:none; padding:0px;}
.footer-parts ul li{list-style:none; font-size:12px; padding:5px; margin:5px 0px; font-weight:bold;}
.footer-parts ul li a{padding:8px 10px; margin:2px 0px; text-decoration:none; color:#FFF;}
.footer-parts ul li a:hover{color:#000;}
.copyrights{font-size:12px; background:#df001a; clear:both; padding:15px 30px; color:#FFF; float:left; width:100%; }
.copyrights-left{ list-style:none;}
.copyrights-left a{ color:#FFF; text-decoration:none;}
.copyrights-left a:hover{color:#CCC;}
.copyrights-right{ text-align:right;}
.copyrights-right a{ color:#FFF; text-decoration:none;}
.copyrights-right a:hover{color:#CCC;}
@media only screen and (min-width:320px) and (max-width:480px){.copyrights-right{ text-align:center;}}

We see you’re using an ad blocker.

Our website is made possible by displaying ads to our visitors.

Please help us continue to provide you with free. So please disabling your ad blocker.