Responsive Web Template Using Bootstrap Tutorial

Published on: October 29, 2014   Last Updated on : June 1, 2018   Posted By : WebDesignReference

Responsive Web Template Using Bootstrap Tutorial

Responsive Web Template Using Bootstrap Tutorial and Responsive Web Template Using Bootstrap Reference Guide

Bootstrap Responsive Web Design Template Preview

Responsive Web Template Using Bootstrap Tutorial

Step 1 : Creating a Basic Html5 Document.

Example : Minimal Html5 Document.

< !DOCTYPE html >
< html >
< head >
< meta charset=”UTF-8″ >
< title > WDR Responsive Web Template < /title >
< /head >
< body >
< /body >
< /html >
Step 2 : Include meta viewport tag into html5 Document

Example : Include meta viewport tag

< meta name=”viewport” content=”width=device-width, initial-scale=1.0″/ >
Step 3 : Include bootstrap.css, custom-style.css, carousel.css, jquery.min.js, bootstrap.min.js, html5shiv.js and respond.js into html5 Document

Example : Include bootstrap.css, custom-style.css, carousel.css, jquery.min.js, bootstrap.min.js, html5shiv.js and respond.js into the Document

< !DOCTYPE html >
< html >
< head >
< meta charset=”UTF-8″ >
< meta name=”viewport” content=”width=device-width” >
< title > WDR Responsive Web Template < /title >
< link href=”css/bootstrap.css” rel=”stylesheet” >
< link href=”css/custom-style.css” rel=”stylesheet” >
< link href=”css/carousel.css.css” rel=”stylesheet” >
< script src=”js/jquery.min.js” > < /script >
< script src=”js/bootstrap.min.js” > < /script >
< !–[if lt IE 9] >
< script src=”https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js” > < /script >
< script src=”https://oss.maxcdn.com/respond/1.4.2/respond.min.js” > < /script >
< ![endif]– >
< /head >
< body >
< /body >
< /html >
Step 4 : Create Header part of WDR Bootstrap template.

Example : Create Header part of WDR Bootstrap template

< !DOCTYPE html >
< html >
< head >
< meta charset=”UTF-8″ >
< meta name=”viewport” content=”width=device-width” >
< title > WDR Responsive Web Template < /title >
< link href=”css/bootstrap.css” rel=”stylesheet” >
< link href=”css/custom-style.css” rel=”stylesheet” >
< link href=”css/carousel.css.css” rel=”stylesheet” >
< script src=”js/jquery.min.js” > < /script >
< script src=”js/bootstrap.min.js” > < /script >
< !–[if lt IE 9] >
< script src=”https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js” > < /script >
< script src=”https://oss.maxcdn.com/respond/1.4.2/respond.min.js” > < /script >
< ![endif]– >
< /head >
< body >
<header>
	<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation" style="background:#444">
	  <div class="container">
	  
		<div class="navbar-header">
		  <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
			<span class="sr-only">Toggle navigation</span>
			<span class="icon-bar"></span>
			<span class="icon-bar"></span>
			<span class="icon-bar"></span>
			</button>
		  <a class="navbar-brand" href="#">WDR Template</a>
		</div><!-- End .navbar-header -->		

		<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
		  <ul class="nav navbar-right navbar-nav">
			<li class="dropdown">
			<a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="glyphicon glyphicon-search"></i></a>
			<ul class="dropdown-menu" style="padding:12px;">
				<form class="form-inline">					 
				<input type="text" class="form-control" placeholder="Search">  
				<button type="submit" class="btn btn-danger pull-right" style="padding:6px 30px; margin-top:10px;"><i class="glyphicon glyphicon-search"></i></button> 						
				</form>
		    </ul>
			</li>
			<li class="dropdown">
				<a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="glyphicon glyphicon-user"></i> <i class="glyphicon glyphicon-chevron-down"></i></a>
				<ul class="dropdown-menu">
				  <li><a href="#">Login</a></li>
				  <li><a href="#">Sign Up</a></li>
				  <li class="divider"></li>
				  <li><a href="#">Profile</a></li>
				 </ul>
			  </li>  
			</ul>
		  <ul class="nav navbar-nav navbar-right">
			<li class="active"><a href="#">Home</a></li>
			<li><a href="#">About</a></li>
			<li><a href="#">Contact</a></li>
			<li><a href="#">Portfolio</a></li>
			<li><a href="#">Blog    </a></li>        
		  </ul>     
		</div><!-- End.navbar-collapse -->
	  </div><!-- End .container -->
	</nav>
</header><!-- End header--> 
< /body >
< /html >
Step 4 : Create Content part of WDR Bootstrap template.

Example : Create Content part of WDR Bootstrap template

< !DOCTYPE html >
< html >
< head >
< meta charset=”UTF-8″ >
< meta name=”viewport” content=”width=device-width” >
< title > WDR Responsive Web Template < /title >
< link href=”css/bootstrap.css” rel=”stylesheet” >
< link href=”css/custom-style.css” rel=”stylesheet” >
< link href=”css/carousel.css.css” rel=”stylesheet” >
< script src=”js/jquery.min.js” > < /script >
< script src=”js/bootstrap.min.js” > < /script >
< !–[if lt IE 9] >
< script src=”https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js” > < /script >
< script src=”https://oss.maxcdn.com/respond/1.4.2/respond.min.js” > < /script >
< ![endif]– >
< /head >
< body >
<header>
	<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation" style="background:#444">
	  <div class="container">
	  
		<div class="navbar-header">
		  <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
			<span class="sr-only">Toggle navigation</span>
			<span class="icon-bar"></span>
			<span class="icon-bar"></span>
			<span class="icon-bar"></span>
			</button>
		  <a class="navbar-brand" href="#">WDR Template</a>
		</div><!-- End .navbar-header -->		

		<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
		  <ul class="nav navbar-right navbar-nav">
			<li class="dropdown">
			<a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="glyphicon glyphicon-search"></i></a>
			<ul class="dropdown-menu" style="padding:12px;">
				<form class="form-inline">					 
				<input type="text" class="form-control" placeholder="Search">  
				<button type="submit" class="btn btn-danger pull-right" style="padding:6px 30px; margin-top:10px;"><i class="glyphicon glyphicon-search"></i></button> 						
				</form>
		    </ul>
			</li>
			<li class="dropdown">
				<a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="glyphicon glyphicon-user"></i> <i class="glyphicon glyphicon-chevron-down"></i></a>
				<ul class="dropdown-menu">
				  <li><a href="#">Login</a></li>
				  <li><a href="#">Sign Up</a></li>
				  <li class="divider"></li>
				  <li><a href="#">Profile</a></li>
				 </ul>
			  </li>  
			</ul>
		  <ul class="nav navbar-nav navbar-right">
			<li class="active"><a href="#">Home</a></li>
			<li><a href="#">About</a></li>
			<li><a href="#">Contact</a></li>
			<li><a href="#">Portfolio</a></li>
			<li><a href="#">Blog    </a></li>        
		  </ul>     
		</div><!-- End.navbar-collapse -->
	  </div><!-- End .container -->
	</nav>
</header><!-- End header--> 

<div class="container" style="margin-top:66px !important;">
    <div class="row">
		<div class="col-xs-12 col-sm-9">          		
			<div id="myCarousel" class="carousel slide" data-ride="carousel" style="max-height:350px;">
			  <!-- Indicators -->
			  <ol class="carousel-indicators">
				<li data-target="#myCarousel" data-slide-to="0" class=""></li>
				<li data-target="#myCarousel" data-slide-to="1" class=""></li>
				<li data-target="#myCarousel" data-slide-to="2" class="active"></li>
			  </ol>
			  <div class="carousel-inner">
				<div class="item">
				  <img src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="First slide">
				  <div class="container">
					<div class="carousel-caption">
					  <h1>Web UI Interface With Responsive Features</h1>
					  <p>Paste dummy text which is related to caption heading.</p>
					  <p><a class="btn btn-sm btn-danger" href="#" role="button">Know More....</a></p>
					</div>
				  </div>
				</div>
				<div class="item">
				  <img src="data:image/gif;base64,R0lGODlhAQABAIAAAGZmZgAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Second slide">
				  <div class="container">
					<div class="carousel-caption">
					  <h1>Web Design With Bootstrap Ui Development Framework</h1>
					  <p>Paste dummy text which is related to caption heading.</p>
					  <p><a class="btn btn-sm btn-success" href="#" role="button">Know More....</a></p>
					</div>
				  </div>
				</div>
				<div class="item active">
				  <img src="data:image/gif;base64,R0lGODlhAQABAIAAAFVVVQAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Third slide">
				  <div class="container">
					<div class="carousel-caption">
					  <h1>Responsive Carousel Slider Example</h1>
					  <p>Paste dummy text which is related to caption heading.</p>
					  <p><a class="btn btn-sm btn-warning" href="#" role="button">Know More....</a></p>
					</div>
				  </div>
				</div>
			  </div>
			  <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
			  <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
			</div><!-- End #myCarousel -->
	
	    <div class="blog-header well">
        <h1 class="blog-title">WDR Template with Bootstrap Features.</h1>
        <p class="lead blog-description">Some attractive description of your Blog Here.</p>
		</div>
	
	    <div class="blog-post well">
            <h2 class="blog-post-title">Sample blog post Heading</h2>
            <p class="blog-post-meta">January 20, 2014 by <a href="#">Anil</a></p>

            <p>Blog post content here which contain images, typography, quotes, videos, text forms etc. or write here dummy text. </p>
            <hr>
            <p>Blog post content here which contain images, typography, <a href="#">quotes</a>, videos, text forms etc. or write here dummy text. </p>
            <blockquote>
              <p>Lorem ipsum dummy content of quote<strong> bold line of quote here</strong> Lorem ipsum dummy content of quote</p>
            </blockquote>
            <p>Blog post<em>content</em> here which contain images, typography, <a href="#">quotes</a>, videos, text forms etc. or write here dummy text.</p>
			
            <h2> Post Inner Heading in post</h2>
            <p>Inner heading content here which contain images, typography, <a href="#">quotes</a>, videos, text forms etc. or write here dummy text. </p>
			
            <h3>Post sub-heading here</h3>
			<p>Blog post content here which contain images, typography, <a href="#">quotes</a>, videos, text forms etc. or write here dummy text. </p>
            <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
            <pre><code>code block example here</code></pre>
			
            <p>Blog post content here which contain images, typography, <a href="#">quotes</a>, videos, text forms etc. or write here dummy text. </p>
			
            <h3>Again Sub-heading of post</h3>
            <p>Blog post content here which contain images, typography, <a href="#">quotes</a>, videos, text forms etc. or write here dummy text. </p>
            <ul>
              <li>post content here which contain images, typography, <a href="#">quotes</a>, videos, text content.</li>
              <li>post content here which contain images, typography, <a href="#">quotes</a>, videos etc.</li>
              <li>post content here which contain images, typography, <a href="#">quotes</a>, videos, text etc.</li>
            </ul>
            <p>Blog post content here which contain images, typography, quotes, videos, text forms etc. or write here dummy text.</p>
            <ol>
              <li>post content here which contain images, typography, <a href="#">quotes</a>, videos, text, graphics etc.</li>
              <li>post content here which contain images, typography, <a href="#">quotes</a>, videos, text content here.</li>
              <li>post content here which contain images, typography, <a href="#">quotes</a>, videos, text here.</li>
            </ol>
            <p>Blog post content here which contain images, typography, <a href="#">quotes</a>, videos, text forms etc. or write here dummy text. </p>
          </div>
		  
		  
		<div class="blog-post well">
            <h2 class="blog-post-title">Another blog post Heading</h2>
            <p class="blog-post-meta">January 22, 2014 by <a href="#">Anil</a></p>

            <p> Blog post content here which contain images, typography, quotes, videos, text forms etc. or write here dummy text. </p>
            
            <p>Blog post content here which contain images, typography, <a href="#">quotes</a>, videos, text forms etc. or write here dummy text. </p>
            <blockquote>
              <p>Lorem ipsum dummy content of quote<strong> bold line of quote here</strong> Lorem ipsum dummy content of quote</p>
            </blockquote>
            <p>Blog post<em>content</em> here which contain images, typography, quotes, videos, text forms etc. or write here dummy text.</p>
			
            		
            <p>Blog post content here which contain images, typography, <a href="#">quotes</a>, videos, text forms etc. or write here dummy text. </p>
			
            <h3>Again Sub-heading of post</h3>
            <p>Blog post content here which contain images, typography, <a href="#">quotes</a>, videos, text forms etc. or write here dummy text. </p>            
            
            <ol>
              <li>post content here which contain images, typography, <a href="#">quotes</a>, videos,  dummy text.</li>
              <li>post content here which contain images, typography, <a href="#">quotes</a>, videos, text here.</li>
              <li>post content here which contain images, typography, <a href="#">quotes</a>, videos, text, forms here.</li>
            </ol>
            <p>Blog post content here which contain images, typography, <a href="#">quotes</a>, videos, text forms etc. or write here dummy text. </p>
          </div>
		  
		  
		<ul class="pager pull-right">
            <li><a href="#">Previous</a></li>
            <li><a href="#">Next</a></li>
        </ul>
      	
		  
    </div><!-- End col-md-9 -->

		<div class="col-xs-12 col-sm-3 blog-sidebar " id="sidebar" role="navigation">
          
		  <div class="sidebar-module">
            <h4>About Us</h4>
            <p>WDR Template is<em> Bootstrap Responsive</em> layout of a wordpress blog. This can help for creating simple with responsive blog.</p>
          </div>
		  
		  <div class="list-group" >
			<a href="#" class="list-group-item active">
              <h4 class="list-group-item-heading">Categories   <span class="badge">8</span></h4>
            </a>
            <a href="#" class="list-group-item">Category 1</a>
            <a href="#" class="list-group-item">Category 2</a>
            <a href="#" class="list-group-item">Category 3</a>
            <a href="#" class="list-group-item">Category 4</a>
            <a href="#" class="list-group-item">Category 5</a>
            <a href="#" class="list-group-item">Category 6</a>
            <a href="#" class="list-group-item">Category 7</a>
            <a href="#" class="list-group-item">Category 8</a>
            
          </div>
		  
		  
		  <div class="sidebar-module">
            <h4>Archives</h4>
            <ul class="list-group">
              <li class="list-group-item"><a href="#">August 2014</a></li>
              <li class="list-group-item"><a href="#">July 2014</a></li>
              <li class="list-group-item"><a href="#">May 2014</a></li>
              <li class="list-group-item"><a href="#">April 2014</a></li>
              <li class="list-group-item"><a href="#">November 2013</a></li>
              <li class="list-group-item"><a href="#">October 2013</a></li>
              <li class="list-group-item"><a href="#">September 2013</a></li>
              <li class="list-group-item"><a href="#">August 2013</a></li>
              <li class="list-group-item"><a href="#">July 2013</a></li>
              <li class="list-group-item"><a href="#">June 2013</a></li>
              <li class="list-group-item"><a href="#">May 2013</a></li>
              <li class="list-group-item"><a href="#">April 2013</a></li>
			  <li class="list-group-item"><a href="#">March 2013</a></li>
            </ul>
          </div>
		  
		  <div class="sidebar-module">            
            <ul class="list-group">
			  <a href="#" class="list-group-item active">
				  <h4 class="list-group-item-heading">Recent Posts</h4>
			  </a>
              <li class="list-group-item"><a href="#">Post 1</a></li>
              <li class="list-group-item"><a href="#">Post 2</a></li>
              <li class="list-group-item"><a href="#">Post 3</a></li>
            </ul>
          </div>
		  
		  <div class="sidebar-module">            
            <ul class="list-group">
			  <a href="#" class="list-group-item active">
				  <h4 class="list-group-item-heading">Recent Comments</h4>
			  </a>
              <li class="list-group-item"><a href="#">Comment 1</a></li>
              <li class="list-group-item"><a href="#">Comment 2</a></li>
              <li class="list-group-item"><a href="#">Comment 3</a></li>
            </ul>
          </div>
		  
		  <div class="panel panel-danger">
            <div class="panel-heading">
              <h3 class="panel-title">Facebook Plugin</h3>
            </div>
            <div class="panel-body">
              Plugin part here
            </div>
          </div>
		  
    </div><!-- End col-md-3 -->
    </div><!--/row-->
 </div><!--/.container--> 
	
  <hr>
  
< /body >
< /html >
Step 5 : Create Footer part of WDR template.

Example : Create Footer part of WDR template

< !DOCTYPE html >
< html >
< head >
< meta charset=”UTF-8″ >
< meta name=”viewport” content=”width=device-width” >
< title > WDR Responsive Web Template < /title >
< link href=”css/bootstrap.css” rel=”stylesheet” >
< link href=”css/custom-style.css” rel=”stylesheet” >
< link href=”css/carousel.css.css” rel=”stylesheet” >
< script src=”js/jquery.min.js” > < /script >
< script src=”js/bootstrap.min.js” > < /script >
< !–[if lt IE 9] >
< script src=”https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js” > < /script >
< script src=”https://oss.maxcdn.com/respond/1.4.2/respond.min.js” > < /script >
< ![endif]– >
< /head >
< body >
<header>
	<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation" style="background:#444">
	  <div class="container">
	  
		<div class="navbar-header">
		  <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
			<span class="sr-only">Toggle navigation</span>
			<span class="icon-bar"></span>
			<span class="icon-bar"></span>
			<span class="icon-bar"></span>
			</button>
		  <a class="navbar-brand" href="#">WDR Template</a>
		</div><!-- End .navbar-header -->		

		<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
		  <ul class="nav navbar-right navbar-nav">
			<li class="dropdown">
			<a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="glyphicon glyphicon-search"></i></a>
			<ul class="dropdown-menu" style="padding:12px;">
				<form class="form-inline">					 
				<input type="text" class="form-control" placeholder="Search">  
				<button type="submit" class="btn btn-danger pull-right" style="padding:6px 30px; margin-top:10px;"><i class="glyphicon glyphicon-search"></i></button> 						
				</form>
		    </ul>
			</li>
			<li class="dropdown">
				<a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="glyphicon glyphicon-user"></i> <i class="glyphicon glyphicon-chevron-down"></i></a>
				<ul class="dropdown-menu">
				  <li><a href="#">Login</a></li>
				  <li><a href="#">Sign Up</a></li>
				  <li class="divider"></li>
				  <li><a href="#">Profile</a></li>
				 </ul>
			  </li>  
			</ul>
		  <ul class="nav navbar-nav navbar-right">
			<li class="active"><a href="#">Home</a></li>
			<li><a href="#">About</a></li>
			<li><a href="#">Contact</a></li>
			<li><a href="#">Portfolio</a></li>
			<li><a href="#">Blog    </a></li>        
		  </ul>     
		</div><!-- End.navbar-collapse -->
	  </div><!-- End .container -->
	</nav>
</header><!-- End header--> 

<div class="container" style="margin-top:66px !important;">
    <div class="row">
		<div class="col-xs-12 col-sm-9">          		
			<div id="myCarousel" class="carousel slide" data-ride="carousel" style="max-height:350px;">
			  <!-- Indicators -->
			  <ol class="carousel-indicators">
				<li data-target="#myCarousel" data-slide-to="0" class=""></li>
				<li data-target="#myCarousel" data-slide-to="1" class=""></li>
				<li data-target="#myCarousel" data-slide-to="2" class="active"></li>
			  </ol>
			  <div class="carousel-inner">
				<div class="item">
				  <img src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="First slide">
				  <div class="container">
					<div class="carousel-caption">
					  <h1>Web UI Interface With Responsive Features</h1>
					  <p>Paste dummy text which is related to caption heading.</p>
					  <p><a class="btn btn-sm btn-danger" href="#" role="button">Know More....</a></p>
					</div>
				  </div>
				</div>
				<div class="item">
				  <img src="data:image/gif;base64,R0lGODlhAQABAIAAAGZmZgAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Second slide">
				  <div class="container">
					<div class="carousel-caption">
					  <h1>Web Design With Bootstrap Ui Development Framework</h1>
					  <p>Paste dummy text which is related to caption heading.</p>
					  <p><a class="btn btn-sm btn-success" href="#" role="button">Know More....</a></p>
					</div>
				  </div>
				</div>
				<div class="item active">
				  <img src="data:image/gif;base64,R0lGODlhAQABAIAAAFVVVQAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Third slide">
				  <div class="container">
					<div class="carousel-caption">
					  <h1>Responsive Carousel Slider Example</h1>
					  <p>Paste dummy text which is related to caption heading.</p>
					  <p><a class="btn btn-sm btn-warning" href="#" role="button">Know More....</a></p>
					</div>
				  </div>
				</div>
			  </div>
			  <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
			  <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
			</div><!-- End #myCarousel -->
	
	    <div class="blog-header well">
        <h1 class="blog-title">WDR Template with Bootstrap Features.</h1>
        <p class="lead blog-description">Some attractive description of your Blog Here.</p>
		</div>
	
	    <div class="blog-post well">
            <h2 class="blog-post-title">Sample blog post Heading</h2>
            <p class="blog-post-meta">January 20, 2014 by <a href="#">Anil</a></p>

            <p>Blog post content here which contain images, typography, quotes, videos, text forms etc. or write here dummy text. </p>
            <hr>
            <p>Blog post content here which contain images, typography, <a href="#">quotes</a>, videos, text forms etc. or write here dummy text. </p>
            <blockquote>
              <p>Lorem ipsum dummy content of quote<strong> bold line of quote here</strong> Lorem ipsum dummy content of quote</p>
            </blockquote>
            <p>Blog post<em>content</em> here which contain images, typography, <a href="#">quotes</a>, videos, text forms etc. or write here dummy text.</p>
			
            <h2> Post Inner Heading in post</h2>
            <p>Inner heading content here which contain images, typography, <a href="#">quotes</a>, videos, text forms etc. or write here dummy text. </p>
			
            <h3>Post sub-heading here</h3>
			<p>Blog post content here which contain images, typography, <a href="#">quotes</a>, videos, text forms etc. or write here dummy text. </p>
            <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
            <pre><code>code block example here</code></pre>
			
            <p>Blog post content here which contain images, typography, <a href="#">quotes</a>, videos, text forms etc. or write here dummy text. </p>
			
            <h3>Again Sub-heading of post</h3>
            <p>Blog post content here which contain images, typography, <a href="#">quotes</a>, videos, text forms etc. or write here dummy text. </p>
            <ul>
              <li>post content here which contain images, typography, <a href="#">quotes</a>, videos, text content.</li>
              <li>post content here which contain images, typography, <a href="#">quotes</a>, videos etc.</li>
              <li>post content here which contain images, typography, <a href="#">quotes</a>, videos, text etc.</li>
            </ul>
            <p>Blog post content here which contain images, typography, quotes, videos, text forms etc. or write here dummy text.</p>
            <ol>
              <li>post content here which contain images, typography, <a href="#">quotes</a>, videos, text, graphics etc.</li>
              <li>post content here which contain images, typography, <a href="#">quotes</a>, videos, text content here.</li>
              <li>post content here which contain images, typography, <a href="#">quotes</a>, videos, text here.</li>
            </ol>
            <p>Blog post content here which contain images, typography, <a href="#">quotes</a>, videos, text forms etc. or write here dummy text. </p>
          </div>
		  
		  
		<div class="blog-post well">
            <h2 class="blog-post-title">Another blog post Heading</h2>
            <p class="blog-post-meta">January 22, 2014 by <a href="#">Anil</a></p>

            <p> Blog post content here which contain images, typography, quotes, videos, text forms etc. or write here dummy text. </p>
            
            <p>Blog post content here which contain images, typography, <a href="#">quotes</a>, videos, text forms etc. or write here dummy text. </p>
            <blockquote>
              <p>Lorem ipsum dummy content of quote<strong> bold line of quote here</strong> Lorem ipsum dummy content of quote</p>
            </blockquote>
            <p>Blog post<em>content</em> here which contain images, typography, quotes, videos, text forms etc. or write here dummy text.</p>
			
            		
            <p>Blog post content here which contain images, typography, <a href="#">quotes</a>, videos, text forms etc. or write here dummy text. </p>
			
            <h3>Again Sub-heading of post</h3>
            <p>Blog post content here which contain images, typography, <a href="#">quotes</a>, videos, text forms etc. or write here dummy text. </p>            
            
            <ol>
              <li>post content here which contain images, typography, <a href="#">quotes</a>, videos,  dummy text.</li>
              <li>post content here which contain images, typography, <a href="#">quotes</a>, videos, text here.</li>
              <li>post content here which contain images, typography, <a href="#">quotes</a>, videos, text, forms here.</li>
            </ol>
            <p>Blog post content here which contain images, typography, <a href="#">quotes</a>, videos, text forms etc. or write here dummy text. </p>
          </div>
		  
		  
		<ul class="pager pull-right">
            <li><a href="#">Previous</a></li>
            <li><a href="#">Next</a></li>
        </ul>
      	
		  
    </div><!-- End col-md-9 -->

		<div class="col-xs-12 col-sm-3 blog-sidebar " id="sidebar" role="navigation">
          
		  <div class="sidebar-module">
            <h4>About Us</h4>
            <p>WDR Template is<em> Bootstrap Responsive</em> layout of a wordpress blog. This can help for creating simple with responsive blog.</p>
          </div>
		  
		  <div class="list-group" >
			<a href="#" class="list-group-item active">
              <h4 class="list-group-item-heading">Categories   <span class="badge">8</span></h4>
            </a>
            <a href="#" class="list-group-item">Category 1</a>
            <a href="#" class="list-group-item">Category 2</a>
            <a href="#" class="list-group-item">Category 3</a>
            <a href="#" class="list-group-item">Category 4</a>
            <a href="#" class="list-group-item">Category 5</a>
            <a href="#" class="list-group-item">Category 6</a>
            <a href="#" class="list-group-item">Category 7</a>
            <a href="#" class="list-group-item">Category 8</a>
            
          </div>
		  
		  
		  <div class="sidebar-module">
            <h4>Archives</h4>
            <ul class="list-group">
              <li class="list-group-item"><a href="#">August 2014</a></li>
              <li class="list-group-item"><a href="#">July 2014</a></li>
              <li class="list-group-item"><a href="#">May 2014</a></li>
              <li class="list-group-item"><a href="#">April 2014</a></li>
              <li class="list-group-item"><a href="#">November 2013</a></li>
              <li class="list-group-item"><a href="#">October 2013</a></li>
              <li class="list-group-item"><a href="#">September 2013</a></li>
              <li class="list-group-item"><a href="#">August 2013</a></li>
              <li class="list-group-item"><a href="#">July 2013</a></li>
              <li class="list-group-item"><a href="#">June 2013</a></li>
              <li class="list-group-item"><a href="#">May 2013</a></li>
              <li class="list-group-item"><a href="#">April 2013</a></li>
			  <li class="list-group-item"><a href="#">March 2013</a></li>
            </ul>
          </div>
		  
		  <div class="sidebar-module">            
            <ul class="list-group">
			  <a href="#" class="list-group-item active">
				  <h4 class="list-group-item-heading">Recent Posts</h4>
			  </a>
              <li class="list-group-item"><a href="#">Post 1</a></li>
              <li class="list-group-item"><a href="#">Post 2</a></li>
              <li class="list-group-item"><a href="#">Post 3</a></li>
            </ul>
          </div>
		  
		  <div class="sidebar-module">            
            <ul class="list-group">
			  <a href="#" class="list-group-item active">
				  <h4 class="list-group-item-heading">Recent Comments</h4>
			  </a>
              <li class="list-group-item"><a href="#">Comment 1</a></li>
              <li class="list-group-item"><a href="#">Comment 2</a></li>
              <li class="list-group-item"><a href="#">Comment 3</a></li>
            </ul>
          </div>
		  
		  <div class="panel panel-danger">
            <div class="panel-heading">
              <h3 class="panel-title">Facebook Plugin</h3>
            </div>
            <div class="panel-body">
              Plugin part here
            </div>
          </div>
		  
    </div><!-- End col-md-3 -->
    </div><!--/row-->
 </div><!--/.container--> 
	
  <hr>
  
  <div class="container">
	<footer>
        <p class="pull-right"><a href="#">Back to top</a></p>
        <p>© 2014 WDR Template  <a href="#">Privacy</a>  <a href="#">Terms</a></p>
	</footer>  
  </div>
  
< /body >
< /html >
Step 6 : Css (custom-style.css) part of WDR template.

Example : Css part of WDR template


html {
  font-size: 10px;

  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.42857143;
  color: #333;
  background-color: #fff;
}
input,
button,
select,
textarea {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}
a {
  color: #428bca;
  text-decoration: none;
}
a:hover,
a:focus {
  color: #2a6496;
  text-decoration: underline;
}
a:focus {
  outline: thin dotted;
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px;
}

/* custom-style css start */
body{
background:#f0ad4e;
}

.sidebar-module-inset {
padding: 15px;
background-color: #f5f5f5;
border-radius: 4px;
}

.sidebar-module {
padding: 15px;
background-color: #f5f5f5;
border-radius: 4px;
margin: 0 -0px 15px;
}
< /body >
< /html >
Preview Download

Also Related to HTML5

 

Leave a Reply