WEB DEVELOPER SITE
HTMLCSSJAVASCRIPTSQLPHPBOOTSTRAPJQUERYANGULARXML
 

Bootstrap 4 - Grid System


Grid systems enable you to create advanced layouts using rows and columns. The Bootstrap grid system can have up to 12 columns, and you can specify how these columns scale for different viewport sizes.

Working of Grid System

  • Rows must be placed within a .container class for proper alignment 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 controlling the space between them.

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

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

    Grid Options

    Extra small <576px Small ≥576px Medium ≥768px Large ≥992px Extra large ≥1200px
    Grid behavior Horizontal at all times Collapsed to start, horizontal above breakpoints
    Max container width None (auto) 540px 720px 960px 1140px
    Class prefix .col- .col-sm- .col-md- .col-lg- .col-xl-
    Number of columns 12
    Gutter width 30px (15px on each side of a column)
    Nestable Yes
    Column ordering Yes

    Basic Grid Structure

    Following is basic structure of Bootstrap 4 grid −

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

    Following is an example of Bootstrap 4 grid system −

    <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 -->
          <link 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  div[class^="col"] {
                border: 1px solid white;
                background: #e4dcdc;
                text-align: center;
                padding-top: 5px;
                padding-bottom: 5px
             }
          </style>
       </head>
       
       <body>
          <div class = "grid_system">
             <div class = "row">
                <div class = "col-sm-1">.col-sm-1</div>
                <div class = "col-sm-1">.col-sm-1</div>
                <div class = "col-sm-1">.col-sm-1</div>
                <div class = "col-sm-1">.col-sm-1</div>
                <div class = "col-sm-1">.col-sm-1</div>
                <div class = "col-sm-1">.col-sm-1</div>
                <div class = "col-sm-1">.col-sm-1</div>
                <div class = "col-sm-1">.col-sm-1</div>
                <div class = "col-sm-1">.col-sm-1</div>
                <div class = "col-sm-1">.col-sm-1</div>
                <div class = "col-sm-1">.col-sm-1</div>
                <div class = "col-sm-1">.col-sm-1</div>
             </div>
             
             <div class = "row">
                <div class = "col-sm-3">.col-sm-3</div>
                <div class = "col-sm-3">.col-sm-3</div>
                <div class = "col-sm-3">.col-sm-3</div>
                <div class = "col-sm-3">.col-sm-3</div>
             </div>
             
             <div class = "row">
                <div class = "col-sm-4">.col-sm-4</div>
                <div class = "col-sm-4">.col-sm-4</div>
                <div class = "col-sm-4">.col-sm-4</div>
             </div>
             
             <div class = "row">
                <div class =" col-sm-3">.col-sm-3</div>
                <div class = "col-sm-3">.col-sm-3</div>
                <div class = "col-sm-6">.col-sm-6</div>
             </div>
             
             <div class = "row">
                <div class = "col-sm-5">.col-sm-5</div>
                <div class = "col-sm-7">.col-sm-7</div>
             </div>
             
             <div class = "row">
                <div class = "col-sm-6">.col-sm-6</div>
                <div class = "col-sm-6">.col-sm-6</div>
             </div>
             
             <div class = "row">
                <div class = "col-sm-12">.col-sm-12</div>
             </div>
          </div>
          
          <!-- jQuery first, then Popper.js, then Bootstrap JS -->
          <script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js"
             integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
             crossorigin = "anonymous">
          </script>
          
          <script src = "https://cdnjs.cloudflare.com/ajax/libs/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 −

    Bootstrap 4 Example .grid_system div[class^="col"] { border: 1px solid white; background: #e4dcdc; text-align: center; padding-top: 5px; padding-bottom: 5px }
    .col-sm-1
    .col-sm-1
    .col-sm-1
    .col-sm-1
    .col-sm-1
    .col-sm-1
    .col-sm-1
    .col-sm-1
    .col-sm-1
    .col-sm-1
    .col-sm-1
    .col-sm-1
    .col-sm-3
    .col-sm-3
    .col-sm-3
    .col-sm-3
    .col-sm-4
    .col-sm-4
    .col-sm-4
    .col-sm-3
    .col-sm-3
    .col-sm-6
    .col-sm-5
    .col-sm-7
    .col-sm-6
    .col-sm-6
    .col-sm-12