Logo

Bootstrap 4 Grid Classes

Bootstrap 4 Grid Classes

Extra-small Grid – In the extra-small grid system class, when you create the grid (columns), the columns will not be stacked on top of each other on extra-small devices having screen size less than 576px and above screen sizes. Add .col-* class so that the columns will not be stacked.

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Grid Classes Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
  <h1>Extra Small Grid</h1>
  <h5>When you resize the browser you will see the effect.</h5>
  <div class="container">
    <div class="row">
      <div class="col-3 bg-success">
       <p>In the extra small grid system class, when you create the grid (columns), the columns will not stacked on top of each other on extra-small devices having screen size less than 576px and above screen sizes. Add .col-* class so that the columns will not stacked.</p>
      </div>
      <div class="col-9 bg-warning">
        <p>In the extra small grid system class, when you create the grid (columns), the columns will not stacked on top of each other on extra-small devices having screen size less than 576px and above screen sizes. Add .col-* class so that the columns will not stacked.</p>
      </div>
    </div>
  </div>
</div>
</body>
</html>

Output

class1.PNG

Small Grid – When you use small grid class, the grid (columns) will not be stacked vertically on screen sizes greater than or equal to 576px and above. To make the grid system that will not be stacked on small screen sizes and above, add .col-sm-* class.

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Grid Classes Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
  <h1>Small Grid</h1>
  <h5>When you resize the browser you will see the effect.</h5>
  <div class="container">
    <div class="row">
      <div class="col-sm-3 bg-success">
       <p>When you use small grid class then the grid (columns) will remains same on the screen sizes greater than or equal to 576px and above.</p>
      </div>
      <div class="col-sm-9 bg-warning">
        <p>When you use small grid class then the grid (columns) will remains same on the screen sizes greater than or equal to 576px and above.</p>
      </div>
    </div>
  </div>
</div>
</body>
</html>

Output

class2.PNG

Medium Grid – In the medium grid, when you create columns (grid), then the columns will not be stacked on top of each other on medium devices having screen size greater than equal to 768px and above. For this, add .col-md-* class. The columns are stacked on top of each other on devices having a screen size of less than 768px.

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Grid Classes Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
  <h1>Medium Grid</h1>
  <h5>When you resize the browser you will see the effect.</h5>
  <div class="container">
    <div class="row">
      <div class="col-md-6 bg-success">
       <p> In the medium grid, when you create columns (grid), then the columns will not stacked on top of each other on medium devices having screen size greater than equal to 768px and above. </p>
      </div>
      <div class="col-md-6 bg-warning">
        <p> In the medium grid, when you create columns (grid), then the columns will not stacked on top of each other on medium devices having screen size greater than equal to 768px and above. </p>
      </div>
    </div>
  </div>
</div>
</body>
</html>

Output

The column appears side by side on medium screen size devices and above, which is shown below in figure.

med1.PNG

The columns will appears stacked on small and extra small devices, which is shown below in the figure.

med2.PNG

Large Grid - In the large grid, when you create columns (grid), then the columns will not be stacked on top of each other on large devices such as laptops having screen size greater than equal to 992px and above. For this, add .col-lg-* class.

Note: The columns are stacked on top of each other on devices having screen size less than 992px.

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Grid Classes Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
  <h1>Large Grid</h1>
  <h5>When you resize the browser you will see the effect.</h5>
  <div class="container">
    <div class="row">
      <div class="col-lg-6 bg-success">
       <p> In the large grid, when you create columns (grid), then the columns will not stacked on top of each other on large devices such as laptops having screen size greater than equal to 992px and above.</p>
      </div>
      <div class="col-lg-6 bg-warning">
        <p> In the large grid, when you create columns (grid), then the columns will not stacked on top of each other on large devices such as laptops having screen size greater than equal to 992px and above.</p>
      </div>
    </div>
  </div>
</div>
</body>
</html>

Output

The column appears side by side on large screen size devices and above, that is shown below in figure.

lg.PNG

The columns will appear stacked on medium, small, and extra-small devices, which is shown below in the figure.

lg1.PNG

XLarge Grid - In the extra large grid, when you create columns (grid), then the columns will not be stacked on top of each other on extra large devices such as laptops and desktops having screen size greater than equal to 1200px and above. For this, add .col-xl-* class.

Note: The columns are stacked on top of each other on devices having screen size less than 1200px.

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Grid Classes Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
  <h1>XLarge Grid</h1>
  <h5>When you resize the browser you will see the effect.</h5>
  <div class="container">
    <div class="row">
      <div class="col-xl-6 bg-success">
       <p>In the large grid, when you create columns (grid), then the columns will not stacked on top of each other on extra large devices such as laptops and desktops having screen size greater than equal to 1200px and above.</p>
      </div>
      <div class="col-xl-6 bg-warning">
        <p>In the large grid, when you create columns (grid), then the columns will not stacked on top of each other on extra large devices such as laptops and desktops having screen size greater than equal to 1200px and above.</p>
      </div>
    </div>
  </div>
</div>
</body>
</html>

Output

The column appears side by side on extra-large screen devices, that is shown below in figure.

xl.PNG

The columns will appear stacked on large, medium, small, and extra-small devices, which is shown below in the figure.

xl2.PNG

Related Topics

Bootstrap 4 Inputs

Bootstrap Inputs Bootstrap Form Inputs – Several pre-defined input types are available in HTML and Bootstrap. These input types help in styling the forms. When an input type is specified in the form, it means...

10 minutes read.

Bootstrap Input groups

Bootstrap 4 Input groups The input group is a component of Bootstrap 4, which is used to create interactive and stylish form controls. With the help of input groups, you can easily customize the input...

8 minutes read.

Bootstrap 4 Scrollspy

Bootstrap 4 Scrollspy Bootstrap 4 offers a scrollspy component that is used to make the website more attractive and eye-catching. Basically, the scrollspy is used on the single-page website. The scrollspy highlights the nav...

5 minutes read.

CakePHP Layouts & Elements

A layout includes a presentation code that can be wrapped out in your view. It means that what you want to see in your view should be well-positioned in layout. When you create...

9 minutes read.

Bootstrap Notification Bubble

What is a notification bubble? Bubbles are built into the Notification system. They float on top of the website or the button to indicate pending notifications. Bubbles can be expanded to reveal...

5 minutes read.

Bootstrap 4 Popover

Bootstrap 4 Popover Popover A popover is similar to the tooltip. The only difference between tooltip and Popover is that in the tooltip, the popup box appears when you move the cursor...

6 minutes read.

Bootstrap Pager

← Prev Next → ...

1 minute read.

Bootstrap 4 Collapse

Bootstrap 4 Collapse Collapse is a bootstrap component that is similar to the dropdown button. Collapse is used to hide or show the content such as paragraphs, sentences, etc.  When we click on a...

4 minutes read.

Bootstrap 4 Spinners

Bootstrap 4 offers spinner is a loading indicator that is used to display the loading state of any component or web page. The spinner is also known as a loader...

7 minutes read.

Bootstrap 4 Colors

Bootstrap 4 Colors Bootstrap 4 consists of classes that are used to set colors according to the context of the element, and with the help of these classes, we can read...

2 minutes read.

Bootstrap 4 Pagination

Bootstrap 4 Pagination Bootstrap pagination is used to show the existence of a series of web pages of the website. It allows navigation on multiple pages of a website. In pagination, there is a block...

9 minutes read.

Bootstrap Badges and Labels

Bootstrap Badges Bootstrap Badges are numerical indicators. It is used to show that how many items are associated with a link.The .badge class is used to create of Bootstrap Badges. Let us see...

2 minutes read.

Bootstrap With CSS

← Prev Next → ...

1 minute read.

Bootstrap 4 Content

Typography Typography is used for styling and formatting the content. It also helps in creating customized headings, sub-headings, lists, paragraphs, etc. Headings Bootstrap 4 offers HTML heading <h1> to <h6> that has bolder...

8 minutes read.

Bootstrap 4 Grid Classes

Bootstrap 4 Grid Classes Extra-small Grid – In the extra-small grid system class, when you create the grid (columns), the columns will not be stacked on top of each other on...

8 minutes read.

Bootstrap Tables

We can create different types of responsive and awesome bootstrap table like: striped , border etc. Bootstrap Basic Table We can create a basic bootstrap table by using its class .table. It has...

3 minutes read.

Bootstrap 4 Grid System

Bootstrap 4 Grid System The bootstrap 4 grid system is used to create a responsive website layout. The bootstrap 4 offers a mobile-first flexbox grid system that allows you to divide...

4 minutes read.

Bootstrap 4 Card

In Bootstrap 4, a card is a bordered box with padding around its content. It has options for headers, footers, colors, content, etc. The card provides the link, title, image,...

8 minutes read.

Bootstrap Panels

A bootstrap panel is used to create bordered box with some padding around its content. It is created with the .panels classes, and .panel-body classes. There are following classes of the panel: Panel header Panel...

4 minutes read.

Bootstrap 4 navbar

A navigation navbar or navbar uses in every website to make it more user-friendly. Navigating through the website is easier, and the user can instantly search for the topic of...

8 minutes read.