Responsive Web Template Using Bootstrap Tutorial: In this post learn how to design responsive web template using bootstrap tutorial. Responsive website design tutorial using bootstrap. Follow and Like us on Facebook, Twitter, LinkedIn, Pinterest for the latest posts.
Responsive Web Template Using Bootstrap Tutorial
Here is a simple example of responsive web template design using the bootstrap tutorial
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 >
< html >
< head >
< meta charset=”UTF-8″ >
< title > WDR Responsive Web Template < /title >
< /head >
< body >
< /body >
< /html >
Example : Include meta viewport tag
<
meta name=”viewport” content=”width=device-width, initial-scale=1.0″/
>
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 >
< 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 >
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 >
< /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 >
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 >
< /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 >
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 >
< /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 >
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 >
Web Design Reference Guide Android App for Website Developers
Web Design Reference Guide Android App: Web Design Tutorial App is a tutorial and reference-based app. It provides Web Design Tutorial and Reference to Web Designers or Web Developers to grow their Web Development skills.
Other Related Posts
- HTML Tutorial – Learn How to Design an HTML Page
- Six Proven Ways to Earn Money from a Blog | Web Design Reference
- 24 Easy and Free SEO Tools to Improve Your Marketing
- CSS3 Gradient Tutorial and CSS3 Gradient Reference
- HTML Form Validation Using JavaScript Tutorial
- Google Fonts Implementation Guide – How to use Google Fonts
- Responsive Web Template Using Bootstrap Tutorial
- Responsive Web Template Tutorial Using Media Queries
- Learn Basic HTML5 Concept – HTML5 Reference Guide