Reference Websites
Create A Bootstrap Restaurant Website
  Start Coding
 Step 1 : Basic HTML Structure
  HTML Code
<html>
<head>
<title>How To Create A Basic Bootstrap Restaurant 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" 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">
		<nav class="navbar navbar-default header-right pull-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">
			<ul class="nav navbar-nav">
			    <li><a href="#!">Home</a></li>
                <li><a href="#!">About</a></li>
                <li><a href="#!">Today Special</a></li>
                <li><a href="#!">Menu Card</a></li>
                <li><a href="#!">Reservation</a></li>
                <li><a href="#!">Review</a></li>
                <li><a href="#!">Contact</a></li>
			</ul>
			</div>
		</nav>
   </div>
   
   <div class="clearfix"></div>
   
   <div class="header-bottom">
    	<div class="header-font">Eat healthy food &amp; Enjoy your life.</div>
        
        <div class="p50_0" align="center">
        <a href="#!" class="header-btns">BOOK A TABLE</a>&nbsp; &nbsp; &nbsp; &nbsp;
        <a href="#!" class="header-btns">SEE THE MENU </a>
        </div>
    </div>
   
</div>
  CSS Code
.header{ padding:10px 0px; background:url(../images/home-bg.jpg); height:500px; background-attachment:fixed;}
.header-left{padding:15px 20px;}
.header-right{padding-top:50px;}
.white{ color:#FFF; text-decoration:none;}
.white a{ color:#FFF; text-decoration:none;}
.white a:hover{ color:#CCC;}

.header-bottom{ padding:75px 0px 20px;}
.header-font{ color:#FFF; text-align:center; font-size:48px; text-transform:uppercase; font-weight:bold; padding:0px;}
.header-btns{ color:#FFF; font-size:16px; font-weight:500; border:1px solid #FFF; 
padding:10px 30px; text-decoration:none; border-radius:2px;}
.header-btns:hover{ background:#7db549; color:#FFF; border:1px solid #7db549; text-decoration:none;}

.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:9px 0px 5px;}
.navbar-default .navbar-nav>li>a{ 
	color:#FFF; 
	padding:6px 22px; 
	font-size:14px;
	margin:5px 14px 0px; 
	border:1px solid #FFF; border-radius:2px;
}
.navbar-default .navbar-nav>li>a:hover{background:#7db549 !important; color:#FFF;}
.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{
	border:1px solid #7db549;
	}
.navbar-toggle{ margin-top:-20px;}
@media only screen and (min-width:320px) and (max-width:480px){ 
.logo{ padding:10px 0px 0px;}
.header-right{padding-top:0px;}
.header-font{font-size:28px;}
.header-btns{ padding:6px 10px;}
}
@media only screen and (min-width:600px) and (max-width:768px){
.header{ padding:10px 0px; height:350px;}
.navbar-default .navbar-nav>li>a{padding:7px 6px; font-size:11px; margin:5px 5px 0px;}
.header-right{padding-top:15px;}
.header-font{font-size:28px;}
.header-btns{ padding:8px 20px;}
}
@media only screen and (min-width:1025px) and (max-width:1280px){
	.navbar-default .navbar-nav>li>a{padding:7px 15px; font-size:11px; margin:5px 10px 0px;}
	.header-right{padding-top:45px;}
   }
@media only screen and (min-width:960px) and (max-width:1024px){
	.header{ padding:10px 0px; height:400px;}
	.navbar-default .navbar-nav>li>a{padding:7px 15px; font-size:11px; margin:5px 10px 0px;}
	.header-font{font-size:34px;}
	.header-right{padding-top:35px;}
   }
 Step 3 : Content Part 1
Responsive Website
  HTML Code
<div class="row">

    <div class="col-md-5 col-sm-6 col-xs-12">
        <div class="content-part-1-left-h3">Lorem Ipsum is simply dummy text...</div>
        <div class="content-part-1-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, but also the 
        leap into electronic typesetting, remaining essentially unchanged.
        </div>
        <div class="p20_0"><a href="#!" class="content-part-1-left-btn">Read More.</a></div>
    </div>
    <div class="col-md-7 col-sm-6 col-xs-12" align="center">
    	<div class="content-part-1-right">
        	<img src="images/content-part-1.jpg" class="img-responsive" alt="Restaurant">
        </div>
    </div>
    
</div>
  CSS Code
.content-part-1-left-h3{ font-size:28px; color:#7db549; font-weight:500; padding-top:120px; padding-left:10px;}
.content-part-1-left-p{font-size:14px; text-align:justify; color:#000; font-weight:500; line-height:26px; padding:10px 12px;}
.content-part-1-left-btn{ font-size:16px; font-weight:500; border:1px solid #7db549; color:#FFF; 
padding:10px 30px; text-decoration:none; border-radius:2px; background:#7db549; margin:0px 10px;}
.content-part-1-left-btn:hover{ background:#689242;}
.content-part-1-right{ padding-top:10px;}
@media only screen and (min-width:320px) and (max-width:480px){
	.content-part-1-left-h3{ padding-top:30px; font-size:20px; text-align:center; }
	}
@media only screen and (min-width:600px) and (max-width:768px){
	.content-part-1-left-h3{ padding-top:20px; font-size:24px;}
	.content-part-1-right{ padding-top:80px;}
	}
 Step 4 : Content Part 2
Responsive Website
  HTML Code
<div class="row">
    <div class="content-part-2">
        <div class="content-part-2-inner">
            <div class="interior-font">Restaurant Interior</div>
            <div class="col-md-6 col-sm-6 col-xs-12">
            	<div class="content-interior">
                    <img src="images/interior.jpg" class="img-responsive" alt="Restaurant" />
                    <div class="content-interior-h3">Non AC Hall</div>
                    <div class="content-interior-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.</div>
                </div>
            </div>
            <div class="col-md-6 col-sm-6 col-xs-12">
            	<div class="content-interior">
                    <img src="images/interior-2.jpg" class="img-responsive" alt="Restaurant" />
                    <div class="content-interior-h3">Central AC Hall</div>
                    <div class="content-interior-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.</div>
                </div>
            </div>
        </div>
    </div>
</div>
  CSS Code
.content-part-2{ padding:10px 0px; background:url(../images/content-bg.jpg) no-repeat; height:600px; background-position:center  bottom; background-attachment:fixed;}
.interior-font{ font-size:36px; text-transform:uppercase; padding:20px 0px 30px; font-weight:600;
text-align:center; color:#000; text-shadow: 2px 2px 3px #333;}
.content-part-2-inner{background-color: rgba(255,255,255,.5); padding:20px 0px 20px; margin:50px 150px; float:left;
border-radius:3px;}
.content-interior{ padding:10px 25px; float:left;}
.content-interior-h3{ color:#000; font-size:18px; text-shadow: 2px 2px 3px #333; padding:10px 0px; text-align:center;}
.content-interior-p{ color:#000; padding:5px 0px 10px; font-size:14px; line-height:26px; text-align:justify;}
@media only screen and (min-width:320px) and (max-width:480px){
	.content-part-2{ padding:10px 0px; height:1000px;}
	.content-part-2-inner{padding:20px 0px; margin:50px 20px;}
	}
@media only screen and (min-width:600px) and (max-width:768px){
	.content-part-2-inner{padding:20px 0px; margin:50px 50px;}
	}
 Step 5 : Content Part 3
Responsive Website
  HTML Code
<div class="row">
	<div class="content-part-3">
        <div class="col-md-6 col-sm-12 col-xs-12">
        	<div class="row content-part-3-inner">
                <div class="col-md-5 col-sm-5 col-xs-12" align="center">
                    <img src="images/menu/1.jpg" class="img-responsive img" alt="Menu Item">
                </div>
                <div class="col-md-7 col-sm-7 col-xs-12">
                    <div class="content-part-3-right-h4">Lorem Ipsum</div>
                    <div class="price">Price : <i class="green"><span class="fa fa-inr"></span>55.00/-</i></div>
                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
                    <div class="margin_p3"><a href="#!" class="order-now">Order Now</a></div>
                </div>
            </div>
        </div>
        <div class="col-md-6 col-sm-12 col-xs-12">
        	<div class="row content-part-3-inner">
                <div class="col-md-5 col-sm-5 col-xs-12" align="center">
                    <img src="images/menu/2.jpg" class="img-responsive img" alt="Menu Item">
                </div>
                <div class="col-md-7 col-sm-7 col-xs-12">
                    <div class="content-part-3-right-h4">Lorem Ipsum</div>
                    <div class="price">Price : <i class="green"><span class="fa fa-inr"></span>150.00/-</i></div>
                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
                    <div class="margin_p3"><a href="#!" class="order-now">Order Now</a></div>
                </div>
            </div>
        </div>
        <div class="col-md-6 col-sm-12 col-xs-12">
        	<div class="row content-part-3-inner">
                <div class="col-md-5 col-sm-5 col-xs-12" align="center">
                    <img src="images/menu/3.jpg" class="img-responsive img" alt="Menu Item">
                </div>
                <div class="col-md-7 col-sm-7 col-xs-12">
                    <div class="content-part-3-right-h4">Lorem Ipsum</div>
                    <div class="price">Price : <i class="green"><span class="fa fa-inr"></span>220.00/-</i></div>
                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
                    <div class="margin_p3"><a href="#!" class="order-now">Order Now</a></div>
                </div>
            </div>
        </div>
        <div class="col-md-6 col-sm-12 col-xs-12">
        	<div class="row content-part-3-inner">
                <div class="col-md-5 col-sm-5 col-xs-12" align="center">
                    <img src="images/menu/4.jpg" class="img-responsive img" alt="Menu Item">
                </div>
                <div class="col-md-7 col-sm-7 col-xs-12">
                    <div class="content-part-3-right-h4">Lorem Ipsum</div>
                    <div class="price">Price : <i class="green"><span class="fa fa-inr"></span>90.00/-</i></div>
                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
                    <div class="margin_p3"><a href="#!" class="order-now">Order Now</a></div>
                </div>
            </div>
        </div> 
    </div>
</div>
  CSS Code
.img{ width:90%; height:auto;}
.content-part-3{ padding:30px 0px !important; float:left;}
.content-part-3-inner{ padding:10px 0px;}
.content-part-3-right-h4{ font-weight:600; color:#000; padding:0px;}
.margin_5{ margin:5px 0px; float:left;}
.margin_p3{ margin:10px 0px 5px;}
.price{color:#000; padding:5px 0px; font-weight:bold; font-size:15px;}
.green{ color:#7db549; font-weight:bold; font-size:16px;}
.order-now{ color:#FFF; background:#7db549; padding:5px 15px; border-radius:2px; text-decoration:none; margin:5px auto;}
.order-now:hover{background:#689242;}
@media only screen and (min-width:320px) and (max-width:480px){
	.img{ width:100%;}
	}
@media only screen and (min-width:600px) and (max-width:768px){
	.img{ width:96%; border-radius:3px;}
	.content-part-3-right-h4{ font-weight:600; color:#000; padding:5px 0px 0px;}
	}
 Step 6 : Footer
Responsive Website
  HTML Code
<div class="row footer">
	<div class="col-md-4 col-sm-4 col-xs-12">
    	<div class="footer-parts-h3">About Restaurant</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 class="col-md-1 col-sm-1"></div>
    <div class="col-md-3 col-sm-3 col-xs-12">
    	<div class="footer-parts-h3">Opening Hours</div>
        <div class="footer-parts-p">
        	Mon - Thu : 7:00 AM - 10:00 PM <br />
            Friday : 7:00 AM - 11:00 PM <br />
            Sat - Sun : 7:00 AM - 11:45 PM 
        </div>
    </div>
    <div class="col-md-4 col-sm-4 col-xs-12">
    	<div class="footer-parts-h3">Our Location</div>
        <div class="footer-parts-p">
        	3rd phace MG Layout, Opp - Smaple School,<br />
            Pl Name - Free Time Learn,<br />
            Andhra Pradesh, Nellore(Dt), India - 524002
        </div>
        <div class="footer-icons">
        	<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>
            </ul>
        </div>
    </div>
</div>
<div class="clearfix"></div>
<div class="row">
	<div class="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>
</div>
  CSS Code
.footer{padding:20px 0px; background:#333;}
.footer-parts-h3{ font-size:18px; font-weight:600; color:#FFF; padding:10px 0px;}
.footer-parts-p{ color:#000; line-height:24px; text-align:justify; color:#FFF;}
.footer-icons{list-style:none;}
.footer-icons ul{list-style:none; padding:0px;}
.footer-icons ul li{float:left; padding:0px 25px 0px 5px; text-transform:uppercase;}
.footer-icons ul li a{color:#FFF; font-weight:600; font-size:18px;}
.footer-icons ul li a:hover{ color:#CCC;}
.footer-bottom{padding:15px; text-align:center; color:#FFF; font-size:13px; background:#000;}