Grid Basics
The Bootstrap grid system is a powerful layout tool that uses rows and columns to structure and align content in a flexible and responsive way. It’s built upon a 12-column layout and utilizes a series of containers, rows, and columns to help designers and developers build responsive and aesthetically pleasing web layouts.
What is the Bootstrap Grid?
The Bootstrap grid system is a powerful layout tool that allows developers to create responsive designs with ease. It is based on a 12-column layout, where you can define how many columns a particular element should span. The grid system helps in arranging content in a flexible and structured way across different devices and screen sizes.
Key aspects of the Bootstrap grid include:
- Container: A wrapper that holds the grid system, providing proper alignment and spacing.
- Rows: Horizontal groups of columns that are used to create a grid structure.
- Columns: Vertical divisions within a row that can be resized and adjusted for different screen sizes using predefined classes.
- Responsive Breakpoints: Allows you to specify how your layout should adjust at different screen widths (e.g., xs, sm, md, lg, xl).
Components of the Grid System
- Columns: Vertical sections where content is placed.
- Gutters: Space between columns for separation.
- Margins: Outer space around the grid to avoid content touching edges.
- Rows: Horizontal divisions that align content vertically.
- Modules: Units formed by the intersection of rows and columns.
- Flowlines: Horizontal guides for consistent alignment.
- Zones: Grouped modules for larger content areas.
- Breakpoints: Points where layout adjusts for different screen sizes (in responsive design).
Input Code Examples
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="row">
<div class="col-md-4 grid-item">
<h5>Column 1</h5>
<p>Content for column 1.</p>
</div>
<div class="col-md-4 grid-item">
<h5>Column 2</h5>
<p>Content for column 2.</p>
</div>
<div class="col-md-4 grid-item">
<h5>Column 3</h5>
<p>Content for column 3.</p>
</div>
</div>
</body>
</html>
Output Example
Input Example 2:
This example shows a 2-column layout that stacks on smaller screens:
Input Code Examples
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="row">
<div class="col-md-6 grid-item">
<h5>Left Column</h5>
<p>Content for the left column.</p>
</div>
<div class="col-md-6 grid-item">
<h5>Right Column</h5>
<p>Content for the right column.</p>
</div>
</div>
</body>
</html>
Output Example
Input Example 3:
This example demonstrates a layout with uneven column sizes:
Input Code Examples
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="row">
<div class="col-md-8 grid-item">
<h5>Main Column</h5>
<p>This column takes up 8 parts of the grid.</p>
</div>
<div class="col-md-4 grid-item">
<h5>Sidebar Column</h5>
<p>This column takes up 4 parts of the grid.</p>
</div>
</div>
</body>
</html>
Output Example
