Bootstrap Tutorial - What is Bootstrap?








Bootstrap is a front-end framework that helps developers to start the web development process.

Developers can concentrate on writing proper HTML, leaving the tricky CSS and JavaScript to Bootstrap.

All the CSS classes and JavaScript code needed are included in the Bootstrap package.

For example, using the class btn with link (<a class='btn'></a>) elements will make them appear like a button.

Additionally, using the btn-primary class with a link will make it a dark blue button.

<a href="http://www.java2s.com" class="btn btn-primary">Visit US</a>




Responsive

Bootstrap grid system can create a mobile-friendly and responsive website.

Bootstrap encapsulates many useful components that can be easily used in website projects.

With Bootstrap we can achieve the following:

  • faster development
  • organized and maintainable code
  • spend time on innovation rather than reinventing the wheel




Origins of Bootstrap

Bootstrap was developed in 2011.

Bootstrap 1.0.0 was launched in 2011 with only CSS and HTML components. There were no JavaScript plugins included in it until Bootstrap 1.3.0.

Bootstrap 2.0.0 was released in 2012. It was a complete rewrite of the Bootstrap library, and also became a responsive framework. Its components were compatible with all kinds of devices?mobiles, tablets and desktops?and lots of new CSS. JavaScript plugins were included in the package.

After 15 major updates, Bootstrap 3 in 2013 was another significant release, becoming a "Mobile First and always responsive" framework.

In the earlier versions of the framework, a responsive website was optional. In the 2013 release, there were changes in the names of the classes and also in the folder structure of the project.

Bootstrap 3 is not backward compatible. We cannot directly migrate to this version by replacing the core CSS and JavaScript files.

Bootstrap has a huge global community of developers who regularly contribute to its code base at GitHub.

Responsive Web Design

Responsive web design allows developers to create a website that can change its layout on different devices.

Developers can create a single design that works on any kind of device: mobiles, tablets, smart TVs, and PCs.

Sites designed responsively are generally fluid designs.

Using responsive web design, developers can create powerful web apps that replace native apps on platforms such as iOS and Android.

Bootstrap's Competition

There are many other popular frameworks that are competing with Bootstrap in the front-end framework arena.

Some of them are:

  • http://foundation.zurb.com/
  • http://semantic-ui.com/
  • http://gumbyframework.com/
  • http://purecss.io/