Bootstrap Tutorial for Blog Design.
Wall Script
Follow Me:
Monday, March 19, 2012

Bootstrap Tutorial for Blog Design.

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.
.

Bootstrap Tutorial

Try live demo with different resolutions or resize your browser to check fluid adjustments.

Download Script     Live Demo

Download 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>

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>

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.
Bootstrap Tutorial

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>

The above code layout wireframe.
Bootstrap Blog Design Tutorial

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>

For different color buttons just apply below class names.
Bootstrap buttons

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>

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>

Normal view for high resolution.
Bootstrap buttons

Mobile view collapsed menus list.
Bootstrap buttons
Was this article helpful?
Thanks! Your feedback helps us to improve 9lessons.info


53 comments:

  1. A very nice post with great explanation. I Liked it.

    ReplyDelete
  2. thanks so much...

    ReplyDelete
  3. very nice man!!

    ReplyDelete
  4. AWESOME THANKS :)

    ReplyDelete
  5. nice one Srinivas.. there was a problem in while viewing on ie6..

    ReplyDelete
  6. Great! Thank you very much

    ReplyDelete
  7. I study for a few days until want to give up to use then come up this great article to inspire me...Awesome Thanks:)

    ReplyDelete
  8. Nice , ya lo conocia haces algunis meses este framework , gracias por le tutorial igualmente ;)

    ReplyDelete
  9. 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.

    ReplyDelete
  10. Wonderful! Thanks for your great job!

    ReplyDelete
  11. Great job by the twitter guys. Thanks for sharing and letting use know about such an awesome work.

    ReplyDelete
  12. 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

    ReplyDelete
  13. really informative post frnd...thanks a lot for sharing....

    ReplyDelete
  14. great post .....this blog is the best blog I see..

    ReplyDelete
  15. again, i get more from you...thank you

    ReplyDelete
  16. Thank you all, next part application design using bootstrap.

    ReplyDelete
  17. 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.

    ReplyDelete
  18. Great! Thank you very much...awesome.

    ReplyDelete
  19. good .. I am not from hard core coding proffession but its my desire to learn coding as PHP .. oracle etc let see ...

    ReplyDelete
  20. Thanks for sharing, this is totally great article, I will open view your site at any time.

    ReplyDelete
  21. Hi how can we dynamically load content into the tabs?

    ReplyDelete
  22. 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

    ReplyDelete
  23. thnx...good post..Its really helpful...!!!

    ReplyDelete
  24. I am impressed by this awesome site to me, i am impressed by this unique and inspirational to me.

    ReplyDelete
  25. awesome! its really helpful for me
    thanks!

    ReplyDelete
  26. very well explained, thank you, could you possibly do a more indepth tute?

    ReplyDelete
  27. 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 :-(

    ReplyDelete
  28. thanks for sharing, really helpful

    ReplyDelete
  29. 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

    ReplyDelete
  30. 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.

    ReplyDelete
  31. Thank You For The Great Tutorial

    ReplyDelete
  32. responsive is not working in Chrome

    ReplyDelete
  33. 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!

    ReplyDelete
  34. Hi in demo page layout show not aligned!!!

    ReplyDelete
  35. I am web developer based in Mangalore,Karnataka. I have just started learning bootstrap when I found this tutorial.

    It was very helpful and I am planning to redesign my sites in Bootstrap.

    ReplyDelete
  36. Really Useful Site . I bet Websites building is a lot easier for me now. Thanks. It is very helpful.

    ReplyDelete
  37. ya i learned with the concept
    and i like ur concept of showing this visually

    ReplyDelete

Make in India