Bootstrap Tutorial

What is Bootstrap?

Bootstrap is considered as the collection of the tools of HTML, CSS and JavaScript. Bootstrap is used to create web based applications. Bootstrap is also used to build responsive web applications. Bootstrap provides a powerful framework for the development of web based applications and flexible web layouts. We can also design user interface components and JavaScript extensions. Bootstrap is supported by all the latest browsers. Bootstrap is easy to use that a person who only has knowledge of HTML and CSS only can also use bootstrap. Bootstrap is open source project which can be downloaded for free and can also be used for free. Bootstrap was originally designed for mobile first web applications by Twitter.

The main advantage of bootstrap is the flexibility that it provides. Bootstrap became popular because web developers and web designers can easily use it and is also compatible with various browsers. The development of web applications by using bootstrap has become very easy and the developer now does not have to worry.

Bootstrap can be used with any editor of integrated development environment that is IDE. Bootstrap has two main forms that are precompiled version and source code version.

History of Bootstrap:

Bootstrap was developed by Mark Otto and Jacob Thornton at Twitter in mid-2010. The old name of Bootstrap is Twitter Blueprint. Bootstrap was developed as a framework. Bootstrap has templates of HTML and CSS. As an open source project, bootstrap was released in 2011 on GitHub.

Why use Bootstrap?

The following are some of the reasons why bootstrap is used:

Browser support:

Bootstrap is supported by all the latest browsers which may include opera, fire fox, chrome, etc.


Using bootstrap we can craft a responsive and mobile ready site. A website that has grid layout is when opened in a mobile device; the screen resolution will be affected, but if we use Bootstrap, this problem can be resolved as using bootstrap columns etc. can be identified on mobile devices. The web pages can be adjusted to desktop, tablet and mobiles.

Mobile first approach:

The framework of bootstrap contains mobile first styles.

Development Speed:

Through bootstrap we can code by using ready made coding blocks which increases the development speed.


Bootstrap provides flexibility to develop websites. Bootstrap is considered as a framework of CSS and it contains already defined classes for the layout of websites by using the grid system and the components of CSS and also JavaScript functions. This is the reason why bootstrap is flexible for development of websites.


Bootstrap provides facility to the developers to choose their own features. This can be done by using the Bootstrap customize page.

What Bootstrap page include?

The following are some of the things that are included into a bootstrap package:

  1. The basic structure of bootstrap includes a grid system, link styles and background.
  2. Bootstrap has the features of CSS and the elements of HTML and a grid system for layouts. Bootstrap also provides extensible classes.
  3. We have a number of reusable components in bootstrap. These components can be used to provide drop down, navigation, alerts, etc.
  4. Bootstrap has certain JavaScript plugins. These can be inserted easily one by one.

The components of bootstrap can be customized according to our need by inserting less number of variables and we can also insert jQuery plugins.