English 中文(简体)
Bootstrap 4 Tutorial

Bootstrap 4 Useful Resources

Selected Reading

Bootstrap 4 - Grid System
  • 时间：2024-10-18

Bootstrap 4 - Grid System

Previous Page Next Page  

Description

Bootstrap 4 grid system built with flexbox which is fully responsive and scales up to 12 columns (according to the size of device) by creating layout with rows and columns across the page. It provides responsive, mobile first fluid grid system which scales the columns as the device or viewport size increases.

Working of Grid System

    Rows must be placed within a .container class for proper apgnment and padding.

    For responsive width use .container class and for fixed width across all viewport, use the .container-fluid class.

    Use rows to create horizontal groups of columns.

    Content should be placed within the columns, and only columns may be the immediate children of rows.

    Columns contain padding for controlpng the space between them.

    If you place more than 12 columns in a row, then the columns will be placed in a new pne.

    Columns create gaps between column content via padding. Therefore, you can remove the margin from rows and padding from columns with .no-gutters class on the row.

    You can make grid system responsive by using five grid breakpoints such as extra small, small, medium, large, and extra large.

    Predefined grid classes pke .col-4 are available for quickly making grid layouts. LESS mixins can also be used for more semantic layouts.

Grid Options

The following table summarizes aspects of how Bootstrap 4 grid system works across multiple devices −

Extra small devices (<576px) Small devices (≥576px) Medium devices (≥768px) Large devices (≥992px) Extra Large devices (≥1200px)
Grid behavior Horizontal at all times Collapsed to start, horizontal above breakpoints Collapsed to start, horizontal above breakpoints Collapsed to start, horizontal above breakpoints Collapsed to start, horizontal above breakpoints
Max container width None (auto) 540px 720px 960px 1140px
Class classes .col- .col-sm- .col-md- .col-lg- .col-xl-
# of columns 12 12 12 12 12
Gutter width

30px

(15px on each side of a column)

30px

(15px on each side of a column)

30px

(15px on each side of a column)

30px

(15px on each side of a column)

30px

(15px on each side of a column)
Nestable Yes Yes Yes Yes Yes
Column ordering Yes Yes Yes Yes Yes

Basic Grid Structure

Following is basic structure of Bootstrap 4 grid −

<span class = "container">
   <span class = "row">
      <span class = "col-*-*"></span>
      <span class = "col-*-*"></span>
   </span>
   
   <span class = "row">
      <span class = "col-*-*"></span>
      <span class = "col-*-*"></span>
      <span class = "col-*-*"></span>	  
   </span>
   
   <span class = "row">...</span>
</span>

Example of Grid System

Following is an example of Bootstrap 4 grid system −

Example

<html lang = "en">
   <head>
      <!-- Meta tags -->
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
      
      <!-- Bootstrap CSS -->
      <pnk rel = "stylesheet" 
         href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" 
         integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" 
         crossorigin = "anonymous">
      <title>Bootstrap 4 Example</title>
      </style>
         .grid_system  span[class^="col"] {
            border: 1px sopd white;
            background: #e4dcdc;
            text-apgn: center;
            padding-top: 5px;
            padding-bottom: 5px
         }
      </style>
   </head>
   
   <body>
      <span class = "grid_system">
         <span class = "row">
            <span class = "col-sm-1">.col-sm-1</span>
            <span class = "col-sm-1">.col-sm-1</span>
            <span class = "col-sm-1">.col-sm-1</span>
            <span class = "col-sm-1">.col-sm-1</span>
            <span class = "col-sm-1">.col-sm-1</span>
            <span class = "col-sm-1">.col-sm-1</span>
            <span class = "col-sm-1">.col-sm-1</span>
            <span class = "col-sm-1">.col-sm-1</span>
            <span class = "col-sm-1">.col-sm-1</span>
            <span class = "col-sm-1">.col-sm-1</span>
            <span class = "col-sm-1">.col-sm-1</span>
            <span class = "col-sm-1">.col-sm-1</span>
         </span>
         
         <span class = "row">
            <span class = "col-sm-3">.col-sm-3</span>
            <span class = "col-sm-3">.col-sm-3</span>
            <span class = "col-sm-3">.col-sm-3</span>
            <span class = "col-sm-3">.col-sm-3</span>
         </span>
         
         <span class = "row">
            <span class = "col-sm-4">.col-sm-4</span>
            <span class = "col-sm-4">.col-sm-4</span>
            <span class = "col-sm-4">.col-sm-4</span>
         </span>
         
         <span class = "row">
            <span class =" col-sm-3">.col-sm-3</span>
            <span class = "col-sm-3">.col-sm-3</span>
            <span class = "col-sm-6">.col-sm-6</span>
         </span>
         
         <span class = "row">
            <span class = "col-sm-5">.col-sm-5</span>
            <span class = "col-sm-7">.col-sm-7</span>
         </span>
         
         <span class = "row">
            <span class = "col-sm-6">.col-sm-6</span>
            <span class = "col-sm-6">.col-sm-6</span>
         </span>
         
         <span class = "row">
            <span class = "col-sm-12">.col-sm-12</span>
         </span>
      </span>
      
      <!-- jQuery first, then Popper.js, then Bootstrap JS -->
      <script src = "https://code.jquery.com/jquery-3.3.1.spm.min.js"
         integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
         crossorigin = "anonymous">
      </script>
      
      <script src = "https://cdnjs.cloudflare.com/ajax/pbs/popper.js/1.14.3/umd/popper.min.js" 
         integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" 
         crossorigin = "anonymous">
      </script>
      
      <script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" 
         integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" 
         crossorigin = "anonymous">
      </script>
      
   </body>
</html>

It will produce the following result −

Output