Twitter Bootstrap is the most popular and free front-end development framework. Bootstrap is really very interesting and help web designers to create website very easily and provide lots of feature. Bootstrap is fully loaded with latest features of HTML, CSS and Javascript and make your website more responsive.

bootstrap
Live Demo
 

What is Bootstrap?

Twitter Bootstrap is a css framework to design full responsive websites and web applications. Bootstrap is easy to learn and it require basic knowledge of css and html. Twitter Bootstrap has already written a CSS style sheet for you, and have inbuilt jQuery support and also has some popular JavaScript tools.

In this tut i will explain you that how you can use twitter bootstrap and create a responsive layout for your website or web  applications.

Getting Started

To start using bootstrap you need to get your bootstrap from official website http://getbootstrap.com/. You can also use Bootstrap CDN if you like to use

Now Let get start creating or first template using bootstrap. Unzip your downloaded bootstrap file it contain both minimized and non minimized version. We will use the minimized version for making the site faster when the design has been finalized and the project is ready for the launch. Create new html file to make design using bootstrap. Now i am going to use Bootstrap CDN to import css to my html file.

First we create simple html structure in our html file

Now in this we are going to create a simple layout for our website which contain Header, Navigation Bar, A place for Gallery, Main content, Side bar and Footer.

Now First we can create a Header section in our template. In header section we can add our navigation by default twitter bootstrap have two class which contain header bar color

1. { .navbar-default } to display light background.

2. { .navbar-inverse } to display black background.

you also add your own background color if you like. Now if we want to align our navigation bar in the center we can use {.container} class  in side our navigation bar. Inside container  we use some predefined twitter bootstrap classes to create our navigation menu  and i also add button in header section to display responsive menu on small devices.

Bootstrap Header:

I also rewrite and add some new classes in the header to make new look for my header

Now i add gallery slider to my bootstrap template i am using default bootstrap gallery plugin you need to add some line of css  and html for that for more take a look at the sample  here.

After adding gallery we create two box one for description and other for banner, image etc. I am using bootstrap {.featurette} class to do this you can check out live demo from above demo link. Stay tuned to know more about bootstrap.

 

Thanku.

Happy coading.