Bootstrap is a toolkit, which is developed by the Twitter team. This actually helps you to develop web applications much faster.Bootstrap contains CSS and Javascript files using which you can enrich your web page with Grids, Layouts, Typography, Tables, Forms, Navigation, Alerts etc,. This avoids cross browser compatibility problem. This time I am aiming to explain how to design a template of the basic fluid blog for different resolutions and devices like iPad and iPhone.
.
.
Try live demo with different resolutions or resize your browser to check fluid adjustments.
Download Script 
Live DemoDownload Twitter Bootstrap Project from https://github.com/twitter/bootstrap.
Bootstrap CSS
Just include two CSS file bootstrap.css and bootstrap-responsive.css. You can use github url too http://twitter.github.com/bootstrap/assets/css/bootstrap.css
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="assets/css/bootstrap.css" rel="stylesheet">
<link href="assets/css/bootstrap-responsive.css" rel="stylesheet">
</head>
<body>
// Webpage layout design.
</body>
</html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="assets/css/bootstrap.css" rel="stylesheet">
<link href="assets/css/bootstrap-responsive.css" rel="stylesheet">
</head>
<body>
// Webpage layout design.
</body>
</html>
Bootstrap JavaScript
Include the following JavaScript files and Place them at the end of the document.this will make the page load faster.
<script src="assets/js/jquery.js"></script>
<script src="assets/js/bootstrap-transition.js"></script>
<script src="assets/js/bootstrap-alert.js"></script>
<script src="assets/js/bootstrap-modal.js"></script>
<script src="assets/js/bootstrap-dropdown.js"></script>
<script src="assets/js/bootstrap-scrollspy.js"></script>
<script src="assets/js/bootstrap-tab.js"></script>
<script src="assets/js/bootstrap-tooltip.js"></script>
<script src="assets/js/bootstrap-popover.js"></script>
<script src="assets/js/bootstrap-button.js"></script>
<script src="assets/js/bootstrap-collapse.js"></script>
<script src="assets/js/bootstrap-carousel.js"></script>
<script src="assets/js/bootstrap-typeahead.js"></script>
<script src="assets/js/bootstrap-transition.js"></script>
<script src="assets/js/bootstrap-alert.js"></script>
<script src="assets/js/bootstrap-modal.js"></script>
<script src="assets/js/bootstrap-dropdown.js"></script>
<script src="assets/js/bootstrap-scrollspy.js"></script>
<script src="assets/js/bootstrap-tab.js"></script>
<script src="assets/js/bootstrap-tooltip.js"></script>
<script src="assets/js/bootstrap-popover.js"></script>
<script src="assets/js/bootstrap-button.js"></script>
<script src="assets/js/bootstrap-collapse.js"></script>
<script src="assets/js/bootstrap-carousel.js"></script>
<script src="assets/js/bootstrap-typeahead.js"></script>
Download bootstrap asserts Click Here
Grids
This is the Grid System using Twitter Bootstrap, it supports 940px wide 12 column Grids. The span1 class has a width of 40px.
Layout
The page container div is divided into two parts consisting of one main area span8 for articles and a sidebar span4 for other information. Here I have applied row-fluid class.This is for responsive design and multiple resolutions for devices.It makes auto re-sizing of the divs and images easily possible .
<div class="container">
<div class="row-fluid">
<div class="span8">
// Main Part
</div>
<div class="span4">
// Sidebar Part
</div>
</div>
</div>
<div class="row-fluid">
<div class="span8">
// Main Part
</div>
<div class="span4">
// Sidebar Part
</div>
</div>
</div>
The above code layout wireframe.
Main Part
Here the articles feed list contains title, description and image. Here btn is the class of the read more button.
<div class="span8">
// Main Part
<div class="row">
// Articles Loop
<div class="span7">
<h2>Article Title.</h2>
<p>Article Description.</p>
<p><img src='ArticleImage.png' class="row-fluid"></p>
<p><a class="btn" href="#">Read More »</a></p>
</div>
</div>
// Articles Loop End
</div>
</div>
// Main Part
<div class="row">
// Articles Loop
<div class="span7">
<h2>Article Title.</h2>
<p>Article Description.</p>
<p><img src='ArticleImage.png' class="row-fluid"></p>
<p><a class="btn" href="#">Read More »</a></p>
</div>
</div>
// Articles Loop End
</div>
</div>
For different color buttons just apply below class names.
Sidebar
This block for author information, widgets, recent posts and other stuff.
<div class="span4 ">
// Sidebar Part
<div class="well sidebar-nav">
<ul class="nav nav-list">
<li class="nav-header">About Me</li>
<li>Author Data</li>
<li class="nav-header">Recent Posts</li>
<li>link1</li>
<li>link1</li>
<li>link1</li>
<li class="nav-header">Advertisements</li>
<li>ad1</li>
<li>ad2</li>
</ul>
</div>
</div>
// Sidebar Part
<div class="well sidebar-nav">
<ul class="nav nav-list">
<li class="nav-header">About Me</li>
<li>Author Data</li>
<li class="nav-header">Recent Posts</li>
<li>link1</li>
<li>link1</li>
<li>link1</li>
<li class="nav-header">Advertisements</li>
<li>ad1</li>
<li>ad2</li>
</ul>
</div>
</div>
Navbar
Fixed top menu navigation bar.
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
// Iphone View Menu Button
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="#">9LESSONS.info</a>
<div class="nav-collapse">
<ul class="nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Tutorials</a></li>
<li><a href="#">Demos</a></li>
</ul>
</div>
</div>
</div>
<div class="navbar-inner">
// Iphone View Menu Button
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="#">9LESSONS.info</a>
<div class="nav-collapse">
<ul class="nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Tutorials</a></li>
<li><a href="#">Demos</a></li>
</ul>
</div>
</div>
</div>
Normal view for high resolution.
Mobile view collapsed menus list.
A very nice post with great explanation. I Liked it.
thanks so much...
very nice man!!
AWESOME THANKS :)
nice one Srinivas.. there was a problem in while viewing on ie6..
Great! Thank you very much
Nice 1
Nice !
I study for a few days until want to give up to use then come up this great article to inspire me...Awesome Thanks:)
nice........!
Yes i likei it
nice
Nice , ya lo conocia haces algunis meses este framework , gracias por le tutorial igualmente ;)
look nice.., will try:)
on the nav bar can you please to create a drop down list? when i tried to make one it just break the design while loading with ipad.
Wonderful! Thanks for your great job!
Great job by the twitter guys. Thanks for sharing and letting use know about such an awesome work.
Thanks Srinivas nice article, you have covered almost everything briefly. I just share another resource seems good.
http://www.w3resource.com/twitter-bootstrap/tutorial.php
awesome.
really informative post frnd...thanks a lot for sharing....
great post .....this blog is the best blog I see..
again, i get more from you...thank you
Thank you all, next part application design using bootstrap.
I think this is the simplest bootstrap tutorial I found. Great. I like basic simplicity. But there is one detail missing. For the navbar to be fixed to the top without margin, and the body not to creep under the navbar, there needs to be a style definition or body with padding-top of 60px between the two bootstrap.css and bootstrap-responseve.css links.
Great! Thank you very much...awesome.
good .. I am not from hard core coding proffession but its my desire to learn coding as PHP .. oracle etc let see ...
Thanks for sharing, this is totally great article, I will open view your site at any time.
Hi how can we dynamically load content into the tabs?
India is now the hub of Information Technology or IT. There has never been a time when India was seen as an industrial hub. It is due to the boom and bloom of Information Technology that India is gaining a foothold in the global markets. And this is a good thing because this will only increase giving India a position as a global leader. It feels proud to see so many technological inventions being made by Indians like you. Salute!
Divya Bhaskar
MyGrahak.com
great post ... thnx ^^
thnx...good post..Its really helpful...!!!
I am impressed by this awesome site to me, i am impressed by this unique and inspirational to me.
awesome! its really helpful for me
thanks!
excellent
very well explained, thank you, could you possibly do a more indepth tute?
This ia not perfectly view in my browser sgs2.
here the ss http://imm.io/p9eX
but in landscape is workly good in portrait not good :-(
thanks for sharing, really helpful
mast hai dude!!!!!!1
download bootstrap with docs from the official site. there is a basic file in the examples to get you started. hope this info helps
/P
Your tutorial is great! I write something similar and maybe someone find it helpfull, too:
Blank Template and Twitter Bootstrap Tutorial for Joomla!
http://blank.vc/blog.html/19-blank-template-and-twitter-bootstrap-tutorial-for-joomla.html
Thanks for sharing.
Thank You For The Great Tutorial
responsive is not working in Chrome
nice :)
we want more tutorial on bootstrap
We're working hard to make Bootstrap even easier to learn by automatically generating the HTML and CSS in a drag-and-drop interface builder called Divshot (http://divshot.com). Check it out!
nice...
Hi in demo page layout show not aligned!!!
many many thanks...