HTML
   HTML5
   CSS
   CSS3
   JavaScript
   jQuery
   AngularJS
   Articles
   Tech Articles
   Blog
Google News
logo
Create A Bootstrap Entertainment Website
  Mobile View   
  Tablet View   
  Desktop View   
  Start Coding
  View Source
 Step 1 : Basic HTML Structure
  HTML Code
<html>
<head>
<title>How To Create A Basic Bootstrap Entertainment 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">
   <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; background:url(../images/bg.jpg); background-size:cover; 
background-attachment:fixed; background-position:center center; margin:0px auto !important;}
.main{margin:0px auto 20px;
	-webkit-box-shadow: 0 6px 10px 0 rgba(255, 255, 255, 0.14), 0 1px 18px 0 rgba(255, 255, 255, 0.12), 0 3px 5px -1px rgba(255, 255, 255, 0.3) !important; 
	box-shadow: 0 6px 10px 0 rgba(255, 255, 255, 0.14), 0 1px 18px 0 rgba(255, 255, 255, 0.12), 0 3px 5px -1px rgba(255, 255, 255, 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;}
.white{ color:#FFF; text-decoration:none;} 
.white a{ color:#FFF; text-decoration:none;} 
.white a:hover{ color:#FFF; text-decoration:none;}
 Step 2 : Header
Responsive Website
  HTML Code
<div class="row">
	<div class="col-md-4 col-sm-4 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-8 col-sm-8 col-xs-12">
    	<div class="row hidden-xs">
        	<div class="col-md-4"></div>
            <div class="col-md-8 col-sm-12 col-xs-12">
            	<div class="row pull-right">
                <div class="header-top">
                    <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>
            </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="#!">News</a></li>
                <li><a href="#!">Gallery</a></li>
                <li><a href="#!">Contact Us</a></li>
              </ul>
            </div>
         </nav>
    </div>
</div>
  CSS Code
.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:none !important; 
	margin-bottom:0px; 
	border:none !important;
}
.navbar-default ul{ padding:9px 0px 5px;}
.navbar-default .navbar-nav>li>a{ 
	color:#FFF; 
	padding:7px 27px; 
	font-size:14px;
	text-transform:uppercase;
}
.navbar-default .navbar-collapse, .navbar-default .navbar-form{
    border-color: #CCC;
}
.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:20px; text-decoration:none; color:#FFF; 
padding:8px 10px; border-radius:100px; text-align:center;}
.header-top ul li a:hover{ color:#CCC;}
.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;
}

@media only screen and (min-width:600px) and (max-width:768px){
.logo {padding: 35px 0px 0px;}
}
 Step 3 : Slider (or) Banner
Responsive Website
  HTML Code
<div class="row">
	<div class="slider">
        <div class="slider-form" align="center">
            <div class="glass">
            <form action="" method="post">
                <input type="text" class="form" placeholder="Search Movie" /><button type="submit" class="search">SEARCH</button>
            </form>
            </div>
        </div>
    </div>
</div>
  CSS Code
.slider{ background:url(../images/slider.jpg); height:270px;}
.slider-form{ padding:100px 0px 10px;}
.glass {width:800px; margin:0px 112px; background-color: rgba(255,255,255,.8); padding: 0;}
.form{ width:655px; padding:25px 30px 27px; height:20px; font-size:20px; border:1px solid #F30; background:none; color:#000; font-weight:bold;}
.search{ background:#F60; padding:16px 35px 15px; color:#FFF; font-size:17px; font-weight:bold; 
border:1px solid #F30; cursor:pointer;}
.search:hover{ background:#F30;}
@media only screen and (min-width:320px) and (max-width:480px){
	.slider{ height:200px;}
	.slider-form{ padding:80px 0px 10px;}
	.glass {width:98%; margin:0px 1%;}
	.form{ width:70%; padding:16px 10px 17px; height:20px; font-size:15px;}
	.search{ padding:7px 10px 7px; font-size:14px;}
	}
@media only screen and (min-width:600px) and (max-width:768px){
	.slider{ height:200px;}
	.slider-form{ padding:80px 0px 10px;}
	.glass {width:100%; margin:0px;}
	.form{ width:80%; padding:16px 10px 17px; height:20px; font-size:15px;}
	.search{ padding:7px 10px 7px; font-size:14px;}
	}
 Step 4 : Content
Responsive Website
  HTML Code
<div class="row" align="center">
	<div class="col-md-3 col-sm-3 col-xs-12">
   	  <img src="images/varma.png" class="img-responsive" alt="Entertainnment Images"> 
      <div class="content-parts-h4"><a href="#!" class="white"> R G V </a></div>
    </div>
    <div class="col-md-3 col-sm-3 col-xs-12">
      <img src="images/amir.png" class="img-responsive" alt="Entertainnment Images"> 
      <div class="content-parts-h4"><a href="#!" class="white"> Amir Khan </a></div>
    </div>
    <div class="col-md-3 col-sm-3 col-xs-12">
      <img src="images/aish.png" class="img-responsive" alt="Entertainnment Images"> 
      <div class="content-parts-h4"><a href="#!" class="white"> Aishwarya Rai </a></div>
    </div>
    <div class="col-md-3 col-sm-3 col-xs-12">
      <img src="images/madhavan.png" class="img-responsive" alt="Entertainnment Images">
      <div class="content-parts-h4"><a href="#!" class="white">Madhavan</a></div> 
    </div>
</div>
  CSS Code
.content-parts-h4{font-size:20px; padding:10px 0px; text-align:center;}
 Step 5 : Content Center
Responsive Website
  HTML Code
<div class="row">
	<div class="content-center">
        <div class="content-center-h3">Lorem Ipsum is simply dummy text.</div>
        <div class="content-center-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>
</div>
  CSS Code
.content-center{ background:url(../images/sarkar.jpg) no-repeat; padding:0px;
background-attachment:fixed; background-position:center center; background-size:cover;}
.content-center-h3{ font-size:36px; color:#FFF; padding:100px 100px 20px;}
.content-center-p{ color:#FFF; padding:10px 100px 100px; line-height:26px; font-size:15px; text-align:justify;}
@media only screen and (min-width:320px) and (max-width:480px){
	.content-center-h3{ font-size:26px; color:#FFF; padding:50px 10px 20px; text-align:center;}
	.content-center-p{ color:#FFF; padding:10px;}
	}
 Step 6 : Content Bottom
Responsive Website
  HTML Code
<div class="row">
	<h1 class="white" align="center">LATEST MOVIES</h1>
    <div class="clearfix"></div>
	<div class="col-md-4 col-sm-4 col-xs-12">
    	<div class="content-bottom-parts">
            <div align="center"><img src="images/1.png" class="img-responsive" alt="Latest Movies"></div>
            <div class="content-bottom-p">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
            <div class="content-bottom-date">Relese Date : <span class="content-bottom-date-inner">14-Apr-2018</span></div>
            <div class="content-bot-buttons">
                <a href="#!" class="content-bottom-btns">Details</a>
            </div>
            <div class="content-bot-buttons pull-right">
                <a href="#!" class="content-bottom-btns">Book Now</a>
            </div>
        </div>
    </div>
    <div class="col-md-4 col-sm-4 col-xs-12">
    	<div class="content-bottom-parts">
            <div align="center"><img src="images/2.png" class="img-responsive" alt="Latest Movies"></div>
            <div class="content-bottom-p">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
            <div class="content-bottom-date">Relese Date : <span class="content-bottom-date-inner">12-May-2017</span></div>
            <div class="content-bot-buttons">
                <a href="#!" class="content-bottom-btns">Details</a>
            </div>
            <div class="content-bot-buttons pull-right">
                <a href="#!" class="content-bottom-btns">Booking Close</a>
            </div>
        </div>
    </div>
    <div class="col-md-4 col-sm-4 col-xs-12">
    	<div class="content-bottom-parts">
            <div align="center"><img src="images/3.png" class="img-responsive" alt="Latest Movies"></div>
            <div class="content-bottom-p">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
            <div class="content-bottom-date">Relese Date : <span class="content-bottom-date-inner">12-Apr-2017</span></div>
            <div class="content-bot-buttons">
                <a href="#!" class="content-bottom-btns">Details</a>
            </div>
            <div class="content-bot-buttons pull-right">
                <a href="#!" class="content-bottom-btns">Booking Close</a>
            </div>
        </div>
    </div>
    <div class="col-md-4 col-sm-4 col-xs-12">
    	<div class="content-bottom-parts">
            <div align="center"><img src="images/4.jpg" class="img-responsive" alt="Latest Movies"></div>
            <div class="content-bottom-p">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
            <div class="content-bottom-date">Relese Date : <span class="content-bottom-date-inner">25-Dec-2020</span></div>
            <div class="content-bot-buttons">
                <a href="#!" class="content-bottom-btns">Details</a>
            </div>
            <div class="content-bot-buttons pull-right">
                <a href="#!" class="content-bottom-btns">Book Now</a>
            </div>
        </div>
    </div>
    <div class="col-md-4 col-sm-4 col-xs-12">
    	<div class="content-bottom-parts">
            <div align="center"><img src="images/5.jpg" class="img-responsive" alt="Latest Movies"></div>
            <div class="content-bottom-p">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
            <div class="content-bottom-date">Relese Date : <span class="content-bottom-date-inner">27-Apr-2018</span></div>
            <div class="content-bot-buttons">
                <a href="#!" class="content-bottom-btns">Details</a>
            </div>
            <div class="content-bot-buttons pull-right">
                <a href="#!" class="content-bottom-btns">Book Now</a>
            </div>
        </div>
    </div>
    <div class="col-md-4 col-sm-4 col-xs-12">
    	<div class="content-bottom-parts">
            <div align="center"><img src="images/6.jpg" class="img-responsive" alt="Latest Movies"></div>
            <div class="content-bottom-p">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
            <div class="content-bottom-date">Relese Date : <span class="content-bottom-date-inner">25-Jan-2018</span></div>
            <div class="content-bot-buttons">
                <a href="#!" class="content-bottom-btns">Details</a>
            </div>
            <div class="content-bot-buttons pull-right">
                <a href="#!" class="content-bottom-btns">Book Now</a>
            </div>
        </div>
    </div>
    <div class="col-md-4 col-sm-4 col-xs-12">
    	<div class="content-bottom-parts">
            <div align="center"><img src="images/7.jpg" class="img-responsive" alt="Latest Movies"></div>
            <div class="content-bottom-p">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
            <div class="content-bottom-date">Relese Date : <span class="content-bottom-date-inner">30-Mar-2018</span></div>
            <div class="content-bot-buttons">
                <a href="#!" class="content-bottom-btns">Details</a>
            </div>
            <div class="content-bot-buttons pull-right">
                <a href="#!" class="content-bottom-btns">Book Now</a>
            </div>
        </div>
    </div>
    <div class="col-md-4 col-sm-4 col-xs-12">
    	<div class="content-bottom-parts">
            <div align="center"><img src="images/8.jpg" class="img-responsive" alt="Latest Movies"></div>
            <div class="content-bottom-p">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
            <div class="content-bottom-date">Relese Date : <span class="content-bottom-date-inner">28-Apr-2017</span></div>
            <div class="content-bot-buttons">
                <a href="#!" class="content-bottom-btns">Details</a>
            </div>
            <div class="content-bot-buttons pull-right">
                <a href="#!" class="content-bottom-btns">Booking Close</a>
            </div>
        </div>
    </div>
    <div class="col-md-4 col-sm-4 col-xs-12">
    	<div class="content-bottom-parts">
            <div align="center"><img src="images/9.jpg" class="img-responsive" alt="Latest Movies"></div>
            <div class="content-bottom-p">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
            <div class="content-bottom-date">Relese Date : <span class="content-bottom-date-inner">18-Oct-2017</span></div>
            <div class="content-bot-buttons">
                <a href="#!" class="content-bottom-btns">Details</a>
            </div>
            <div class="content-bot-buttons pull-right">
                <a href="#!" class="content-bottom-btns">Booking Close</a>
            </div>
        </div>
    </div>
</div>
  CSS Code
.content-bottom-parts{ float:left; margin:14px 0px; border:1px solid #999; padding-bottom:10px;}
img{ width:100%;}
.content-bottom-date{color:#F30; font-style:italic; font-size:14px; font-weight:600; padding:0px 5px 10px;}
.content-bottom-date-inner{color:#F60; font-style:italic; font-size:13px; font-weight:600; padding:0px 5px 20px;}
.content-bottom-p{ color:#FFF; padding:10px 5px; line-height:26px;}
.content-bot-buttons{ float:left; padding-top:10px;}
.content-bottom-btns{ background:#FFF; color:#0099da; border-radius:2px; padding:4px 10px; 
text-decoration:none; margin:0px 5px;}
.content-bottom-btns:hover{ background:#CCC; color:#000; text-decoration:none;}
 Step 7 : Footer
Responsive Website
  HTML Code
<div class="row">
	 <div class="footer">
         <div class="col-md-4 col-sm-4 col-xs-12">
            <div class="footer-parts">
                <div class="footer-parts-h4">Lorem Ipsum</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 class="footer-social-links">
                    <ul>
                        <li><a href="#!"><i class="fa fa-facebook"></i></a></li>
                        <li><a href="#!"><i class="fa fa-linkedin"></i></a></li>
                        <li><a href="#!"><i class="fa fa-twitter"></i></a></li>
                        <li><a href="#!"><i class="fa fa-google-plus"></i></a></li>
                    </ul>
                </div>
            </div>
         </div>
         <div class="col-md-4 col-sm-4 col-xs-12">
            <div class="footer-parts">
                <div class="footer-parts-h4">Lorem Ipsum</div>
                <div class="footer_center_links">
                    <ul>
                        <li><a href="#!">Latest Movies</a></li>
                        <li><a href="#!">2017 National Award Movies</a></li>
                        <li><a href="#!">2017 Nandi Award Movies</a></li>
                        <li><a href="#!">Services</a></li>
                        <li><a href="#!">Blog</a></li>
                        <li><a href="#!">Careers</a></li>
                        <li><a href="#!">Terms and Conditions</a></li>
                        <li><a href="#!">Privacy Policy</a></li>
                    </ul>
                </div>
            </div>
         </div>
         <div class="col-md-4 col-sm-4 col-xs-12">
            <div class="footer-parts">
                <div class="footer-parts-h4">Feedback</div>
                <div class="footer-right">
                <form action="" method="post">
                    <input type="text" class="footer-form form-control" placeholder="Name" />
                    <input type="text" class="footer-form form-control" placeholder="Email Id" />
                    <textarea cols="" rows="3" class="footer-form form-control" placeholder="Message"></textarea>
                    <input type="submit" value="SUBMIT" name="" class="footer_btn btn-block"/>
                </form>
                </div>
            </div>
         </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:30px 0px 20px; border-top:1px solid #333; background-color: rgba(0,0,0,.3);}
.footer-parts{padding:0px 15px 0px 25px;}
.footer-parts-h4{ font-size:18px; color:#FFF; padding:10px 0px 5px;}
.footer-parts-p{ color:#FFF; padding:15px 0px; line-height:26px; text-align:justify;}
.footer-social-links{ list-style:none;}
.footer-social-links ul{ list-style:none; padding:0px;}
.footer-social-links ul li{ padding:0px 10px; float:left;}
.footer-social-links ul li a{ font-size:20px; color:#FFF; padding:0px 10px 0px 0px;}
.footer-social-links ul li a:hover{ color:#CCC;}
@media only screen and (min-width:600px) and (max-width:768px){
	.footer-social-links ul li{ padding:0px 5px; float:left;}
	}
.footer_center_links{list-style:none;}
.footer_center_links ul{ list-style:none; padding:0px;}
.footer_center_links ul li{ padding:5px 0px; font-size:14px;}
.footer_center_links ul li a{ color:#FFF; text-decoration:none; padding:5px 0px;}
.footer_center_links ul li a:hover{ color:#CCC;}

.footer-right{ margin-top:10px;}
.footer-form{padding:10px; border-radius:2px; color:#FFF; background:none; border:1px solid #FFF; 
margin:5px 0px 10px;}
.footer_btn{ background:#FFF; color:#000; padding:7px 30px; cursor:pointer; font-size:16px; 
margin:5px 0px; border:none; border-radius:2px;}
.footer_btn:hover{ background:#CCC;}

.footer-bottom{ padding:15px 0px; text-align:center; background-color: rgba(0,0,0,.6);}