Monday, July 16, 2012

Bootstrap Tutorial to design a Simple Blog - Updated

Bootstrap is a web design Toolkit, developed by Twitter. It has predefined CSS and javascript files to help you develop Web Applications faster. It includes Grids, Layouts, Typography, Tables, Forms, buttons, alerts, popovers etc. In this tutorial we have explained how to design a Simple Blog Template using Bootstrap.
Update : Its been Made Better, enjoy !!

  Bootstrap CSS  

Simply include the two CSS files bootstrap.css and bootstrap-responsive.css, or you can also link them directly from github project using the link,

  Bootstrap JavaScript  

Bootstrap has different javascripts for different functions, so whatever you want to add in your Webpage, you can include respective javascripts too. Place all the javascript files required at the end of the document, this will make the page load faster.

<script src="js/jquery.js"></script>
<script src="js/bootstrap-transition.js"></script>
<script src="js/bootstrap-alert.js"></script>
<script src="js/bootstrap-modal.js"></script>
<script src="js/bootstrap-dropdown.js"></script>
<script src="js/bootstrap-scrollspy.js"></script>
<script src="js/bootstrap-tab.js"></script>
<script src="js/bootstrap-tooltip.js"></script>
<script src="js/bootstrap-popover.js"></script>
<script src="js/bootstrap-button.js"></script>
<script src="js/bootstrap-collapse.js"></script>
<script src="js/bootstrap-carousel.js"></script>
<script src="js/bootstrap-typeahead.js"></script>


Bootstrap provides a grid system, which supports 940px and 12 columns. We use span8 for the main content area and span4 for the sidebar. You can also add row-fluid class instead of class row, to make the whole design auto-resizing for different platforms, like Mobile phone browsers, iPad browser etc.

<div class="container">
<div class="hero-unit">
//Include logo of blog and description
<div class="row">
<div class="span8">
// Main Part containing Posts
<div class="span4">
// Sidebar Part

  Main Part  

The main part holds the Posts of the Blog, Post title, description, image and link. In the below code btn is the class for Read more buttons.

<div class="span8">
// Main Part starts from here
<div class="row">
// Articles body
<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>
// Articles body End

For different buttons just use the below class names.


This part is to hold, various widgets of a Blog, like Popular Post, recent Posts, Social Media Buttons and Author Information. We have just included Author information and the Social Media Buttons.

<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 class="nav-header">Advertisements</li>

  Navigation Bar  

This is the fixed top navigation bar, holding the Navigation Menu and the Blog's Name.

<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<a class="brand" href="#">WTFD Network</a>
<div class="nav-collapse">
<ul class="nav">
<li class="active"><a href="#">Tuts</a></li>
<li><a href="#">Apps List</a></li>
<li><a href="#">FB Wall Script</a></li>             

  Introducing Popover  

We have even inserted a Popover at the FB Wall Script menu option in the navigation bar.

<a href="#" id="example" rel="popover" data-content="enter the Description here" data-original-title="Title for the popover here">FB Wall Script</a>
$(function ()
{ $("#example").popover({placement:'bottom'});

  Introducing Dropdown  

We have even inserted a DropDown Menu in the navigation bar to include more sub-options.

<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">More <b class="caret"></b></a>
<ul class="dropdown-menu">
<li class="nav-header">Heading 1</li>
<li><a href="#">sub-option1</a></li>
<li><a href="#">sub-option2</a></li>
<li class="divider"></li>
<li class="nav-header">Heading 2</li>
<li><a href="#">sub-option1</a></li>
<li><a href="#">sub-option2</a></li>

  Search Box in Navigation Bar  

We have even inserted a Search Box too in the navigation bar.

<form class="navbar-search pull-right" action="">
<input type="text" class="search-query span3" placeholder="Search">


  1. Thanks for sharing this valuable information to our vision. You have posted a trust worthy blog keep sharing.
    Web design training Chennai

  2. Hello Admin, thank you for enlightening us with your knowledge sharing. PHP has become an inevitable part of web development, and with proper PHP course in Chennai, one can have a strong career in the web development field.