Building responsive web design with Bootstrap

This blog presents an overview of Bootstrap, an open-source front-end web development framework, and discusses how to use it to create a responsive web design. In today's world, responsiveness is a core part of website development because a desktop computer is not the only option for end users—they can also visit websites on tablets, laptops, or mobile devices.

Bootstrap offers many features such as CSS preprocessing, a predefined grid system with breakpoints, reusable UI components, JavaScript plugins, customizable themes, and typography settings. These features work together to create a responsive design, making responsive web design with Bootstrap an effective and streamlined approach for developers. Specifically, breakpoints determine when the layout should change, and the grid system defines how the contents should be organized and displayed at those breakpoints. Now, let's learn about both of these core concepts in the next section.

Breakpoints

Breakpoints are specific screen widths at which the layout and design of the web application changes in response to the different screen sizes. In Bootstrap, there are six default breakpoints, also called grid tiers. These are as follows:

Grid system

Bootstrap's grid system is built on a 12-column layout, with the columns representing the basic building blocks of a webpage's design. We can use all 12 columns individually or group the columns to create wider ones; however, a group can be at most 12 columns wide. To group the columns, we’ll use the class col-*, where the asterisk represents the number of columns to be merged. For example, col-4 means creating a merged column consisting of four individual columns. Let's visually represent this with the help of the following illustration:

• The first row in the illustration uses 12 columns individually.

• However, in the second row, it merges two columns to make a wider column.

• The total count of columns in the second row is six, since we have space for a maximum of 12 columns.

• Similarly, in other rows, we have used different combinations of columns to show how columns can be grouped up to 12. Keep in mind, using all 12 available columns is unnecessary. 

Until now, we have learned both concepts individually. Now let’s learn how to use columns with breakpoints to make a responsive layout. 

An example of a responsive layout

In this example, we'll make a responsive layout with the help of the grid system and breakpoints. We'll start with the grid system and gradually integrate the breakpoint concept. We'll first demonstrate how to divide a page into three sections with a ratio of 2:6:4 using the Bootstrap grid system. The output should look like the following:

To achieve the above task, we’ll use the col-2, col-6, and col-4 classes as shown in the code below.

We have also used other classes, such as container and row, in the above code. The container class, as the name suggests, is used to contain the contents of your web page. The row class creates a horizontal grouping of columns within a container. The complete code is given in the following widget.

In the example above, if we change the screen size by manually resizing the browser window, the layout will remain the same because we still need to integrate the breakpoints. We want this grid system to be responsive and adapt to different screen sizes by adjusting the number of columns each content element occupies, this is where the breakpoints come into play. To integrate breakpoints, the classes used to define the columns in the grid system are suffixed with breakpoint abbreviations. For example, col-sm defines column behavior for small screens, col-md defines the column behavior for medium screen size, and so on. We also need to define how the layout should change according to screen size.

• Let's assume that we want each column to start with 50% width on mobile devices and as soon as the screen size reaches medium or above, it bumps to 33.3% width.

• We know that to limit a column to 50% width, we have to use the col-6 class.

• Now, if we want to limit each column to 33.3% width, when the screen size reaches medium or above, we’ll add an additional class, col-md-4.

• Here, md represents medium and 4 represents 33.3%.

We’ll now update our current example and integrate the breakpoints concept.

As you can see, we have used the col-6 class and col-md-4 class for each column. This means our website will starts with 50% width for each column for less than medium screen size due to which third column will moved underneath in the second row and readjust the screen size when it reaches a medium breakpoint and all columns will adjust themselves in a single row on medium and above screen sizes. The complete code is given in the following widget:

If we want to readjust the screen size on another breakpoint, we’ll add its respective classes. For example, let’s say we want to readjust the screen size on large screens to a 1:10:1 ratio, then the above code will change as follows:

In the code above, we have added the col-lg-1, col-lg-10, and col-lg-1 classes to the current example to change the layout at the large screen size. The complete code is given as follows:

The above example works well until medium screen sizes on the platform; however, to test it for the large screen size, you can execute it locally as we can not increase the width of the inner widget that can represent the larger screen sizes.

By running the examples above, you can see the responsive behavior for mobile, medium, and large screen sizes. If we wanted to define the layout for an extra large screen size, then we need to integrate the col-xl-* classes.

Wrapping up and next steps

Now you understand how to effectively design responsive web pages with Bootstrap using its grid system and breakpoint features. We hope this blog has helped you understand the basic concepts of responsive design and its importance in web development. To learn more about Bootstrap, you may find the following Educative courses helpful:

• Modern Web Design Using Bootstrap 5 with Hands-On Projects

• Bootstrap 4 Layouts in Depth