Bootstrap Tutorial for Blog Design.
Wall Script
Wall Script
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
web notification

51 comments:

  1. Rakesh SharmaMarch 19, 2012 at 2:54 AM

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

    ReplyDelete
  2. AnonymousMarch 19, 2012 at 4:18 AM

    thanks so much...

    ReplyDelete
  3. AnonymousMarch 19, 2012 at 4:20 AM

    very nice man!!

    ReplyDelete
  4. AnonymousMarch 19, 2012 at 4:41 AM

    AWESOME THANKS :)

    ReplyDelete
  5. KathirMarch 19, 2012 at 8:13 AM

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

    ReplyDelete
  6. AnonymousMarch 19, 2012 at 8:13 AM

    Great! Thank you very much

    ReplyDelete
  7. Virendra RajputMarch 19, 2012 at 9:00 AM

    Nice 1

    ReplyDelete
  8. d3vMarch 19, 2012 at 9:16 AM

    Nice !

    ReplyDelete
  9. AnonymousMarch 19, 2012 at 10:53 AM

    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
  10. AnonymousMarch 19, 2012 at 12:53 PM

    Yes i likei it

    ReplyDelete
  11. AnonymousMarch 19, 2012 at 1:27 PM

    nice

    ReplyDelete
  12. Brayan CrucesMarch 19, 2012 at 5:38 PM

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

    ReplyDelete
  13. dedy-designMarch 19, 2012 at 10:50 PM

    look nice.., will try:)

    ReplyDelete
  14. RaazMarch 20, 2012 at 12:15 AM

    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
  15. douméMarch 20, 2012 at 5:51 AM

    Wonderful! Thanks for your great job!

    ReplyDelete
  16. HrishikeshMarch 20, 2012 at 12:06 PM

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

    ReplyDelete
  17. AnonymousMarch 20, 2012 at 12:13 PM

    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
  18. AnonymousMarch 21, 2012 at 5:42 AM

    awesome.

    ReplyDelete
  19. Display nameMarch 22, 2012 at 10:28 AM

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

    ReplyDelete
  20. fuad indraMarch 24, 2012 at 6:30 AM

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

    ReplyDelete
  21. ImanNurrahmanMarch 26, 2012 at 12:45 AM

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

    ReplyDelete
  22. Srinivas TamadaMarch 27, 2012 at 2:24 AM

    Thank you all, next part application design using bootstrap.

    ReplyDelete
  23. BigDMarch 27, 2012 at 11:26 AM

    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
  24. RajMarch 28, 2012 at 5:20 AM

    Great! Thank you very much...awesome.

    ReplyDelete
  25. ryscriptMarch 29, 2012 at 12:32 AM

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

    ReplyDelete
  26. jayApril 1, 2012 at 2:55 PM

    Hi how can we dynamically load content into the tabs?

    ReplyDelete
  27. MyGrahakApril 3, 2012 at 10:02 PM

    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
  28. جملةApril 7, 2012 at 8:20 AM

    great post ... thnx ^^

    ReplyDelete
  29. AnonymousApril 10, 2012 at 1:38 AM

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

    ReplyDelete
  30. Faceook Application DeveloperApril 12, 2012 at 3:54 AM

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

    ReplyDelete
  31. Obat Anti RokokApril 16, 2012 at 12:32 AM

    awesome! its really helpful for me
    thanks!

    ReplyDelete
  32. AnonymousApril 17, 2012 at 8:18 AM

    excellent

    ReplyDelete
  33. ChrisMay 3, 2012 at 2:35 PM

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

    ReplyDelete
  34. asem asemMay 13, 2012 at 4:42 AM

    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
  35. ekkarachMay 13, 2012 at 12:00 PM

    thanks for sharing, really helpful

    ReplyDelete
  36. sheetal vermaMay 22, 2012 at 2:55 AM

    mast hai dude!!!!!!1

    ReplyDelete
  37. AnonymousJune 2, 2012 at 12:06 AM

    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
  38. AnonymousJune 4, 2012 at 9:18 AM

    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
  39. AnonymousJune 12, 2012 at 1:24 PM

    Thank You For The Great Tutorial

    ReplyDelete
  40. ShrikantJuly 5, 2012 at 6:58 AM

    responsive is not working in Chrome

    ReplyDelete
  41. AnonymousJuly 6, 2012 at 5:08 AM

    nice :)

    ReplyDelete
  42. UnknownAugust 22, 2012 at 11:29 PM

    we want more tutorial on bootstrap

    ReplyDelete
  43. JakeAugust 28, 2012 at 1:05 AM

    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
  44. AnonymousOctober 26, 2012 at 2:00 AM

    nice...

    ReplyDelete
  45. AnonymousNovember 4, 2012 at 8:48 AM

    Hi in demo page layout show not aligned!!!

    ReplyDelete
  46. rafiq islamFebruary 19, 2013 at 2:23 PM

    many many thanks...

    ReplyDelete
  47. VishalJune 13, 2013 at 1:18 AM

    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
  48. AnonymousJune 18, 2013 at 9:45 AM

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

    ReplyDelete
  49. AnonymousAugust 13, 2013 at 4:45 AM

    very helpful, nice job. keep up

    ReplyDelete
  50. AnonymousSeptember 24, 2013 at 9:33 AM

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

    ReplyDelete
  51. VijayNovember 30, 2013 at 5:51 AM

    Thank you Srinivas

    ReplyDelete

Most Popular Posts

mailxengine Youtueb channel
Facebook and Google Login
Make in India
X