Bootstrap – Grids
The Bootstrap grid system is a powerful tool for creating responsive web layouts. It is based on a 12-column layout and uses a series of containers, rows, and columns to align content. Here’s a comprehensive guide to understanding the Bootstrap grid system:
Basic Structure
- Container: The container is the fundamental building block of Bootstrap’s grid system. It provides a responsive fixed-width or fluid-width layout.
.container: Provides a responsive fixed-width container..container-fluid: Provides a full-width container, spanning the entire width of the viewport.
- Rows: Rows are horizontal groups of columns that ensure columns are properly aligned and contain gutters (spacing) between them.
- Use the
.rowclass to create a row.
- Use the
- Columns: Columns are vertical divisions of the page layout. Bootstrap uses a 12-column grid layout to create responsive web designs.
- Columns are added inside rows and use the class prefix
.col-.
- Columns are added inside rows and use the class prefix
Creating a Basic Grid
Here’s a basic example of a Bootstrap grid layout:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap Grid System</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="row">
<div class="col">Column 1</div>
<div class="col">Column 2</div>
<div class="col">Column 3</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>Responsive Breakpoints
Bootstrap columns can be responsive, meaning they can change based on the screen size. The responsive breakpoints are:
.col-: Extra small devices (portrait phones, less than 576px).col-sm-: Small devices (landscape phones, 576px and up).col-md-: Medium devices (tablets, 768px and up).col-lg-: Large devices (desktops, 992px and up).col-xl-: Extra large devices (large desktops, 1200px and up).col-xxl-: Extra extra large devices (larger desktops, 1400px and up)
Example of responsive columns:
<div class="container">
<div class="row">
<div class="col-12 col-sm-6 col-md-4">Column</div>
<div class="col-12 col-sm-6 col-md-4">Column</div>
<div class="col-12 col-sm-6 col-md-4">Column</div>
</div>
</div>Column Sizing
Columns can be sized to fit different screen sizes using numbers 1 through 12. For example:
<div class="container">
<div class="row">
<div class="col-6">.col-6</div>
<div class="col-6">.col-6</div>
</div>
<div class="row">
<div class="col-4">.col-4</div>
<div class="col-4">.col-4</div>
<div class="col-4">.col-4</div>
</div>
</div>Offsetting Columns
Columns can be offset to push them to the right. For example:
<div class="container">
<div class="row">
<div class="col-4 offset-4">.col-4 .offset-4</div>
</div>
</div>Nesting Columns
Columns can also be nested to create more complex layouts:
<div class="container">
<div class="row">
<div class="col-8">
Level 1: .col-8
<div class="row">
<div class="col-6">Level 2: .col-6</div>
<div class="col-6">Level 2: .col-6</div>
</div>
</div>
<div class="col-4">.col-4</div>
</div>
</div>Auto Layout Columns
Using just .col will automatically adjust the size of the columns based on the number of columns in the row:
<div class="container">
<div class="row">
<div class="col">Auto</div>
<div class="col">Auto</div>
<div class="col">Auto</div>
</div>
</div>Utility Classes
Bootstrap also provides various utility classes to control spacing, alignment, and visibility of the columns and rows:
Visibility: .d-none, .d-sm-block, .d-md-none for controlling visibility based on screen size.
Spacing: .m-, .p-, .mt-, .mb-, .ml-, .mr- for margins and paddings.
Alignment: .align-items-start, .align-items-center, .align-items-end for vertical alignment.