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

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



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
2. Games Site

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.



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
3. Social App

In this example, we have designed Social App Website with step by step procedure.



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

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.

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

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.

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

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.

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.