In 2011, Bootstrap was created by two Twitter employees (Mark Otto and Jacob Thornton) to address the issue of fragmentation of internal tools/platforms. Bootstrap aimed to provide consistency among different web applications that were internally developed to reduce redundancy and increase adaptability and reusability. As digital creators, we should always aim to make our applications adaptable and reusable. This will help keep coherency between applications and speed up processes, as we won't need to create basic foundations over and over again. For example, a website might have a login system, which is not unique to one project, but prevalent in many, and therefore reusing already existing code for this makes sense.

After a few months, Twitter Blueprint was born and provided a way to document and share common design patterns/assets within Twitter...

You probably have a reasonable idea of why you would use Bootstrap for developing websites after reading its history, but there is more to it. Simply put, it provides the following:

• A responsive grid, using the design philosophies mentioned in the first chapter.
• Cross browser compatibility, using Normalize.css to ensure elements render consistently across all browsers, (not a very easy task, I might add, speaking from experience). You might be wondering why it's difficult. Simply put, there are several different browsers, each with a plethora of versions, which all render content differently. I've seen some browsers put a border around an image by default, whereas some browsers don't. This type of inconsistency will prove to be very bad for user experience.
• A plethora of UI components, by providing polished UI components as developers, we are...

This section will cover what a responsive grid system is and how it is implemented with Bootstrap.

First, let's cover what a grid system is in general, regardless of the framework you choose to develop your amazing website on top of. Without using a framework, CSS would be used to implement the grid. However, a framework like Bootstrap handles all of the CSS side and provides us with easy-to-use classes. A responsive grid system is composed of two main elements:

• Columns: These are the horizontal containers for storing content on a single row
• Rows: These are top level containers for storing columns

Your website will have at least one row, but it can have more. Each row can contain containers that span a set number of columns. For example, if the grid system had 100 columns, then a container that spans 50 would be half the width of the browser...

There is a plethora of amazing components that are provided with Bootstrap, thus saving time creating them from scratch. There are components for dropdowns, buttons, images, and so much more.

The usage is very similar to that of the grid system, and the same HTML elements we know and love are used with CSS classes to modify and display Bootstrap constructs. I won't go over every component that Bootstrap offers as that would require an encyclopedia in itself, and many of the commonly used ones will be covered in future chapters through example projects. I would however recommend taking a look at some of the components on Bootstrap's website https://v4-alpha.getbootstrap.com/components/alerts/

In this chapter, we covered what Bootstrap is and how its grid system will help us create our responsive websites. The next chapter will cover setting up a project template that can be reused for all our future projects.