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 the viewport or screen into 12 columns. It also provides predefined Bootstrap grid classes that help to make a grid very quickly for devices such as cell phones, tablets, laptops, etc.
The bootstrap 4 grid system also arranges the columns and the content inside the column automatically according to the screen size.
Grid Classes
- .col-* = This class is used to create grid layout (columns) on extra small devices having screen width less than 576 px.
- .col-sm-* = This class is used to create grid layout (columns) on small devices having screen width equal to or greater than 576 px.
- .col-md-* = This class is used to create grid layout (columns) on medium devices having screen width equal to or greater than 768 px.
- .col-lg-* = This class is used to create grid layout (columns) on large devices having screen width equal to or greater than 992 px.
- .col-xl-* = This class is used to create grid layout (columns) on extra-large devices having screen width equal to or greater than 1200 px.
Grid System Rules
- The rows should be placed inside the .container class for fixed width or .container-fluid class for full width to provide proper alignment or padding to the content.
- Use .row class to make a group of columns.
- All the content must be placed in the columns only. The columns are the immediate children of row.
- The .row class and .col-sm/md/lg-* class are used to create a quick grid layout. Where, * = 1 to 12.
- The columns create a gap between column content through padding. That padding acts as an offset in rows for the first and last column by providing a negative margin to the rows.
- To create a grid column, you need to specify the number of columns you want to create.
- The column widths are always specified in percentage.
- The main difference between the bootstrap 3 and bootstrap 4 is that Bootstrap 4 uses flexbox instead of floats that are used in bootstrap 3.
Basic Structure of Bootstrap 4 Grid System
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap 4 Grid System 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.4.1/css/bootstrap.min.css"> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous"> <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.4.1/js/bootstrap.min.js"></script> </head> <body><div class="container-fluid"> <h1>Basic Grid Structure</h1> <p>When you resize the browser, you will see the effect.</p> <div class="container-fluid"> <!-- Control the column width, and how they should appear on different devices --> <div class="row"> <div class="col-sm-6" style="background-color:yellow;">50%</div> <div class="col-sm-6" style="background-color:orange;">50%</div> </div> <br> <div class="row"> <div class="col-sm-4" style="background-color:yellow;">33.33%</div> <div class="col-sm-4" style="background-color:orange;">33.33%</div> <div class="col-sm-4" style="background-color:yellow;">33.33%</div> </div> <br> <!-- Or let Bootstrap automatically handle the layout --> <div class="row"> <div class="col-sm" style="background-color:yellow;">25%</div> <div class="col-sm" style="background-color:orange;">25%</div> <div class="col-sm" style="background-color:yellow;">25%</div> <div class="col-sm" style="background-color:orange;">25%</div> </div> <br> <div class="row"> <div class="col" style="background-color:yellow;">25%</div> <div class="col" style="background-color:orange;">25%</div> <div class="col" style="background-color:yellow;">25%</div> <div class="col" style="background-color:orange;">25%</div> </div> </div> </div> </body> </html>
Output:
Grid Options
| Extra Small (<576px) | Small (>=576px) | Medium (>=768px) | Large (>=992px) | Extra Large (>=1200px) | |
| Class prefix | .col- | .col-sm- | .col-md- | .col-lg- | .col-xl- |
| Grid Behaviour | Always Horizontal | Collapsed to start, horizontal above breakpoints | Collapsed to start, horizontal above breakpoints | Collapsed to start, horizontal above breakpoints | Collapsed to start, horizontal above breakpoints |
| Container Width | None (auto) | 540px | 720px | 960px | 1140px |
| Suitable for | Portrait phones | Landscape phones | Tablets | Laptops | Laptops and Desktops |
| # of columns | 12 | 12 | 12 | 12 | 12 |
| Gutter with | 30px (15px on both sides of column) | 30px (15px on both sides of column) | 30px (15px on both sides of column) | 30px (15px on both sides of column) | 30px (15px on both sides of column) |
| Nestable | Yes | Yes | Yes | Yes | Yes |
| Offsets | Yes | Yes | Yes | Yes | Yes |
| Column Ordering | Yes | Yes | Yes | Yes | Yes |