Container, Row, and Column: Understanding the structure
Bootstrap 4 is a popular framework for building responsive, mobile-first websites. It uses a grid system to create layouts, which is based on rows and columns. Here’s an explanation of how rows and columns work in Bootstrap 4, with examples.
Bootstrap 4 Grid System
The grid system in Bootstrap 4 is made up of 12 columns, and it's based on flexbox. It allows you to create responsive layouts where the columns can adjust themselves based on the screen size.
Rows
- Rows are horizontal groups of columns.
- The
.row
class is used to create a row. - All columns must be placed within a
.row
.
Columns
- Columns are the building blocks of the grid.
- The
.col-*
classes are used to specify the column widths. - Column widths are specified as numbers from 1 to 12.
Example: Basic Row and Column
Here's a basic example of a row with three equal-width columns:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap 4 Grid Example</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</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://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>
In this example, the .row
class creates a row, and each .col
class creates an equal-width column. Because no specific width is provided, each column takes up an equal portion of the row.
Example: Specified Column Widths
You can specify the width of each column by using the .col-*
classes. The following example shows a row with three columns of different widths:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap 4 Grid Example</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-4">Column 1 (4/12)</div>
<div class="col-8">Column 2 (8/12)</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.4/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>
In this example, the first column takes up 4 out of 12 parts of the row, while the second column takes up 8 out of 12 parts.
Example: Responsive Columns
You can make your columns responsive by using the responsive breakpoint classes. For example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap 4 Grid Example</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-12 col-md-8">Column 1 (12/12 on small screens, 8/12 on medium and larger screens)</div>
<div class="col-6 col-md-4">Column 2 (6/12 on small screens, 4/12 on medium and larger screens)</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.4/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>
In this example:
- On small screens (
col-12
andcol-6
), the first column takes up the entire row, and the second column takes up half of the row. - On medium and larger screens (
col-md-8
andcol-md-4
), the first column takes up 8 out of 12 parts of the row, and the second column takes up 4 out of 12 parts.
Conclusion
Bootstrap 4's grid system is a powerful tool for creating responsive layouts. By understanding how to use rows and columns, you can create complex layouts that adapt to different screen sizes.
At Online Learner, we're on a mission to ignite a passion for learning and empower individuals to reach their full potential. Founded by a team of dedicated educators and industry experts, our platform is designed to provide accessible and engaging educational resources for learners of all ages and backgrounds.
Terms Disclaimer About Us Contact Us
Copyright 2023-2025 © All rights reserved.