Bootstrap is one of the most popular and complete frontend libraries. It is composed of HTML templates, predefined CSS classes, and JavaScript files to add a more dynamic behavior to each component. Created by Mark Otto and Jacob Thornton at Twitter and then released as open source project in August 2011, Bootstrap was one of the first libraries providing custom elements and a grid system to design responsive webs. What does responsive mean? Responsive web design is about creating websites that automatically adjust themselves to look good on all devices, from small phones to large desktops.

The grid is the most important aspect of this framework. It defines the bases in which the layout is created. Bootstrap implements five tiers or scales based on the screen width. Customize the size of your columns on extra small, small, medium, large, or extra large devices, however you see fit. For grids that are the same from the smallest of devices to the largest, use the .col and .col-* classes. Specify a numbered class when you need a particularly sized column; otherwise, feel free to stick to .col. Let's look at an example for a small screen:

Here, keep the following in mind:

• .col-sm-1 will fit 1/12 of the screen width
• .col-sm-2 will fit 1/6 of the screen width
• .col-sm-4 will fit 1/3 of the screen width
• .col-sm-6 will fit 1/2 of the screen width
• .col-sm-12 will fit the entire screen width

In the same way, Bootstrap includes a vast variety of preconfigured classes to simplify the alignment of our HTML elements, making our web application look ordered and attractive. Another thing we really like about bootstrap is the high customization level. We can transform all their components, adding custom behavior or style, and it will not generate any conflict with the existing library. An advanced design with some elements customized could look like this:

Doesn't care the purpose, Bootstrap is created to provide a highly customizable solution for any business need you might have. Let's explore more libraries!