Hello guys how are you? Welcome back to my blog. Today in this blog post I am going to know you Basic Guide to Managing Rows and Columns in Bootstrap 5.
Bootstrap 5 provides a powerful grid system to create responsive layouts easily. Here’s a basic guide to managing rows and columns in Bootstrap 5.
Guys learn more bootstrap stuff here : Click here
Basic Concepts
- Container: This is the outermost element. You use it to contain rows and columns.
- Row: Rows are used to create a horizontal group of columns.
- Column: Columns are used to create vertical alignments. Bootstrap uses a 12-column grid system.
Creating a Container
You start by creating a container. There are two types of containers in Bootstrap:
.container: A responsive fixed-width container..container-fluid: A full-width container that spans the entire width of the viewport.
<div class="container"> <!-- Content here --> </div> <div class="container-fluid"> <!-- Content here --> </div>
Creating Rows and Columns
Within a container, you create rows using the .row class. Inside rows, you create columns using the .col class.
<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>
In the example above, three equal-width columns are created within a row. By default, columns are equal in width.
Specifying Column Width
Bootstrap’s grid system allows you to specify the width of columns. The grid is divided into 12 equal parts.
<div class="container">
<div class="row">
<div class="col-4">
Column 1 (4 units wide)
</div>
<div class="col-8">
Column 2 (8 units wide)
</div>
</div>
</div>
Responsive Columns
You can create responsive layouts by specifying column widths for different breakpoints. The breakpoints are:
col-for all screen sizes (extra small and up)col-sm-for small devices (≥576px)col-md-for medium devices (≥768px)col-lg-for large devices (≥992px)col-xl-for extra large devices (≥1200px)col-xxl-for extra extra large devices (≥1400px)
<div class="container">
<div class="row">
<div class="col-12 col-md-8">
Column 1 (full width on small screens, 8 units on medium and larger screens)
</div>
<div class="col-6 col-md-4">
Column 2 (6 units on small screens, 4 units on medium and larger screens)
</div>
</div>
</div>
Offset Columns
You can offset columns to create gaps between them.
<div class="container">
<div class="row">
<div class="col-4">
Column 1
</div>
<div class="col-4 offset-4">
Column 2 (offset by 4 units)
</div>
</div>
</div>
Nesting Columns
You can nest rows and columns within columns to create more complex layouts.
<div class="container">
<div class="row">
<div class="col">
Level 1: Column 1
<div class="row">
<div class="col">
Level 2: Column 1
</div>
<div class="col">
Level 2: Column 2
</div>
</div>
</div>
</div>
</div>
Example
Here’s a complete example demonstrating various concepts:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap Grid Example</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-12 col-md-6 col-lg-4">
Column 1
</div>
<div class="col-12 col-md-6 col-lg-4">
Column 2
</div>
<div class="col-12 col-md-12 col-lg-4">
Column 3
</div>
</div>
<div class="row">
<div class="col-6 offset-3 col-md-4 offset-md-4">
Offset Column
</div>
</div>
<div class="row">
<div class="col">
Nested Column
<div class="row">
<div class="col">
Nested Column 1
</div>
<div class="col">
Nested Column 2
</div>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
This should give you a solid foundation to start working with rows and columns in Bootstrap 5.
This is it guys and if you will have any kind query, suggestion or requirement then feel free to comment below.
Thanks
Ajay
Recent Comments