How to use Bootstrap grid system for responsive website design?

Bootstrap Origins

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 at Twitter 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. In today's tutorial, you will learn what a Bootstrap is, how it relates to Responsive Web Design and its importance to the web industry.

When Twitter Blueprint was born, it provided a way to document and share common design patterns/assets within Twitter. This alone is an amazing feature that would make Bootstrap an extremely useful framework. With this more internal developers began contributing towards the Bootstrap project as part of Hackathon week, and the project just exploded. Not long after, it was renamed "Bootstrap" as we know and love it today, and was released as an open source project to the community. A core team led by Mark and Jacob along with a passionate and growing community of developers helped to accelerate the growth of Bootstrap.

In early 2012 after a lot of contributions from the core team and the community, Bootstrap 2 was born. It had come a long way from being a framework for providing internal consistency among Twitter tools. It was now a responsive framework using a 12-column grid system. It also provided inbuilt support for Glyphicons and a plethora of other new components.

In 2013, Bootstrap 3 was released with a mobile-first approach to design and a fully redesigned set of components using the immensely popular flat design. This is the version many websites use today and it is very suitable for most developers. Bootstrap 4 is the latest stable  release.

This article is an excerpt taken from the book,' Responsive Web Design by Example', written by Frahaan Hussain.

Why use Bootstrap?

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.
• Cross browser compatibility, using Normalize.css to ensure elements render consistently across all browsers (which isn't a very easy task). 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 going to bring our creativity to life in a much easier way. These components usually allow a team to increase their development velocity since they start from a solid tried and tested foundation. They not only provide good design, but they are usually implemented using best practices in terms of performance and accessibility.
• A very compact size with only a small footprint.
• Really fast to develop with, it doesn't get in the way like many other frameworks, but allows your creativity to shine through.
• Extremely easy to start using Bootstrap in your website.
• Bundles common JavaScript plugins such as jQuery.
• Excellent documentation.
• Customizable, allowing you to remove any unnecessary features.
• An amazing community that is always ready, 24/7, to help.

It's pretty clear now that Bootstrap is an amazing framework and that it will help provide consistency among our projects and aid cross browser responsive design. But why use Bootstrap over other frameworks? There are endless responsive frameworks like Bootstrap out there, such as Foundation, W3.CSS, and Skeleton, to mention a few.

Bootstrap, however, was one of the first responsive frameworks and is by far the most developed with an ever-growing community. It has documentation online, both official and unofficial, and other frameworks aren't able to boast about their resources as much as Bootstrap can. Constantly being updated, it makes it the right choice for any website developer.

Also, most JavaScript frameworks, such as Angular and React, have bindings to Bootstrap components that will reduce the amount of code and time spent binding it with another framework. It can also be used with tools such as SASS to customize  the components provided further.

Bootstrap's grid system

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 and/or parent element.

Basics of Bootstrap

Bootstrap's grid system consists of 12 columns that can be used to display content. Bootstrap also uses containers (methods for storing the website's content), rows, and columns to aid in the layout and alignment of the web page's content. All of these employ HTML classes for usage and will be explained very shortly. The purpose of these are as follows:

• Columns are used to group snippets of the website's content, and they, in turn, allow manipulation without disrupting the internal content's flow. There are two different types of columns:
  • .container: Used for a fixed width, which is set by Bootstrap
  • .container fluid: Used for full width to span the entire browser

• Rows are used to horizontally group columns, which aids in lining up the site's content properly:
  • .row: There is only one type of row

• Columns mentioned previously are a way of setting how wide content should be. The following are the classes used for columns:
  • .col-xs: Designed to display the content only on extra-small screens
    • Max container width—none
    • Triggered when the browser width is below 576px

  • .col-sm: Designed to display the content only on small screens
    • Max container width—540px
    • Triggered when the browser width is above or equal to 576px and below 768px

  • .col-md: Designed to display the content only on medium screens
    • Max container width—720px
    • Triggered when the browser width is above or equal to 768 and below 992px

  • .col-lg: Designed to display the content only on large screens
    • Max container width—960px
    • Triggered when the browser width is above or equal to 992px and below 1200px

  • .col-xl: Designed to display the content only on extra-large screens
    • Max container width—1140px
    • Triggered when the browser width is above or equal to 1200px

  • .col: Designed to be triggered on all screen sizes

To set a column's width, we simply append an integer ranging from 1 to 12 at the end of the class, like so:

• .col-6: Spans six columns on all screen sizes
• .col-md-6: Spans six columns only on extra-small screen sizes

Later in this chapter, we will run through some examples of how to use these features and how they work together.

Usage and examples

To use the aforementioned features, the structure is as follows:

• div with container class
  • div with row class
    • div with column class
      • Content

    • div with column class
      • Content

    • div with column class
      • Content

    • div with column class
      • Content

  • div with row class
    • div with column class
      • Content

    Unlock access to the largest independent learning library in Tech for FREE!
    Get unlimited access to 7500+ expert-authored eBooks and video courses covering every tech area you can think of.
    Renews at £16.99/month. Cancel anytime
    START FREE TRIAL
    • div with column class
      • Content

    • div with column class
      • Content

    • div with column class
      • Content

    • div with column class
      • Content

    • div with column class
      • Content

The following examples may have some CSS styling applied; this does not affect their usage.

Equal width columns example

We will start off with a simple example that consists of one row and three equal columns on all screen sizes.

The following code produces the aforementioned result:

You may be scratching your head in regards to the column classes, as they have no numbers appended. This is an amazing feature that will come in useful very often. It allows us, as web developers, to add columns easily, without having to update the numbers, if the width of the columns is equal. In this example, there are three columns, which means the three divs equally span their thirds of the row.

Multi-row, equal-width columns example

Now let's extend the previous example to multiple rows:

The following code produces the aforementioned result:

As you can see, by adding a new row, the columns automatically go to the next row. This is extremely useful for grouping content together.

Multi-row, equal-width columns without multiple rows example

The title of this example may seem confusing, but you need to read it correctly. We will now cover creating multiple rows using only a single row class. This can be achieved with the help of a display utility class called w-100.

The following code produces the aforementioned result:

The example shows multiple row divs are not required for multiple rows. But the result isn't exactly identical, as there is no gap between the rows. This is useful for separating content that is still similar. For example, on a social network, it is common to have posts, and each post will contain information such as its date, title, description, and so on. Each post could be its own row, but within the post, the individual pieces of information could be separated using this class.

Differently sized columns

Up until now, we have only created rows with equal-width columns. These are useful, but not as useful as being able to set individual sizes. As mentioned in the Bootstrap grid system section, we can easily change the column width by appending a number ranging from 1-12 at the end of the col class.

The following code produces the aforementioned result:

As you can see, setting the explicit width of a column is very easy, but this applies the width to all screen sizes. You may want it only to be applied on certain screen sizes. The next section will cover this.

Differently sized columns with screen size restrictions

Let's use the previous example and expand it to change size responsively on differently sized screens. On extra-large screens, the grid will look like the following:

On all other screen sizes it will appear with equal-width columns:

The following code produces the aforementioned result:

Now we are beginning to use breakpoints that provide a way of creating multiple layouts with minimal extra code to make use of the available real estate fully.

Mixing and matching

We aren't restricted to choosing only one break-point, we are able to set breakpoints for all the available screen sizes. The following figures illustrate all screen sizes, from extra-small to extra-large:

Extra-small:

Small:

Medium:

Large:

Extra-large:

The following code produces the aforementioned results:

It isn't necessary for all divs to have the same breakpoints or to have breakpoints at all.

Vertical alignment

The previous examples provide functionality for use cases, but sometimes the need may arise to align objects vertically. This could technically be done with empty divs, but this wouldn't be a very elegant solution. Instead, there are alignment classes to help with this as can be seen here:

As we can see, you can align rows vertically in one of three positions. The following code produces the aforementioned result:

We aren't restricted to only aligning rows, we can easily align columns relative to each other, as is demonstrated here:

The following code produces the aforementioned result:

Horizontal alignment

As we vertically aligned content in the previous section, we will now cover how easy it is to align content horizontally. The following figures show the results of horizontal alignment:

 

The following code produces the aforementioned result:

Column offsetting

The need may arise to position content with a slight offset. If the content isn't centered or at the start or end, this can become problematic, but using column offsetting, we can overcome this issue. Simply add an offset class, with the screen size to target, and how many columns (1-12) the content should be offset by, as can be seen in the following example:

The following code produces the aforementioned result:

Grid wrap up

The examples covered so far will suffice for most websites. There are more techniques for manipulating the grid, which can be found on Bootstrap's website.

If you tried any of the examples, you may have noticed cascading from smaller screen-size classes to larger screen-size classes. This occurs when there are no explicit classes set for a certain screen size.

Bootstrap components

There are 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.

If you have found this post useful, do check out this book, ' Responsive Web Design by Example' to build engaging responsive websites using frameworks like Bootstrap and upgrade your skills as a web designer.

Get ready for Bootstrap v4.1; Web developers to strap up their boots

Web Development with React and Bootstrap

Bootstrap 4 Objects, Components, Flexbox, and Layout