Google News
logo
Bootstrap Educational Website Source Code
  Source Code
  Complete Website Source Code
  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">
<!-- Start Header -->
<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>
<!-- End Header -->


<!----- Start Slider (or) Banner ------>
<div class="row">
	<div class="slider">
    	<div class="slider-links">
            <a href="#!">TOP COURCES</a> &nbsp; &nbsp; <a href="#!">ADMISSIONS</a>
       </div>
    </div>
</div>
<!----- End Slider (or) Banner ------>
    
<!----- Start Content ------>
<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>
<!------ End Content ------->

<!------ Start Testimonials ------>
<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>
<!------ End Testimonials ------>


<!------ Start Footer ------->
<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>
<!------ End Footer ------->

</div>

<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
</body>
</html>
  CSS Code(style.css)
@charset "utf-8"; /****   Developed by http://www.freetimelearning.com/    *****/
/* CSS Document */
/* (#) means ID Based */
/* (.) means class Based */
*{
	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;} }

/********* Start Header Top ***********/
.main_header{border-top:7px solid #0066dd; background:#F2F2F2;}
/********* Start Header Bottom ***********/


/*********** Start Menu **********/
.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 Menu **********/

/****** Start Slier Part **********/
.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;}
/****** End Slier Part **********/

/****** Start Content **********/
.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;}
/****** Start Content **********/

/****** Start Testimonials *****/
.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;}
	}

/****** End Testimonials ********/

/****** Start Footer ********/
.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;}
/****** End Footer ********/