Reference Websites
Create A Bootstrap Hospital Website
  Start Coding
 Step 1 : Basic HTML Structure
  HTML Code
<html>
<head>
<title>How To Create A Basic Bootstrap Hospital 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 class="container-fluid">
   <div class="main_shadow">

   </div>
</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;
	}
.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;}
 Step 2 : Header
Responsive Website
  HTML Code
<div class="row main_header">
	<div class="col-md-2 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-10 col-sm-9 col-xs-12">
    	<div class="row hidden-xs">
        	<div class="col-md-6"></div>
            <div class="col-md-6 col-sm-12 col-xs-12">
            	<div class="row">
                <div class="header-top" align="center">
                    <div class="col-md-6 col-sm-6 col-xs-12" style="margin-bottom:10px;">
                    <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 class="col-md-6 col-sm-6 col-xs-12">
                    	<div class="input-group">
                            <input type="text" class="form-control" placeholder="Search Here">
                            <span class="input-group-btn">
                                <button type="button" class="btn btn-primary"><i class="fa fa-search"></i></button>
                            </span>
                        </div>
                    </div>
                </div>
                </div>
            </div>
        </div>
        <div class="clearfix"></div>
    	<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 navbar-right">
              <ul class="nav navbar-nav">
                <li><a href="#!">Home</a></li>
                <li><a href="#!">About Us</a></li>
                <li><a href="#!">Consultants</a></li>
                <li><a href="#!">Doctors</a></li>
                <li><a href="#!">Services</a></li>
                <li><a href="#!">Schedule</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:2px solid #0099da; border-left:none; border-right:none;}
.logo{ padding:12px 0px 0px;}
.navbar-brand {
    float: left;
    height: 65px;
    padding: 5px 15px;
    font-size: 18px;
    line-height: 20px;
}
.navbar-default{ 
	border-radius:2px; 
	background:#FFF; 
	margin-bottom:0px; 
	border:none !important;
}
.navbar-default ul{ padding:9px 0px 5px;}
.navbar-default .navbar-nav>li>a{ 
	color:#000; 
	padding:7px 23px; 
	font-size:14px; 
	font-weight:600;
}
.navbar-default .navbar-collapse, .navbar-default .navbar-form{
    border-color: #e7e7e7;
}
.navbar-default .navbar-nav>li>a:hover{ color:#0099da;}
@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 5px; font-size:12px; }
	}
.header-top{ height:35px; margin:10px auto 0px;}
.header-top ul{ list-style:none; margin:5px 5px;}
.header-top ul li{ float:left; padding:0px 5px; margin-top:2px;}
.header-top ul li a{ font-size:12px; text-decoration:none; background:#0099da; color:#FFF; 
padding:8px 10px; border-radius:100px; text-align:center;}
.header-top ul li a:hover{ background:#069; color:#FFF;}
.form{ padding:0px 10px; border:1px solid #0099da; border-radius:2px;}
.form-control{ border-radius:2px; margin:0px auto 4px;}
.input-group-btn:last-child>.btn, .input-group-btn:last-child>.btn-group {
    padding: 8px 10px 9px;
	border-radius:2px;
}
 Step 3 : Slider
Responsive Website
  HTML Code
<div class="row">
	<div class="slider">
       <div class="slider-h3">
            Lorem Ipsum is simply dummy text of the <br />printing and typesetting industry.
            <div style="padding-top:30px;"><a href="#" class="btn">Click Here!</a></div>
       </div>
    </div>
</div>
  CSS Code
.slider{background:url(../images/slider-bg.jpg); height:300px;}
.slider-h3{ font-size:30px; padding:100px 0px 0px 100px; color:#000; text-shadow:1px 0.5px #CCC;}
.btn{ background:#0099da; color:#FFF; padding:6px 20px; font-size:15px; 
text-decoration:none; border-radius:3px; text-shadow:none;}
.btn:hover{ background:#0080C0;}
@media only screen and (min-width:320px) and (max-width:480px){ 
.slider-h3{ font-size:22px; padding:40px 0px 0px 30px;} 
}
 Step 4 : Content Part 1
Responsive Website
  HTML Code
<div class="row">
     <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
     	<div class="slider-bottom-parts">
        	<div align="center"><img src="images/icon-1.png" width="70" height="60" /></div>
            <div class="slider-bottom-parts-h3">Lorem Ipsum is simply dummy text</div>
            <div class="slider-bottom-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...
            </div>
        </div>
     </div>
     <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
     	<div class="slider-bottom-parts">
        	<div align="center"><img src="images/icon-2.png" width="70" height="60" /></div>
            <div class="slider-bottom-parts-h3">Lorem Ipsum is simply dummy text</div>
            <div class="slider-bottom-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...
            </div>
        </div>
     </div>
     <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
     	<div class="slider-bottom-parts">
        	<div align="center"><img src="images/icon-3.png" width="70" height="60" /></div>
            <div class="slider-bottom-parts-h3">Lorem Ipsum is simply dummy text</div>
            <div class="slider-bottom-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...
            </div>
        </div>
     </div>
</div>
  CSS Code
.slider-bottom-parts{ padding:20px 41px; margin:0px -15px 5px; background:#0099da; border-right:2px #FFF solid;}
.slider-bottom-parts-h3{ color:#FFF; padding:20px 0px 10px; text-align:center; font-size:20px;}
.slider-bottom-parts-p{ color:#FFF; line-height:26px; font-size:14px; text-align:center;}
@media only screen and (min-width:600px) and (max-width:768px){ .slider-bottom-parts{padding:10px !important;} .slider-bottom-parts-h3{ font-size:18px;} .slider-bottom-parts-p{ text-align:justify; line-height:22px;}}
 Step 5 : Content Part 2
Responsive Website
  HTML Code
<div class="row m20_0">
	<div class="col-lg-9 col-md-9 col-sm-12 col-xs-12">
    	<div class="col-md-12"><div class="content-header-h3">Lorem Ipsum is simply</div></div>
        <div class="row">
        	<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
            	<img src="images/content-left.png" class="img-responsive" alt="Sample Image">
            </div>
            <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
            	<div class="content-left-top-right-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, 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.<br /><br>
                    <a href="#!" class="btn">Read More</a>
                </div>
            </div>
        </div>
        <div class="clearfix m10_0"></div>
        <div class="row">
        	<div class="col-md-4 col-sm-4 col-xs-12">
            	<div class="content-header-h3">Lorem Ipsum is simply</div>
                <p style="padding-top:5px;"><strong>Lorem Ipsum is simply dummy</strong></p>
            	<p align="justify">
                	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, but also 
                    the leap into electronic,. <a href="#">More</a></p>
            </div>
            <div class="col-md-4 col-sm-4 col-xs-12">
            	<div class="content-header-h3">&nbsp;</div>
                <p style="padding-top:5px;"><strong>Lorem Ipsum is simply dummy</strong></p>
            	<p align="justify">
                	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, but also 
                    the leap into electronic,. <a href="#">More</a></p>
            </div>
            <div class="col-md-4 col-sm-4 col-xs-12">
            	<div class="content-header-h3">Videos</div>
                <iframe width="100%" height="180" src="https://www.youtube.com/embed/2KpLHdAURGo" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
            </div>
        </div>
    </div>
    
    <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
    	<div class="content-header-h3">News &amp; Events</div>
        <div class="row">
        	<div class="col-md-4 col-sm-4 col-xs-4">
            	<div style="margin:0px -5px 0px -15px;"><img src="images/news.png" height="70" width="80" /></div>
            </div>
            <div class="col-md-8 col-sm-8 col-xs-8">
            	<div style="margin:0px -15px;">
                    <div class="content-date">20-02-2018</div>
                    <div class="content-right-p">
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum ...
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
        	<div class="col-md-4 col-sm-4 col-xs-4">
            	<div style="margin:0px -5px 0px -15px;"><img src="images/news-2.png" height="70" width="80" /></div>
            </div>
            <div class="col-md-8 col-sm-8 col-xs-8">
            	<div style="margin:0px -15px;">
                    <div class="content-date">20-02-2018</div>
                    <div class="content-right-p">
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum ...
                    </div>
                </div>
            </div>
        </div>
        
        <div class="row">
        	<div class="col-md-4 col-sm-4 col-xs-4">
            	<div style="margin:0px -5px 0px -15px;"><img src="images/news.png" height="70" width="80" /></div>
            </div>
            <div class="col-md-8 col-sm-8 col-xs-8">
            	<div style="margin:0px -15px;">
                    <div class="content-date">20-02-2018</div>
                    <div class="content-right-p">
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum ...
                    </div>
                </div>
            </div>
        </div>
        <div class="clearfix"></div>
        <div class="row">
        	<div class="content-header-h3">Contact Now</div>
            <input type="text" class="my_form form-control" placeholder="Name">
            <input type="text" class="my_form form-control" placeholder="Email">
            <textarea rows="3" class="form-textarea form-control"></textarea>
            <div  style="margin-top:15px;"><a href="#!" class="btn">Submit</a></div>
        </div>
    </div>
</div>
  CSS Code
.content-header-h3{ font-size:28px; padding:15px 0px; color:#0099da;}
.content-left-top-right-p{ font-size:14px; margin-top:-20px; padding:15px 0px 0px 20px; 
text-align:justify; color:#000; line-height:23px;}
.content-date{ color:#0099da; font-style:italic; font-size:13px; padding:0px 0px 5px;}
.content-right-p{padding:0px 0px 10px; font-size:12px; text-align:justify;}
.my_form{border-radius:2px; border:1px solid #0099da; margin:10px auto; height:30px;  padding:0px 10px;}
.form-textarea{ border-radius:2px; border:1px solid #0099da; margin:5px auto; padding:0px 10px;}

@media only screen and (min-width:320px) and (max-width:480px){
	.content-left-top-right-p{ margin:0px;} .content-header-h3{ text-align:center !important; font-size:18px;}
	}
@media only screen and (min-width:600px) and (max-width:768px){ .content-header-h3{ font-size:18px;}}
 Step 6 : Footer
Responsive Website
  HTML Code
<div class="row footer">
    <div class="col-lg-3 col-md-3 col-sm-3 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-3 col-md-3 col-sm-3 col-xs-12">
    	<div class="footer-h4">Extra Links</div>
    	<ul>
            <li><a href="#">Blog</a></li>
            <li><a href="#">Careers</a></li>
            <li><a href="#">Terms & Conditions</a></li>
        </ul>
    </div>
    <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12">
    	<div class="footer-h4">Extra Links</div>
    	<ul>
            <li><a href="#">Appointments</a></li>
            <li><a href="#">Find a Doctor</a></li>
            <li><a href="#">Insurance</a></li>
        </ul>
    </div>
    <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12">
    	<div class="footer-h4">Social Links</div><br />
        <div class="white" style="padding-left:20px; font-size:26px;">
            <a href="https://www.facebook.com/freetimelearn/" target="_blank"><i class="fa fa-facebook"></i></a> &nbsp; &nbsp;
            <a href="https://www.linkedin.com/in/free-time-learn-07598b143/" target="_blank"><i class="fa fa-linkedin"></i></a> &nbsp; &nbsp;
            <a href="https://twitter.com/freetimelearn" target="_blank"><i class="fa fa-twitter"></i></a> &nbsp; &nbsp;
            <a href="https://plus.google.com/101612697119159092378" target="_blank"><i class="fa fa-google-plus"></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:#333;}
.footer-h4{ font-size:18px; padding:15px 10px 0px; color:#FFF;}
.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:#CCC;}
.footer ul li a:hover{color:#FFF;}
.white{ color:#FFF; text-decoration:none;} .white a{ color:#FFF; text-decoration:none;} .white a:gover{ color:#0099da; text-decoration:none;}
.copyrights{font-size:12px; background:#000; padding:15px 10px; color:#FFF; }
.copyrights a{ color:#FFF; text-decoration:none;}
.copyrights a:hover{color:#CCC;}