How to Use Bootstrap 4 Grid for a Responsive Website

Bootstrap 4 grid is an excellent tool for making websites responsive. This tutorial shows how to improve the way pages look on different devices and screens. You should guarantee that both desktop and mobile users enjoy visiting your website.

Bootstrap 4 Grid: Main Tips

• Bootstrap 4 grid system is a tool for creating responsive layouts.
• This grid system uses flexbox and allows up to 12 columns for laying out website content.
• The main advantage of using Bootstrap grid system is that it adapts to different screen sizes. It is perfect for responsive web design.

What It Is and How It Works

The Bootstrap 4 grid system applies columns, containers and rows for organizing and aligning content on pages. It allows you to use up to 12 columns in a row.

You don't have to use each of the columns, and you can make a column span the width of several columns by grouping them. This way, you can create columns of different widths.

Bootstrap provides flexibility.

This means the grid system is responsive and will respond to different screen sizes. In this Bootstrap guide, you will find not only explanations but also a few Bootstrap 4 examples to analyze.

Classes

There are five classes in the Bootstrap 4 stylesheet that are associated with the grid system:

• .col- is used for extremely small devices, which have the screen width of less than 576px.
• .col-sm- is used for small devices, which have the screen width of 576px or more.
• .col-md- is used for medium sized devices, which have the screen width of 768px or more.
• .col-lg- is used for large devices, which have the screen width of 992px or more.
• .col-xl- is used for extra large small devices, which have the screen width of 1200px or more.

For more dynamic and flexible layouts, you can combine these classes. For example, columns with a certain class may be displayed on bigger screens, and different ones for smaller screens.

Note: the classes scale up, but do not scale down past their specified size. For example, if you'd like to specify the same width for both lg and xl, you only need to specify it for lg.

Structures

By using the grid system, you may create various layout structures. Check out an example of a Bootstrap grid structure:

<!-- Wrap in the row element --> 
<div class="row">
<!-- The column elements inside the row --> 
 <div class="col-sm-1" style="background-color:violet">1/12</div>
 <div class="col-sm-11" style="background-color:khaki">11/12</div> 
</div>
<!-- Wrap in the row element --> 
<div class="row">
<!-- The column elements inside the row --> 
 <div class="col" style="background-color:lightgreen">1/2</div>
 <div class="col"style="background-color:violet">1/2</div>
</div>

Let's examine this example step by step:

• In both of the examples we see that the columns are wrapped inside a row element, as specified by the "row" class.
• In the first example, the column elements' classes are .col-*-*. The first * symbol specifies the responsiveness level and could be replaced with sm, md, lg or xl. The second * symbol specifies how many columns this particular element should span across.

Note: when using Bootstrap, keep in mind that the number of columns the containers in a single row span across cannot exceed 12.

Pros

• Easy to use with a learn-by-doing approach
• Offers quality content
• Gamified in-browser coding experience
• The price matches the quality
• Suitable for learners ranging from beginner to advanced

Main Features

• Free certificates of completion
• Focused on data science skills
• Flexible learning timetable

GET 25% OFF

Pros

• Simplistic design (no unnecessary information)
• High-quality courses (even the free ones)
• Variety of features

Main Features

• Nanodegree programs
• Suitable for enterprises
• Paid Certificates of completion

UP TO 70% OFF

Pros

• A wide range of learning programs
• University-level courses
• Easy to navigate
• Verified certificates
• Free learning track available

Main Features

• University-level courses
• Suitable for enterprises
• Verified certificates of completion

FREE COURSES

Types of Columns: Examples

To explain the topic to you in more detail, we have a few more Bootstrap 4 examples to illustrate the things we talked about in this Bootstrap grid tutorial.

Equal

In this example, we have multiple columns with the class called .col. They are automatically adjusted to span throughout twelve columns equally:

<!-- Wrap in the row element --> 
<div class="row">
<!-- The column elements inside the row --> 
  <div class="col">
  <div class="col">
  <div class="col">
</div>

You should keep in mind that you can only enter either 1, 2, 3, 4, 6, or 12.

This rule exists because the number of these elements should be able to divide 12 without any remainder since the column width is distributed by adjusting how many of the 12 columns they span across.

Otherwise, unexpected results may occur when using Bootstrap.

Unequal

In this example, we have three containers with the class of .col-sm-4:

<!-- Wrap in the row element -->
<div class="row">
<!-- The column elements inside the row -->
  <div class="col-sm-4">
  <div class="col-sm-4">
  <div class="col-sm-4">
</div>

This means that the columns can scale down to fit the screen width of 576px and that each of them will span throughout four columns.

Responsive

In this example, we have two containers with slightly different classes. One of them has the class of .col-sm-3 and the other's class is .col-sm-9:

<!-- Wrap in the row element --> 
<div class="row">
<!-- The column elements inside the row --> 
  <div class="col-sm-3">
  <div class="col-sm-9">
</div>

What this means is, both of them can scale down to fit the screen width of 576px, but the first one only spans throughout two columns, and the second one throughout ten columns.

Bootstrap 4 Grid: Summary

• The grid system makes creating responsive websites a lot easier, and in most cases, that is precisely what is Bootstrap used for.
• It is created using flexbox and can contain up to 12 columns.
• Responsive web design means the Bootstrap 4 grid adapts to the size of the screen.