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 Filters

 Bootstrap 4 Filters Bootstrap 4 provides a filter component that is used to search an element from a list, table, etc. Bootstrap does not contain any component or utility that helps...

5 minutes read.

Bootstrap Typography

Bootstrap provides simple and easily customized typography for headings, body text, lists, and many more. Headline <h1> to <h6> By default, Bootstrap has HTML headings (<h1> to <h6>) that are given below: Example <h1>h1. Bootstrap heading</h1>   <h2>h2. Bootstrap heading</h2>   <h3>h3. Bootstrap heading</h3>   <h4>h4. Bootstrap heading</h4>   <h5>h5. Bootstrap heading</h5>   <h6>h6. Bootstrap heading</h6> Try Now ←...

1 minute read.

Bootstrap 4 Form

Bootstrap 4 Forms Bootstrap 4 provides forms, which are one of the essential components for web pages and web applications. It is an input-based component, used to collect user data with the help of...

8 minutes read.

Bootstrap 4 Jumbotron

Bootstrap 4 Jumbotron Bootstrap offers Jumbotron, which is used to get more attention to specific content or information on the web page. It provides a gray background-color to the content to make that content...

2 minutes read.

Bootstrap 4 Grid System

Bootstrap 4 Grid Systems Bootstrap offers a responsive and mobile-first grid system with the help of which we can divide the screen of the web browser into 12 horizontal parts. It has predefined classes...

4 minutes read.

Bootstrap 4 Toast

Bootstrap 4 Toast Bootstrap 4 offers a Toast component, which is quite similar to the alert box and pushes notifications. The toast is visible on the screen for a few seconds when any...

5 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 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 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.

Dropdown & Dropup

Bootstrap Dropdowns The bootstrap dropdown menu is used to create a toggleable menu. It provides users to choose one value from a predefined list. Before creating dropdown menu, we have to know...

3 minutes read.

Bootstrap Toast Example

What are toasts? Toasts are similar to notifications, and they are lightweight and act as push notifications from mobile and desktop operating systems. They’re built using flexbox in Bootstrap. They can...

4 minutes read.

Bootstrap List group

Bootstrap list group provides a group of a list of items. The most basic list is an unordered list. We can use <ul> element with .list-group class and <li> element with .lsit-group-item. Let us see...

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 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 4 Margin classes

Bootstrap 4 contains a variety of brief, responsive margin and padding utility classes to change the appearance of an element. The Bootstrap 4 margin classes use for the outer spacing of...

8 minutes read.

Bootstrap Time Picker Example

What is a Bootstrap Time picker? It is used to display the time in hours, minutes and seconds from a dropdown menu. In this section, we will create an example to...

4 minutes read.

Bootstrap Validation Example

Validation We can provide valuable and actionable feedback to the users through an HTML form validation. It happens via custom styles or behaviors of default browsers and JavaScript. How does validation work...

4 minutes read.

Bootstrap Grid System Example

Bootstrap Grid System Example Stacked to horizontal – In stacked to the horizontal grid system, the grid columns are stacked on top of each other on extra small devices and becomes...

7 minutes read.

Bootstrap 4 Flex

Bootstrap 4 Flex Flex is a Bootstrap 4 component used to manage the layout, navigation bar, grid columns, sizing, alignment, and other components. The flexbox or flex utility is the replacement...

26 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.