Bootstrap nested rows and columns
In Bootstrap, nested rows and columns allow for more complex and flexible layouts within a grid system. This feature lets you create multi-level layouts where columns themselves contain rows and columns, making it possible to build intricate and responsive designs.
Understanding Nested Rows and Columns
Rows: A row is a horizontal container for columns. In Bootstrap, columns must be placed inside a row. Rows are used to create horizontal groups of columns.
Columns: Columns are the individual units within a row that determine how much space each section of content will occupy. By default, Bootstrap's grid system uses a 12-column layout.
How to Create Nested Rows and Columns
To nest rows and columns, you place a row inside a column, and then place columns inside that nested row. This allows you to create a grid within a grid.
Basic Example
Here’s a simple example to illustrate how nested rows and columns work:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap Nested Rows and Columns</title>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-beta1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="row">
<!-- First Level Columns -->
<div class="col-md-6">
<div class="p-3 mb-2 bg-primary text-white">Column 1</div>
<!-- Nested Row -->
<div class="row">
<div class="col-6">
<div class="p-3 mb-2 bg-secondary text-white">Nested Column 1</div>
</div>
<div class="col-6">
<div class="p-3 mb-2 bg-success text-white">Nested Column 2</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="p-3 mb-2 bg-danger text-white">Column 2</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.2/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-beta1/js/bootstrap.min.js"></script>
</body>
</html>
Explanation
Top-Level Row: The
.rowclass creates a horizontal group of columns.- Column 1: Contains a nested row.
- Column 2: A standard column.
Nested Row: Inside Column 1, a new
.rowclass is used to start another horizontal group of columns.- Nested Column 1 and Nested Column 2: These columns are inside the nested row and take up half of the width each.
Key Points About Nested Rows and Columns
- Maintain Grid Structure: Nested rows must be inside columns. You cannot place a row directly inside another row; it must be within a column.
- Responsive Design: Nested columns also respond to screen sizes, so you can create complex layouts that adjust to various devices.
- Consistency: Use nested columns to maintain consistent alignment and spacing within your grid layout.
- Alignment and Spacing: Nesting allows for fine-tuned control over alignment and spacing, which can be useful for complex layouts.
Advanced Example
For more complex layouts, you might nest rows and columns multiple times:
<div class="container">
<div class="row">
<div class="col-lg-4">
<div class="p-3 mb-2 bg-primary text-white">Column 1</div>
<div class="row">
<div class="col-12">
<div class="p-3 mb-2 bg-secondary text-white">Nested Column 1</div>
</div>
<div class="col-12">
<div class="row">
<div class="col-6">
<div class="p-3 mb-2 bg-success text-white">Nested Column 1.1</div>
</div>
<div class="col-6">
<div class="p-3 mb-2 bg-warning text-white">Nested Column 1.2</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-8">
<div class="p-3 mb-2 bg-danger text-white">Column 2</div>
</div>
</div>
</div>