Bootstrap Introduction

Here we will learn what Bootstrap is, why we need it, and how to use Bootstrap in your application.

What is Bootstrap?

Bootstrap is an HTML, CSS, and JavaScript Framework, and it is useful to develop responsive websites without rewriting the code for each device or screen. If you code once, it just works for any browser, device, and screen. Bootstrap has not only HTML/CSS components but also JS components. With Bootstrap, you get to use common HTML elements but with a beautiful representation of items. Finally, you can use your own theme on top of Bootstrap, making your code the most customizable ever.

Bootstrap History

Bootstrap was developed and announced in August 2011 by Mark Otto and Jacob Thornton while working at Twitter. The purpose of the development was to make interface development and maintenance very easy and consistent. Bootstrap was not only a framework but a way to make some common design patterns a standard in web design and development. In the beginning, the project was called Twitter Blueprint, but later on, it was renamed Bootstrap and released as an open-source project. The project is still maintained by the same people, as well as a large community of contributors in Github.

Bootstrap Advantages

If we use Bootstrap in our applications, we take advantage of the following:

1. Not Reinventing the Wheel. We don’t have to write more code.
2. Extensive UI with Bootstrap themes.
3. Open Source. You get to know the source code and change it.

Bootstrap Features

1. HTML and CSS based design templates for forms, buttons, navigation, and other components.
2. Modularity. Change or remove components or component colors.
3. Re-usable code with CSS classes.
4. Out of the box JavaScript components with additional features like tooltips, modal windows, etc.

Why do we need to use Bootstrap?

Bootstrap is must have a framework for any project because of it, you do not have to rewrite all the element styles, thus benefiting the extra features that come with the framework.

The key reasons to use Bootstrap are:

1. Popular
2. Extendable
3. Reusable
4. Responsive
5. Consistent and efficient design
6. Extended features out of the box
7. Open-source (Free to use)
8. Compatible with all browsers
9. Thousands of themes designed for Bootstrap
10. New versions and updates over the years

How to use Bootstrap?

In our applications, we can use the bootstrap in two ways, i.e., either by directly downloading the files from getbootstrap.com and include it in the application or by including the bootstrap CDN URL’s on the header like as shown below.

We will learn more about how to setup bootstrap environment in next chapters.