Google News
logo
Create A Bootstrap Tours and Travels Website
  Start Coding
 Step 1 : Basic HTML Structure
  HTML Code
<html>
<head>
<title>How To Create A Basic Bootstrap Tours and Travels 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">

   </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; margin:0px auto !important;}
.main{ margin:0px auto; 
	-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;
}
.p10_0{ padding:10px 0px;} .p20_0{ padding:20px 0px;}.p30_0{ padding:30px 0px;} 
.p40_0{ padding:40px 0px;} .p50_0{ padding:50px 0px;}
.clearfix{ clear:both;}
 Step 2 : Header
Responsive Website
  HTML Code
<div class="row header">
	<div class="col-md-3 col-sm-3 col-xs-12 logo">
    	<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"></div>
        	<div class="col-md-7 col-sm-12 col-xs-12" align="center">
                <div class="header-right-top pull-right">
                    <ul>
                        <li class="hidden-xs"><a href="#!"><i class="fa fa-list"></i>&nbsp; My Wishlist</a></li>
                         <li><a href="#!"><i class="fa fa-cart-plus"></i>&nbsp; My Cart : 2</a></li>
                        <li style="border-right:none;"><a href="#!"><i class="fa fa-unlock"></i>&nbsp; Sign In</a></li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="row">
            <nav class="navbar navbar-default header-right">
                <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">Free Time Learning</a>-->
                </div>
                <div id="navbarCollapse" class="collapse navbar-collapse navbar-right">
                <ul class="nav navbar-nav">
                    <li><a href="#!">Home</a></li>
                    <li><a href="#!">Holidays</a></li>
                    <li><a href="#!">Flights / Hotels / Cars</a></li>
                    <li><a href="#!">Holiday Packages</a></li>
                    <li><a href="#!">Gallery</a></li>
                    <li><a href="#!">Blog</a></li>
                </ul>
                </div>
            </nav>
        </div>
   </div>
</div>
  CSS Code
.header{padding:10px 0px; background:#4178CB;}
.header-right-top ul{list-style:none; margin:0px;}
.header-right-top ul li{list-style:none; font-family:arial; font-size:12px; padding:5px 0px; 
margin:10px 0px; float:left; font-weight:bold; border-right:1px solid #000; }
.header-right-top ul li a{ padding:7px 15px; border-radius:2px;
margin:2px 5px 5px; text-decoration:none; color:#000; background:#ffd200;}
.header-right-top ul li a:hover{background:#F0B604;}
.white{ color:#FFF; text-decoration:none;}
.white a{ color:#FFF; text-decoration:none;}
.white a:hover{ color:#CCC;}

.navbar-brand {
    float: left;
    height: 65px;
    padding: 5px 15px;
    font-size: 18px;
    line-height: 20px;
}
.navbar-default{ 
	border-radius:2px; 
	background:none; 
	margin-bottom:0px; 
	border:none !important;
}
.navbar-default ul{ padding:0px;}
.navbar-default .navbar-nav>li>a{ 
	color:#FFF;  
	font-size:14px;
	text-transform:uppercase;
	margin:0px 14px 0px; 
}
.navbar-default .navbar-nav>li>a:hover{color:#CCC;}
.navbar-default .navbar-collapse, .navbar-default .navbar-form{
    border-color: #e7e7e7;
}
@media only screen and (min-width:320px) and (max-width:480px){ 
.header-right-top ul li{    margin: 10px -5px 0px 5px; border-right:none !important;}
}
@media only screen and (min-width:600px) and (max-width:768px){
.logo{ padding-top:25px;}
.navbar-default .navbar-nav>li>a{ font-size:11px; padding:0px; margin: 10px 5px;}
}
@media only screen and (min-width:1025px) and (max-width:1280px){
	.logo{ padding-top:5px;}
	.navbar-default .navbar-nav>li>a{font-size:13px; padding:0px; margin:5px 20px 0px;}
   }
@media only screen and (min-width:960px) and (max-width:1024px){
	.logo{ padding-top:15px;}
	.navbar-default .navbar-nav>li>a{font-size:11px; padding:0px; margin:5px 15px 0px;}
   }
 Step 3 : Slider
Responsive Website
  HTML Code
<div class="row">
	<div class="slider">
        <div class="col-md-6 col-sm-6 col-xs-12">
            <div class="slider-left-h2">Lorem Ipsum is simply dummy text of the printing...</div>
            <div class="slider-left-p">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, when an unknown printer 
            took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries.
            </div>
        </div>
        <div class="col-md-6 col-sm-6 col-xs-12">
        	<div class="slider-right">
                <div class="slider-right-h3">Contact Us Today</div>
                <div class="slider-right-p">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
                <div align="center">
				<form action="" method="post">
                	<div class="row">
                    	<div class="col-md-6 col-sm-6 col-xs-12">
                        	<input name="" type="text" class="form-control" placeholder="First Name">
                        </div>
                        <div class="col-md-6 col-sm-6 col-xs-12">
                        	<input name="" type="text" class="form-control" placeholder="Last Name">
                        </div>
                        <div class="col-md-6 col-sm-6 col-xs-12">
                        	<input name="" type="email" class="form-control" placeholder="Email ID">
                        </div>
                        <div class="col-md-6 col-sm-6 col-xs-12">
                        	<input name="" type="text" class="form-control" placeholder="Mobile">
                        </div>
                        <div class="col-md-12 col-sm-12 col-xs-12">
                        	<textarea name="" rows="4" class="form-control" placeholder="Message"></textarea>
                    		<button type="button" class="slider-right-btn">Send Message</button>
                        </div>
                    </div>
                </form>
                </div>
            </div>
        </div>
    </div>
</div>
  CSS Code
.slider{ float:left; background:url(../images/slider.jpg) repeat; width:100%;}
.slider-left-h2{ color:#FFF; font-size:42px; padding:150px 50px 10px;}
.slider-left-p{ color:#FFF; line-height:26px; font-size:15px; padding:10px 50px;}
.slider-right{ padding:20px; background-color: rgba(255,204,34,0.5); 
margin:70px 50px 50px; border-radius:3px;}
.slider-right-h3{ color:#FFF; font-size:40px; font-weight:bold; padding:10px 0px 5px; 
text-align:center; text-transform:uppercase;}
.slider-right-p{ color:#FFF; font-size:16px; padding:5px 20px 15px; text-transform:uppercase; text-align:center;}
.form-control{margin:7px auto; background:#FFF; color:#000; border-radius:2px;}
.slider-right-btn{ width:100%; padding:10px 30px; margin-left:-5px; margin-top:7px; color:#000; background:#ffd200;
 border-radius:2px; font-size:15px; border:none; font-weight:600; cursor:pointer; text-transform:uppercase; }
 .slider-right-btn:hover{ background:#F0B604;}
 
@media only screen and (min-width:320px) and (max-width:480px){ 
	.slider-left-h2 {font-size: 20px; padding: 30px 10px 10px; }
	.slider-left-p{ text-align:justify; padding:10px;} 
	.slider-right { padding:10px; background-color: rgba(255,204,34,0.5);  margin: 30px 10px 20px;}
	.slider-right-h3{ font-size:20px;}
	.slider-right-p{ text-align:justify; padding:10px; font-size:15px;}
	}
@media only screen and (min-width:481px) and (max-width:780px){ 
	.slider-left-h2 {font-size: 20px; padding: 60px 10px 10px; }
	.slider-left-p{ text-align:justify; padding:10px;} 
	.slider-right { padding:10px; background-color: rgba(255,204,34,0.5);  margin: 15px 10px;}
	.slider-right-h3{ font-size:20px;}
	.slider-right-p{ text-align:justify; padding:10px; font-size:14px;}
	}
@media only screen and (min-width:960px) and (max-width:1024px){
	.slider-left-h2{ margin:50px 10px 10px; padding:50px 10px 15px; font-size: 26px; } 
	.slider-right-h3 { font-size: 26px;}
	.slider-left-p{ text-align:justify; padding:10px;}
	.slider-right {margin: 25px 10px;}
	}
 Step 4 : Content Part 1
Responsive Website
  HTML Code
<div class="row">

	<div class="content-h2">WHY BOOK WITH US</div>
    <div class="content-h4">Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
    Lorem Ipsum has been the industry's standard dummy text.</div>
    
    <div class="col-md-4 col-sm-4 col-xs-12">
    	<div class="content-parts">
        	<div class="content-parts-icons"><i class="fa fa-inr" style="padding-top:5px;"></i></div>
            <div class="content-parts-h3">Best Price Guarantee</div>
            <div class="content-parts-p">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
        </div>
    </div>
    <div class="col-md-4 col-sm-4 col-xs-12">
    	<div class="content-parts">
        	<div class="content-parts-icons"><i class="fa fa-book"></i></div>
            <div class="content-parts-h3">Easy Booking</div>
            <div class="content-parts-p">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
        </div>
    </div>
    <div class="col-md-4 col-sm-4 col-xs-12">
    	<div class="content-parts">
        	<div class="content-parts-icons"><i class="fa fa-support"></i></div>
            <div class="content-parts-h3">24/7 Customer Care</div>
            <div class="content-parts-p">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
        </div>
    </div>
        
</div>
  CSS Code
.content-h2{ color:#000; padding:50px 0px 15px; text-align:center; font-size:40px; font-weight:600;}
.content-h4{ color:#F0B604; padding:5px 20px 50px; line-height:27px; text-align:center; font-size:17px; font-weight:600;}
.content-parts{padding:15px 16px; margin:10px 25px 40px; background:#EEE;}
.content-parts-icons{ font-size:42px; width:65px; height:62px; padding:10px; border-radius:100px; 
background:#FC0; margin-top:-50px !important; color:#000; margin:10px auto; text-align:center;}
.content-parts-h3{ font-size:22px; padding:15px 0px; text-align:center; 
color:#000; font-weight:600; text-transform:uppercase;}
.content-parts-p{ color:#333; padding:15px; text-align:center; font-size:15px; line-height:26px;}

@media only screen and (min-width:320px) and (max-width:480px){ 
.content-h2{font-size:25px;}
}
@media only screen and (min-width:481px) and (max-width:780px){
	.content-parts{ padding:10px 10px 30px;}
	.content-parts-h3{font-size:16px; } 
	.content-parts-p{ padding:15px 5px;}
}
 Step 5 : Content Part 2
Responsive Website
  HTML Code
<div class="row content-part-2">
	<div class="content-part-2-h3">New Destinations</div>
    <div class="border-bottom"></div>
    <div class="clearfix"></div>
	<div class="col-md-3 col-sm-4 col-xs-12">
    	<div class="content-part-2-sub">
            <div align="center"><img src="images/1.jpg" class="img-responsive" alt="Tours And Travels"></div>
            <div class="content-part-2-sub-h4">Lorem Ipsum</div>
            <div class="content-part-2-sub-p">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
            <div class="content-part-2-sub-price">From <span class="fa fa-inr"></span>13500.00/-</div>
            <div><a href="#!" class="content-part-2-sub-btn btn-block">Book Now</a></div>
        </div>
    </div>
    <div class="col-md-3 col-sm-4 col-xs-12">
    	<div class="content-part-2-sub">
            <div align="center"><img src="images/2.jpg" class="img-responsive" alt="Tours And Travels"></div>
            <div class="content-part-2-sub-h4">Lorem Ipsum</div>
            <div class="content-part-2-sub-p">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
            <div class="content-part-2-sub-price">From <span class="fa fa-inr"></span>20000.00/-</div>
            <div><a href="#!" class="content-part-2-sub-btn btn-block">Book Now</a></div>
        </div>
    </div>
    <div class="col-md-3 col-sm-4 col-xs-12">
    	<div class="content-part-2-sub">
            <div align="center"><img src="images/3.jpg" class="img-responsive" alt="Tours And Travels"></div>
            <div class="content-part-2-sub-h4">Lorem Ipsum</div>
            <div class="content-part-2-sub-p">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
            <div class="content-part-2-sub-price">From <span class="fa fa-inr"></span>85000.00/-</div>
            <div><a href="#!" class="content-part-2-sub-btn btn-block">Book Now</a></div>
        </div>
    </div>
    <div class="col-md-3 col-sm-4 col-xs-12">
    	<div class="content-part-2-sub">
            <div align="center"><img src="images/4.jpg" class="img-responsive" alt="Tours And Travels"></div>
            <div class="content-part-2-sub-h4">Lorem Ipsum</div>
            <div class="content-part-2-sub-p">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
            <div class="content-part-2-sub-price">From <span class="fa fa-inr"></span>125500.00/-</div>
            <div><a href="#!" class="content-part-2-sub-btn btn-block">Book Now</a></div>
        </div>
    </div>
    <div class="col-md-3 col-sm-4 col-xs-12">
    	<div class="content-part-2-sub">
            <div align="center"><img src="images/5.jpg" class="img-responsive" alt="Tours And Travels"></div>
            <div class="content-part-2-sub-h4">Lorem Ipsum</div>
            <div class="content-part-2-sub-p">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
            <div class="content-part-2-sub-price">From <span class="fa fa-inr"></span>180000.00/-</div>
            <div><a href="#!" class="content-part-2-sub-btn btn-block">Book Now</a></div>
        </div>
    </div>
    <div class="col-md-3 col-sm-4 col-xs-12">
    	<div class="content-part-2-sub">
            <div align="center"><img src="images/6.jpg" class="img-responsive" alt="Tours And Travels"></div>
            <div class="content-part-2-sub-h4">Lorem Ipsum</div>
            <div class="content-part-2-sub-p">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
            <div class="content-part-2-sub-price">From <span class="fa fa-inr"></span>95000.00/-</div>
            <div><a href="#!" class="content-part-2-sub-btn btn-block">Book Now</a></div>
        </div>
    </div>
    <div class="col-md-3 col-sm-4 col-xs-12">
    	<div class="content-part-2-sub">
            <div align="center"><img src="images/7.jpg" class="img-responsive" alt="Tours And Travels"></div>
            <div class="content-part-2-sub-h4">Lorem Ipsum</div>
            <div class="content-part-2-sub-p">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
            <div class="content-part-2-sub-price">From <span class="fa fa-inr"></span>150000.00/-</div>
            <div><a href="#!" class="content-part-2-sub-btn btn-block">Book Now</a></div>
        </div>
    </div>
    <div class="col-md-3 col-sm-4 col-xs-12">
    	<div class="content-part-2-sub">
            <div align="center"><img src="images/8.jpg" class="img-responsive" alt="Tours And Travels"></div>
            <div class="content-part-2-sub-h4">Lorem Ipsum</div>
            <div class="content-part-2-sub-p">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
            <div class="content-part-2-sub-price">From <span class="fa fa-inr"></span>250000.00/-</div>
            <div><a href="#!" class="content-part-2-sub-btn btn-block">Book Now</a></div>
        </div>
    </div>
</div>
  CSS Code
.content-part-2{ background:#F5F5F5; margin:20px auto;}
.content-part-2-h3{ font-size:30px; color:#000; text-transform:uppercase; padding:30px 0px 5px; text-align:center;}
.border-bottom{border-bottom:3px solid #FC0; width:150px; margin:0px auto 30px; }
.content-part-2-sub{margin:10px 30px 30px; padding:0px 0px 10px; background:#FFF;}
.content-part-2-sub-h4{ font-size:17px; font-weight:600; padding:10px 10px 0px; color:#06C;}
.content-part-2-sub-p{ color:#333; font-size:14px; padding:5px 10px; line-height:26px;}
.content-part-2-sub-price{ font-size:20px; font-weight:bold; color:#F0B604; padding:5px 10px 10px;}
.content-part-2-sub-btn{ background:#0474C6; color:#FFF; text-decoration:none; text-align:center; padding:6px 20px; 
 font-size:15px; border-radius:2px; border:none; margin:0px 5%; width:90%;}
.content-part-2-sub-btn:hover{ background:#004566; color:#FFF; text-decoration:none;}
@media only screen and (min-width:320px) and (max-width:480px){ 
	img{ width:100%;} 
	.content-part-2-h3{ font-size:22px; }
	.content-part-2-sub-h4{ font-size:16px; padding:5px 10px 0px;}
	.content-part-2-sub-p{ font-size:13px; line-height:20px; text-align:justify;}
	.content-part-2-sub-price{font-size:15px;}
	.content-part-2-sub-btn{padding:5px 0px; font-size:13px; margin:0px 5%; width:90%;}
}
@media only screen and (min-width:481px) and (max-width:780px){
	.content-part-2-sub-h4{ font-size:14px; padding:5px 10px 0px;}
	.content-part-2-sub-p{ font-size:11.5px; line-height:20px; text-align:justify;}
	.content-part-2-sub-price{font-size:14px;}
	.content-part-2-sub-btn{padding:5px 0px; font-size:13px; margin:0px 5%; width:90%;}
	}
 Step 6 : Content Part 3
Responsive Website
  HTML Code
<div class="row">
	<div class="content-part-2-h3">Hotels &amp; Restaurants</div>
    <div class="border-bottom"></div>
    
	<div class="col-md-6 col-sm-12 col-xs-12">
    	<div class="row p20_0">
        	<div class="col-md-6 col-sm-6 col-xs-12">
            	<img src="images/hotel-1.jpg" class="img-responsive" alt="Tours And Travels">
            </div>
            <div class="col-md-6 col-sm-6 col-xs-12">
            	<div class="content-part-3-right-h4">Lorem Ipsum ( Top Hotels )</div>
                <div class="content-part-3-right-p">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
                <div class="content-part-3-right-price">1 Day : <span class="fa fa-inr"></span>15000.00/-</div>
                <div><a href="#!" class="content-part-3-right-btn">Book Now</a></div>
            </div>
        </div>
    </div>
    <div class="col-md-6 col-sm-12 col-xs-12">
        <div class="row p20_0">
            <div class="col-md-6 col-sm-6 col-xs-12">
                <img src="images/hotel-2.jpg" class="img-responsive" alt="Tours And Travels">
            </div>
            <div class="col-md-6 col-sm-6 col-xs-12">
                <div class="content-part-3-right-h4">Lorem Ipsum ( Top Hotels )</div>
                <div class="content-part-3-right-p">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
                <div class="content-part-3-right-price">1 Day : <span class="fa fa-inr"></span>14500.00/-</div>
                <div><a href="#!" class="content-part-3-right-btn">Book Now</a></div>
            </div>
        </div>
    </div>
    <div class="col-md-6 col-sm-12 col-xs-12">
        <div class="row p20_0">
            <div class="col-md-6 col-sm-6 col-xs-12">
                <img src="images/hotel-3.jpg" class="img-responsive" alt="Tours And Travels">
            </div>
            <div class="col-md-6 col-sm-6 col-xs-12">
                <div class="content-part-3-right-h4">Lorem Ipsum ( Top Hotels )</div>
                <div class="content-part-3-right-p">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
                <div class="content-part-3-right-price">1 Day : <span class="fa fa-inr"></span>13000.00/-</div>
                <div><a href="#!" class="content-part-3-right-btn">Book Now</a></div>
            </div>
        </div>
    </div>
    <div class="col-md-6 col-sm-12 col-xs-12">
        <div class="row p20_0">
            <div class="col-md-6 col-sm-6 col-xs-12">
                <img src="images/hotel-4.jpg" class="img-responsive" alt="Tours And Travels">
            </div>
            <div class="col-md-6 col-sm-6 col-xs-12">
                <div class="content-part-3-right-h4">Lorem Ipsum ( Top Hotels )</div>
                <div class="content-part-3-right-p">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
                <div class="content-part-3-right-price">1 Day : <span class="fa fa-inr"></span>12500.00/-</div>
                <div><a href="#!" class="content-part-3-right-btn">Book Now</a></div>
            </div>
        </div>
    </div>
</div>
  CSS Code
.content-part-3-right-h4{ font-size:17px; font-weight:600; padding:0px 10px; color:#06C;}
.content-part-3-right-p{color:#333; font-size:14px; padding:5px 10px; line-height:26px;}
.content-part-3-right-price{font-size:20px; font-weight:bold; color:#F0B604; padding:7px 10px 15px;}
.content-part-3-right-btn{ background:#0474C6; color:#FFF; text-decoration:none; text-align:center; padding:7px 25px; 
 font-size:15px; border-radius:2px; border:none; margin:5px 10px;}
.content-part-3-right-btn:hover{ background:#004566; text-decoration:none; color:#FFF;}
@media only screen and (min-width:320px) and (max-width:480px){
	.content-part-3-right-h4{ font-size:17px; padding:10px 0px 5px;}
	.content-part-3-right-p{ padding:5px 0px;}
	.content-part-3-right-price{ padding:5px 0px 15px;}
	.content-part-3-right-btn{ margin:5px 0px;}
	}
 Step 7 : Footer
Responsive Website
  HTML Code
<div class="row footer">
	<div class="col-md-4 col-sm-4 col-xs-12">
    	<div class="footer-parts">
        	<div class="footer-parts-h4">About Company</div>
            <div class="footer-parts-p">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, when an unknown printer 
            took a galley of type and scrambled it to make a type specimen book.</div>
        </div>
    </div>
    <div class="col-md-3 col-sm-3 col-xs-12">
    	<div class="footer-parts">
            <div class="footer-parts-h4">Our Liks</div>
            <ul>
                <li><a href="#!">About Us</a></li>
                <li><a href="#!">Contact Us</a></li>
                <li><a href="#!">Blog</a></li>
                <li><a href="#!">Terms &amp; Conditions</a></li>
                <li><a href="#!">Privacy Policy</a></li>
            </ul>
        </div>
    </div>
    <div class="col-md-5 col-sm-5 col-xs-12">
    	<div class="footer-parts">
            <div class="footer-parts-h4">Subscribe &amp; Social Links</div>
            <form action="" method="post">
                <input type="text" class="form" placeholder="example@mail.com">
                <button type="submit" name="submit" class="subscribe">Subscribe</button>
            </form>
            
            <div class="social-links">
                <ul>
                    <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-linkedin"></i></a></li>
                    <li><a href="#!"><i class="fa fa-google-plus"></i></a></li>
                    <li><a href="#!"><i class="fa fa-youtube"></i></a></li>
                </ul>
            </div>
        </div>
    </div>
</div>
<div class="clearfix"></div>
<div class="row footer-bottom">
	<div class="white">
    	&copy; <script language="javascript" type="text/javascript">document.write(new Date().getFullYear());</script>.
 		All rights reserved by <a href="http://www.freetimelearning.com/" target="_blank">Free Time Learn</a>.
    </div>
</div>
  CSS Code
.footer{ background:#4178cb; padding:20px 0px; margin-top:50px;}
.footer-parts{ padding:0px 25px;}
.footer-parts-h4{ color:#FFF; padding:10px 0px; font-size:18px;}
.footer-parts-p{ color:#FFF; font-size:14px; padding:5px 0px; line-height:26px; text-align:justify;}
.footer-parts ul{ list-style:none; padding:0px;}
.footer-parts ul li{ padding:0px; text-transform:none; margin-top:-10px; margin-bottom:20px;}
.footer-parts ul li a{ color:#FFF; padding:6px 0px; text-decoration:none;}
.footer-parts ul li a:hover{ color:#BBB;}
.form{ border-radius:2px; padding:8px 10px; color:#000; font-size:16px; margin:10px auto; border:none; }
.subscribe{ padding:8px 15px; background:#ffd200; border-radius:2px; cursor:pointer; color:#000;
font-size:16px; margin-left:-6px; border:none;}
.subscribe:hover{background:#F0B604;}

.social-links{ list-style:none; margin:10px 0px;}
.social-links ul{ list-style:none; padding:0px 0px 0px 0px;}
.social-links ul li{ padding:30px 10px 10px; text-transform:none; float:left; margin-top:-10px; margin-bottom:20px;}
.social-links ul li a{ color:#FFF; padding:6px 15px 6px 0px; font-size:20px; text-decoration:none;}
.social-links ul li a:hover{ color:#BBB;}
.footer-bottom{background:#3264b0; color:#FFF; text-align:center; font-size:12px; 
font-weight:bold; padding:15px 0px !important;}
@media only screen and (min-width:320px) and (max-width:370px){
	.form{ width:190px; padding:6px 10px;}
	.subscribe{ padding:6px 5px; background:#ffd200; border-radius:2px; cursor:pointer; color:#000;
font-size:16px; margin-left:-70px; border:none;}
	}
@media only screen and (min-width:371px) and (max-width:480px){
	.form{ width:230px; padding:6px 10px;}
	.subscribe{ padding:6px 5px; background:#ffd200; border-radius:2px; cursor:pointer; color:#000;
font-size:16px; margin-left:-70px; border:none;}
	.social-links ul li{ padding:30px 7px 10px;}
	.social-links ul li a{ color:#FFF; padding:6px 10px 6px 0px; font-size:17px;}
	}
@media only screen and (min-width:481px) and (max-width:780px){
	.subscribe{ padding:8px 5px; background:#ffd200; border-radius:2px; cursor:pointer; color:#000;
font-size:16px; margin-left:0px; border:none;}
	.social-links ul li{ padding:30px 10px 10px;}
	.social-links ul li a{ color:#FFF; padding:6px 10px 6px 0px; font-size:17px;}
	}