Reference Websites
Create A Bootstrap Educational Website
  Start Coding
 Step 1 : Basic HTML Structure
  HTML Code
<html>
<head>
<title>How To Create A Basic Bootstrap Educational Website</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 id="wrapper">

</div>

</body>
</html>
  CSS Code
*{
	margin-left:auto;
	margin-right:auto;
}
.row{ margin:0px;}
body{
	font-family:Arial, Helvetica, sans-serif;
	background:#FFF;
	margin:0px;
	}
.clearfix{ clear:both;}
#wrapper{ 
	width:1022px; 
	margin:0px auto; 
	background:#FFF;
	border:1px solid #CCC;
}
.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">
	<div class="main_header">
    <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"><img src="images/logo.png" width="231" height="61"></a>
    </div>
    <div id="navbarCollapse" class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
        <li><a href="#!">Home</a></li>
        <li><a href="#!">About Us</a></li>
        <li><a href="#!">Cources</a></li>
        <li><a href="#!">Exams</a></li>
        <li><a href="#!">Notifications</a></li>
        <li><a href="#!">Gallery</a></li>
        <li><a href="#!">Contact Us</a></li>
      </ul>
    </div>
    </nav>
    </div>
</div>
  CSS Code
.main_header{border-top:7px solid #0066dd; background:#F2F2F2;}

.navbar-brand {
    float: left;
    height: 65px;
    padding: 5px 15px;
    font-size: 18px;
    line-height: 20px;
}
.navbar-default{ 
	border-radius:2px; 
	background:#F2F2F2; 
	margin-bottom:0px; 
}
.navbar-default ul{ padding:20px 0px 5px;}
.navbar-default .navbar-nav>li>a{ 
	color:#000; 
	text-align:center; 
	padding:7px 23px; 
	font-size:14px; 
	font-weight:600;
}
.navbar-default .navbar-nav>li>a:hover{ color:#0099da;}
@media only screen and (min-width:600px) and (max-width:768px){
	.navbar-default .navbar-nav>li>a{padding:7px 5px; }
	}
/*********** End Header **********/
 Step 3 : Slider
Responsive Website
  HTML Code
<div class="row">
	<div class="slider">
    	<div class="slider-links">
            <a href="#!">TOP COURCES</a> &nbsp; &nbsp; <a href="#!">ADMISSIONS</a>
       </div>
    </div>
</div>
  CSS Code
.slider{background:url(../images/slider-bg.jpg); height:293px;}
.slider-links{ padding:145px 20px 50px;}
.slider-links a{font-size:26px; padding:0px 20px; text-decoration:none; color:#FFF; font-weight:600;}
.slider-links a:hover{ color:#000;}
 Step 4 : Content
Responsive Website
  HTML Code
<div class="row m10_0">
     <div class="content-header">Welcome To (<a href="#!">College or School Name</a>)</div>
     <div class="clearfix"></div>
     <div class="col-md-6 col-sm-6 col-xs-12">
   	   <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.</p>

	   <p>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, but also the leap into electronic typesetting, remaining essentially unchanged. It was 
        popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages.</p>
     </div>
     <div class="col-md-6 col-sm-6 col-xs-12" align="center">
     	<img src="images/img.jpg" class="img-responsive" alt="Education Website">
     </div>
</div>
<div class="clearfix"></div>
<div class="row">
	<div class="col-md-4 col-sm-4 col-xs-12">
    	<div class="content-bottom-bg">
    	<img src="images/img-2.jpg" class="img-responsive" alt="Students">
        	<div class="content-bottom-bg-header">Lorem Ipsum</div>
            <div class="content-bottom-bg-p">
            Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
            Lorem Ipsum has been the industry's standard.
        	</div>
        </div>
    </div>
    <div class="col-md-4 col-sm-4 col-xs-12">
    	<div class="content-bottom-bg">
    	<img src="images/img-3.jpg" class="img-responsive" alt="Students">
        	<div class="content-bottom-bg-header">Lorem Ipsum</div>
            <div class="content-bottom-bg-p">
            Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
            Lorem Ipsum has been the industry's standard.
        	</div>
        </div>
    </div>
    <div class="col-md-4 col-sm-4 col-xs-12">
    	<div class="content-bottom-bg">
    	<img src="images/img-4.jpg" class="img-responsive" alt="Students">
        	<div class="content-bottom-bg-header">Lorem Ipsum</div>
            <div class="content-bottom-bg-p">
            Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
            Lorem Ipsum has been the industry's standard.
        	</div>
        </div>
    </div>
</div>
  CSS Code
.content-header{color:#000; font-size:26px; text-align:center; padding:25px 10px 15px;}
.content-header a{ color:#0099dd; text-decoration:none;}
.content-header a:hover{ color:#069;}
p{ line-height:26px; color:#000; font-size:15px; text-align:justify;}
.content-bottom-bg{ background:#ebebeb; padding:0px 0px 20px; margin:20px 5px 20px;}
.content-bottom-bg-header{ font-size:18px; padding:0px 10px 15px;}
.content-bottom-bg-p{ line-height:24px; padding:0px 10px;}
 Step 5 : Testimonials
Responsive Website
  HTML Code
<div class="row">
	<div class="testimonials">
        <div class="testimonials-h4">
            “ when an  unknown  printer took  a galley  of type and scrambled it to  make a type specimen ”<br /><br />
            <a href="#!">Free Time Learn</a>
        </div>
    </div>
</div>
  CSS Code
.testimonials{background:url(../images/testimonials-bg.jpg); height:309px;}
.testimonials-h4{ font-size:26px; line-height:46px; padding:80px 100px; color:#FFF; text-align:center;}
.testimonials a{ color:#CCC; font-size:18px; padding:20px 0px; text-align:center; text-decoration:none;}
.testimonials a:hover{ color:#FFF;}
@media only screen and (min-width:320px) and (max-width:480px){
	.testimonials-h4{ font-size:22px; padding:40px 20px 20px;}
	.testimonials a{ color:#CCC; font-size:16px; padding:20px 0px;}
	}
 Step 6 : Footer
Responsive Website
  HTML Code
<div class="row footer">
    <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
    	<div class="footer-h4">Get In Touch</div>
        <ul>
            <li><a href="#"><i class="fa fa-phone"></i>&nbsp; +91-9963XXXX68</a></li>
            <li><a href="mailto:info@freetimelearning.com"><i class="fa fa-envelope"></i>&nbsp; info@freetimelearning.com</a></li>
        </ul>
    </div>
    <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
    	<div class="footer-h4">Extra Links</div>
    	<ul>
            <li><a href="#">Blog</a></li>
            <li><a href="#">Careers</a></li>
        </ul>
    </div>
    <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
    	<div class="footer-h4">Social Links</div><br />
        <div style="padding-left:20px; font-size:26px;">
            <a href="https://www.facebook.com/freetimelearn/" target="_blank"><i class="fa fa-facebook-square"></i></a> &nbsp; &nbsp;
            <a href="https://www.linkedin.com/in/free-time-learn-07598b143/" target="_blank"><i class="fa fa-linkedin-square"></i></a> &nbsp; &nbsp;
            <a href="https://twitter.com/freetimelearn" target="_blank"><i class="fa fa-twitter-square"></i></a> &nbsp; &nbsp;
            <a href="https://plus.google.com/101612697119159092378" target="_blank"><i class="fa fa-google-plus-square"></i></a>
        </div>
    </div>    
    <div class="clearfix"></div>
    <div class="row copyrights">
    	<div class="col-md-9 col-sm-9 col-xs-12">
        	&copy; Copy <script language="javascript" type="text/javascript">document.write(new Date().getFullYear());</script>.
             All rights reserved by  Free Time Learning &nbsp; <a href="http://www.freetimelearning.com" class="footer-link" target="_blank">www.freetimelearning.com</a>
        </div>
        <div class="col-md-3 col-sm-3 col-xs-12" align="right">
        	Designed By  -  <a href="http://www.freetimelearning.com" class="footer-link" target="_blank">F T L</a>
        </div>
    </div>
    
</div>
  CSS Code
.footer{background:#CCC;}
.footer-h4{ font-size:18px; padding:15px 10px 0px;}
.footer ul{list-style:none; padding:0px;}
.footer ul li{list-style:none; font-size:12px; padding:5px; margin:5px 0px; font-weight:bold;}
.footer ul li a{padding:8px 10px; margin:2px 0px; text-decoration:none; color:#000;}
.footer ul li a:hover{color:#FFF;}
.copyrights{font-size:12px; background:#0099dd; padding:15px 10px; color:#FFF; }
.copyrights a{ color:#FFF; text-decoration:none;}
.copyrights a:hover{color:#CCC;}