By Lorenzo Sauchelli

Historically, most web pages or web apps have been created from scratch in terms of the front-end. However, the use of frameworks has increased since the development of Bootstrap by Twitter.

Bootstrap allows you to rapidly develop prototypes which can then be used for the final product with minimal changes. The tool is perfectly documented and is compatible with most web browsers. It easily supports any target browser, and ‘fixing’ the CSS is only needed when supporting older browsers.

Additionally, there are hundreds of previously set CSS classes that can be used to save development time. This allows for the creation of more complex projects than if everything were done from scratch. Overwriting classes is also simple enough to achieve a look and feel that doesn’t look exactly like Bootstrap.

Responsive Design

An advantage of using Bootstrap is its grid system. This system considerably reduces development time for responsive designs. It is based on four level breakpoints for the creation of the HTML and a 12-column grid system:

• Extra small screens (width smaller than 768px): Uses classes with the prefix .col-xs-. For example, if we have 12 elements with the class .col-xs-1, they occupy the full screen. Regardless of the size of the screen, it always acts this way.

• Small screens (width greater than or equal to 768px): Uses classes with the prefix .col-sm-. It doesn’t activate when the screen is smaller than 768px.

• Medium screens (width greater than or equal to 922px): Uses classes with the prefix .col-md-. It doesn’t activate when the screen is smaller than 922px.

• Large screens (width greater than or equal to 1200px): Uses classes with the prefix .col-lg- and doesn’t activate when the screen is smaller than 1200px.

An important thing to take into account is that bigger classes overwrite smaller ones. With this in mind, it is possible to create a design that adapts to the different breaking points without much effort.

Example

<div class="row">
<div class="col-xs-6 col-sm-4 col-lg-3"></div>
<div class="col-xs-6 col-sm-4 col-lg-3"></div>
<div class="col-xs-6 col-sm-4 col-lg-3"></div>
<div class="col-xs-6 col-sm-4 col-lg-3"></div>
<div class="col-xs-6 col-sm-4 col-lg-3"></div>
<div class="col-xs-6 col-sm-4 col-lg-3"></div>
</div>

In this example we have the classes .col-xs-6, .col-sm-4 and .col-lg-3 in the same elements. What does this mean? It means that on smartphone screens, each column will occupy half of the available space. In this particular case there will be two columns and three rows. In small screens, like those found on tablets, the class .col-sm-4 overwrites the class .col-xs-6, so three elements are shown per row. Finally, in large screens, the class .col-lg-3 overwrites the other ones and the screen is left with a complete row of four elements and another one half full with two elements. We could make some of those elements occupy more space in larger screens if we wanted to, possibly by changing the first two to col-lg-6.

It is important to remember that for responsive images, it is necessary to add the class .img-responsive. This will apply to the image styles max-width: 100%; y height: auto; so that it scales correctly.

Compatibility

Generally, Bootstrap features are supported by all browsers. However, for Internet Explorer 8 & 9 to work properly with responsive design, it is necessary to use respond.js.

Customization

Creating an initial look with the grids and components is okay. But using these tools for the final design is not recommended. Creating a Bootstrap site that doesn’t look exactly like Bootstrap requires the use of CSS to change the colors, fonts, and sizes.

For instance,  the website for Incutex was created using Bootstrap, but it isn’t easy to figure it out at first glance. This is due to the extensive customization the developers have done when designing the website.

Bootstrap brings many predefined styles, and even though it is important to customize them, it is also critical to remember you are using a framework. In the end, there is no point in working with Bootstrap if you rewrite everything.

Regarding JavaScript, it should taken into account that Bootstrap requires jQuery, therefore we can use it as much as we want in our project.

Example

<p>
<button type="button" class="btn btn-success">Sí</button>
<button type="button" class="btn btn-danger">No</button>
</p>

If we want to modify the look of these buttons, we should take into account the predefined styles. For instance, maybe we would like them to be rounder than what they initially are, and also change the color of the background and text.

.btn {
-webkit-border-radius: 25px;
-moz-border-radius: 25px;
border-radius: 25px;
background: #FFFFFF;
}

.btn-success { color: #398439; }
.btn-danger { color: #c12e2a; }

By making these types of changes, we can achieve almost any design with minimal effort.

Downloading a customized version

From the Bootstrap webpage, we can download the version of the framework that best suits our needs: changing anything, from the styles and components that we need, to modifying LESS variables directly from the web interface. This way we can easily modify the values present in Bootstrap to create our own version before we begin writing a single line of code. We can even change, if we wish to, the breaking points for responsive design.

There are also some good alternatives to the official generator:

• BootSwatchr also brings live visibility for the changes made to LESS variables.

• StyleBootstrap is maybe a little bit friendlier since it allow us to have module-per-module visibility of the changes being introduced.

• PaintStrap allows us to generate colors based on a palette created with Adobe Kuler or COLOURlovers.

Lorenzo Sauchelli is a skilled PHP Developer with experience in multiple technologies and passionate about his work. Lorenzo is self-managed and organized. He likes to work in teams and for different vertical markets. He is well-known for laterally thinking complex problems and providing practical solutions.