Responsive Web Template Using Bootstrap Tutorial

Published on: October 29, 2014   Last Updated on : January 9, 2018   Posted By : WebDesignReference


Responsive Web Template Using Bootstrap Tutorial and 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

Author: WebDesignReference

I am a Senior Web Designer.

 

Leave a Reply