How to Use The Bootstrap 4 Grid System For Creating A Responsive Website?

Responsive Web Design MichiganConsistency in website design makes it easy for users to read, understand and navigate throughout the site easily. With the help of grid system, you can achieve the level of consistency that otherwise would have been difficult to represent in your website design.

The concept of grid system is not new and have been used in print publications for quite a long time. But, grid systems are being used as standard in web design today, since they help in making the website content manageable and much more readable.

A grid system, basically, comprises of a structure of horizontal and vertical lines that are used for organizing the content. Most importantly, it helps in creating a fine balance between the elements in a website design.

You can find several types of grid systems available online, however, through this post I would be discussing about the Bootstrap’s grid system. In addition, I’ll make you understand the process of using the latest Bootstrap’s 4 Grid System for creating a basic grid layout.

An Overview of Bootstrap’s Grid System

Creating a responsive website has become the new web standard, as the majority of traffic coming to websites is from mobile devices. And, the Bootstrap grid system is an effective tool that can be used for creating responsive website layouts in a quick and hassle-free manner.

“Essentially, the grid system is responsive and helps re-arrange the columns of a web design based on the user device screen size.”

The Bootstrap grid is similar to other grid system and contains plenty of HTML/CSS components that help in structuring a website, and place a site’s content in locations based on your preferences. What’s more? This grid system enables you to create up to 12 columns and multiple rows. This is why the Bootstrap Grid System is often referred to as the 12-Grid System.

This grid system allows to create dynamic and flexible layout using four classes such as:

  • xs (for extra small screen display such as phones)
  • sm (for small screen tablets)
  • md (for medium screen desktops)
  • lg (for large screen display such as desktops)

How to Set Up Grids for Different Screens

In this section, I’ll be taking an example to illustrate how the Bootstrap grid system can be used for creating different types of layouts for desktop, tablet and mobile devices.

First, let’s design the basic structure of the Bootstrap Grid system. But, let us first create a new HTML file and assign it a name, such as “grids_view.html”. Our basic HTML markup will look something like:

<!DOCTYPE html>

<html lang="en">

 <head>

 <meta charset="utf-8">

 <meta name="viewport" content="width=device-width,initial-scale=1">

 <title>How to Set up Grid For Multiple Screens</title>

 <link rel="stylesheet" href="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/css/bootstrap.css">


<style>

/*Your website style will come here*/

</style>


 </head>

 <body>

 <!-- Your website content will come here -->

 </body>

</html>

Next, we need to code for creating desktop, tablet and mobile displays. For the desktop display, simply use the class with prefix “col-md-*” – that is used for re-sizing the columns in desktop screens.

Besides this, you should also consider using the col-lg-* and col-xl-* prefix. All the classes with prefix col-md-*, cold-lg-* and col-xl-* are three different sizes of the grid – that are used for creating columns for medium, large and extra large screen displays.

In order to achieve the desktop view, begin with creating a div container and a row class. Inside the div container we’ll be creating 8 columns using the ‘col-md-3′ class. Furthermore, within each column we need to set up an h3 tag, some text and a link. Lastly, we are placing the ‘col-md-12′ class, so as to expand the header section all over the screen:



<div class="container">


<div class="row">


<header class="col-md-12 text-center">


<h2>Example of Bootstrap's 4 Grid System</h2>


</header>



<div class="col-md-3 text-center">


<h3>Title 1</h3>


Lorem ipsum dolor sit amet..

<a class="btn btn-primary-outline" href="#">Read More →</a>

</div>



<div class="col-md-3 text-center">


<h3>Title 2</h3>


Lorem ipsum dolor sit amet..

<a class="btn btn-primary-outline" href="#">Read More →</a>

</div>



<div class="col-md-3 text-center">


<h3>Title 3</h3>


Lorem ipsum dolor sit amet..

<a class="btn btn-primary-outline" href="#">Read More →</a>

</div>



<div class="col-md-3 text-center">


<h3>Title 4</h3>


Lorem ipsum dolor sit amet..

<a class="btn btn-primary-outline" href="#">Read More →</a>

</div>



<div class="col-md-3 text-center">


<h3>Title 5</h3>


Lorem ipsum dolor sit amet..

<a class="btn btn-primary-outline" href="#">Read More →</a>

</div>



<div class="col-md-3 text-center">


<h3>Title 6</h3>


Lorem ipsum dolor sit amet..

<a class="btn btn-primary-outline" href="#">Read More →</a>

</div>



<div class="col-md-3 text-center">


<h3>Title 7</h3>


Lorem ipsum dolor sit amet..

<a class="btn btn-primary-outline" href="#">Read More →</a>

</div>



<div class="col-md-3 text-center">


<h3>Title 8</h3>


Lorem ipsum dolor sit amet..

<a class="btn btn-primary-outline" href="#">Read More →</a>

</div>


</div>


</div>


When it comes to achieving the tablet view, you’ll have to consider whether you want to display the website in landscape or portrait view. While you can achieve the landscape view using the col-md-* classes, however, in order to attain the portrait view you need to make use of col-sm-* classes such as the col-sm-6 class.

To achieve tablet view, simply replace



<div class="col-md-3 text-center">

in the above code snippet with:



<div class="col-md-3 col-sm-6 text-center">

And at last, to achieve the mobile view, you’ll have to use the col-xs-12 class. For this part, you’ll have to use the same code as written above, and just need to replace



<div class="col-md-3">

with the following line of code:



<div class="col-md-3 col-sm-6 col-xs-12 text-center">

Responsive Website Output

Once you’ve executed the code, this is how your website design will look on desktop, tablet and mobile screen displays:

Example of Bootstrap’s 4 Grid System

Title 1

Lorem ipsum dolor sit amet..

Read More →

Title 2

Lorem ipsum dolor sit amet..

Read More →

Title 3

Lorem ipsum dolor sit amet..

Read More →

Title 4

Lorem ipsum dolor sit amet..

Read More →

Title 5

Lorem ipsum dolor sit amet..

Read More →

Title 6

Lorem ipsum dolor sit amet..

Read More →

Title 7

Lorem ipsum dolor sit amet..

Read More →

Title 8

Lorem ipsum dolor sit amet..

Read More →

Conclusion

Do you want to create a responsive grid style layout for your website? In that case, you should consider using the Bootstrap Grid System to accomplish your task. This post will help you understand how you can use the Bootstrap Grid System for creating a responsive website for different screen displays.

Sophia Phillips
Sophia Phillips is a trained WordPress developer working with WordPrax Ltd. - HTML to
WordPress company
with global reach. If you're planning to
convert HTML to WordPress for a brilliant online presence, she can
help you. Some stunning articles related to website markup
conversions can be found under her name.