Twitter Bootstrap - Tutorial

Bootstrap is one of the most advanced front end framework in the world. It offers lot of html, css and javascript plugins for creating websites.

This tutorial is divided into three sections such as bootstrap grid system, basic components and JS components.

In this twitter bootstrap tutorial, I am going to use real time examples to make it easier for beginners. I will explain every step in detail, even a complete beginner can become a professional with in few days.

1. Beginners - Bootstrap Tutorial

Grid System

Boostrap offers responsive and mobile first fluid grids. Bootstrap has set of pre-defined grid sizes for screens and main devices. It will suddenly change the grid size while you resizing the browser width.

Bootstrap grid use 12 columns making for a 940 px wide container without responsive. If responsive feature added, the grid adapts to be 724 px and 1170 px wide based on view port.

It provides all the features of grid system such as nesting, offset and source ordering.

1. Offset: It allows user to create extra space between columns in a row using classes like .large-offset-3 and .small-offset-4.

2. Nesting: Bootstrap grid allows nesting your content with default grid. You can create complex grid by using nested grid.

3. Ordering: In source ordering, we can easily change order of grids by using col-md-push-* and col-md-pull-* classes.

Bootstrap Components

Bootstrap offers lot of components to develop website without huge amount of code.

1. Dropdowns: Dropdown Component creates contextual menus with list of links using dropdown plug-in. Dropdown is triggered by dropdown class. Dropdown automatically aligned left top of the screen. .dropdown-menu-right class aligns menu to right side of the screen.

2. Button Group: Button Group merges series of buttons on a single line using .btn and .btn-group classes. We can adjust size of button by using btn-group-lg, btn-group-sm and btn-group-xs classes. .btn-group allows nesting properties that means a class inserted into anoter .btn-group. .btn-group vertically aligned by btn-group-vertical class and justified by btn-group-justified class.

3. Button Dropdown: Button dropdown is created by btn-group and dropdown plugins.

4. Navs: Navs are used to create navigation frome one page to another using .nav class.

5. Thumbnails: Thumbnail component used to show grids of images, videos, text, and more.

6. Progress Bars: Bootstrap offers feedback on the progress of a workflow with simple flexible progress bars.

7. List Groups: List group displays styled list of elements with complex content.

8. Panel: List group displays styled list of elements with complex content.


Bootstrap JS Components

This section covers JS components of bootstrap with simple example.

1. Modal: In modal, Twitter Bootstrap provides pop-up windows or modal dialogs by using modal.js.

2. Collapse: This element used to expand and collapse content using collapse.js file.

3. Carousal: Carousal is used for creating responsive image or content slider with effective manner using carousal.js file.


2. Twitter Bootstrap - Step by Step Examples

In this section, 3 websites will be created with different components. You will learn how to create complex websites using Twitter Bootstrap framework with the help of 3 real time websites.

Download Bootstrap Framework before reading the following chapters.

Take a look at the sample websites used in this section below. Click on the link to visit the sample websites.

  1. Tourist Spots Website
  2. In this example, we have designed Tourist Spot Website with step by step procedure. Here we have used carousal, collapse and modal elements.

    Twitter Bootstrap Framework - Tourist Spot Site Screenshot

    We explained this website by following steps.

    1. Creating Home Page
    2. Creating Service Page
    3. Creating About Us Page
    4. Creating FAQ Page
    5. Creating Contact Us Page
    6. Completing Website
  3. Games Site
  4. In this example, we have designed Game Site Website with step by step procedure. Here we have used carousal, collapse, image panel, different features of grid and modal elements.

    Twitter Bootstrap Framework - Game Site Site Screenshot

    We explained this website by following steps.

    1. Creating Home Page
    2. Creating Browse Game Page
    3. Creating About Us Page
    4. Creating Contact Us Page
    5. Completing Website
  5. Social App
  6. In this example, we have designed Social App Website with step by step procedure.

    Twitter Bootstrap Framework - Tourist Spot Site Screenshot

    We explained this website by following steps.

    1. Creating Home Page
    2. Creating Login Page
    3. Completing the Website

3. Bootstrap Advanced Tutorial

3.1 Free Bootstrap Snippets

Boostrap snippets is a gallery of twitter bootstrap components. In this section, we offer different bootstrap snippets for bootstrap components.

3.2 Creating Bootstrap Template

In this section, we are going to explain about creating bootstrap templates using bootstrap components with step by step procedure.

We are going to explain this tutorial by following steps.

  • Creating empty Template
  • Adding Layout
  • Finishing the Template
Twitter Bootstrap Template
3.3 Developing wordpress theme with Bootstrap

In this section, we are going to develop wordpress theme using twitter bootstrap. To create a simple Wordpress theme, just 4 files are enough named as header.php, index.php, footer.php and style.css.

Twitter Bootstrap Wordpress Theme
3.4 Adding Bootstrap Plugins

Bootstrap comes with 12 jquery plugins which can be added into your site by 2 ways such as individual js file or compiled(all at once) file. In this section, we are going to create new plugins and ad-ons using bootstrap components.

3.5 Working in Bootstrap with LESS

In this section, we are going to explain Bootstrap with LESS. Bootstrap offer Source Code for your LESS powered application.

4. Bootstrap Video Tutorials

S.No. Title Duration Link
1 Twitter Bootstrap Downloading Methods 02:16 View
2 Creating Bootstrap Template 01:55 View
3 Bootstrap with LESS 06:02 View

5. Evolution of Twitter Bootstrap

Boostrap was developed as open source by Twitter developer Mark Otto and Jacob in August 2011. It needs different libraries for interface development, which led to inconsistencies and high maintenance.

Twitter was released Bootsrap 2.0 in February 2012, which has support reponsive web design functionality. In August 2013, Twitter was released another major version Bootstrap 3.0. It adopted mobile first approach, better error handling and more goodies for developers.

6. Other Bootstrap Tutorials

There are many websites offer tutorial in bootstrap. Here, we listed few other twitter bootstrap tutorials.

1. Bootstrap 3 Tutorial

It provides all general components with online examples by w3schools. But it not cover Bootstrap JS components.

2. Twitter Bootstrap Tutorial -An ultimate guide for beginners

This tutorial covers all basic and advanced components with many online examples. It offers bootstrap button generator for generating bootstrap buttons with different styles intantly.

3. Boostrap Tutorial

This tutorial is very useful to both beginners and advanced users. It teach us how to create web templates and ecommerce templates using bootstrap framework

7. Useful Resources

  • Bootstrap Themes: Lots of nice free template designs for your next project.
  • Bootint:Bootint is a html linter tool that checks common html mistakes in webpages.
  • Bootsrap Documents: All the Components with example are explained in detailed in this section.
  • Discussion: It is official bootstrap blog which mananged by Mark Otto.
  • Button Generator: It gives different type of button code by selecting that button.
  • Resources: Different kinds of bootstrap resources are available here.
  • Add-ons & Showcases: Lot of bootstrap blugins are available here.
comments powered by Disqus