Bootstrap Columns
From bootstrap 4 onwards columns are built on the grid's flexbox architecture which means columns can be changed or modified. . Bootstrap Grid System consists of containers, rows, and columns. When grid layouts are built all content goes to columns. There are predefined classes for creating fast and responsive layouts in bootstrap. You can add up to 12 columns along each row in the grid.
Bootstrap Column Alignment
Flexbox alignment utilities are used to align columns horizontally or vertically in Bootstrap. Here is a list of alignment used for aligning columns within the grid system.
- .justify-content-start -It is used to align all the columns to the starting of the row.
- .justify-content-end - It is used to align all the columns to the end of the row.
- .justify-content-center - It is used to align all the columns to the center of the row.
- .justify-content-between - It is used to create space between columns.
- .justify-content-around - It is used to create space around columns.
Example: Aligning columns using Bootstrap
Let us take an example of the aligning columns horizontally. The above set of classes has been used to demonstrate different types of alignment used.
<!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.0.0/dist/css/bootstrap.min.css" rel="stylesheet" >
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" ></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.min.js" ></script>
<style>
.container{
background-color:pink;
}
div{
border: 1px solid black;
}
</style>
</head>
<body>
<div class="container">
<div class="row justify-content-start">
<div class="col-4">
column 1
</div>
<div class="col-4">
column 2
</div>
</div>
<div class="row justify-content-center">
<div class="col-4">
column1.1
</div>
<div class="col-4">
column 1.2
</div>
</div>
<div class="row justify-content-end">
<div class="col-4">
column 2.1
</div>
<div class="col-4">
column 2.2
</div>
</div>
<div class="row justify-content-around">
<div class="col-4">
column 3.1
</div>
<div class="col-4">
column 3.2
</div>
</div>
<div class="row justify-content-between">
<div class="col-4">
column 4.1
</div>
<div class="col-4">
column 4.2
</div>
</div>
<div class="row justify-content-evenly">
<div class="col-4">
column 5.1
</div>
<div class="col-4">
column 5.2
</div>
</div>
</div>
</body>
</html>
Output:
Here is the output demonstrating the horizontal alignment of columns.
Bootstrap Column Wrapping
If more than 12 columns are placed in one line. The extra column will wrap onto another line.
Example: Adding column wrapping using Bootstrap
In the below example total value for three columns is greater than 12. As the total value of the first and second column is greater than 12, second column split up comes in the next line.
<!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.0.0/dist/css/bootstrap.min.css" rel="stylesheet" >
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" ></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.min.js" ></script>
</head>
<body>
<div class="container">
<h2> Bootstrap columns </h2>
<div class="row bg-info">
<div class="col-9 bg-light" >.col-9</div>
<div class="col-4 bg-danger" >.col-4</div>
<div class="col-6 bg-warning" >.col-6</div>
</div>
</div>
</body>
</html>
Output:
Here is the output for column wrapping.
Bootstrap Column Breaks
For breaking columns into new lines add an element with width:100%. It will wrap the column to a new line.
Example: Creating column breaks using Bootstrap
Let us take an example of a column break. Add .w-100 class to break columns to the next line. Here in the first-row column 2 breaks up to the next line. similarly, in the next row column, 5 breaks to the next line.
<!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.0.0/dist/css/bootstrap.min.css" rel="stylesheet" >
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" ></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.min.js" ></script>
</head>
<body>
<div class="container ">
<h2> Bootstrap Columns </h2>
<div class="row bg-dark">
<div class="col-4 bg-success ">.col-1</div>
<div class="col-4 bg-info ">.col-2</div>
<div class="w-100"></div>
<div class="col-4 bg-light">.col-3</div>
</div>
<div class="row bg-secondary">
<div class="col-6 bg-danger">.col-4</div>
<div class="w-100"></div>
<div class="col-4 bg-warning ">.col-5</div>
</div>
</div>
</body>
</html>
Output:
Here is the output for column breaks.
Conclusion
So here we have seen how we can add columns to the grid system. Further, we have seen different alignment classes used to align columns. You can split the column to the next row using the wrapper and fixing the width 100%. Columns play an important role while designing layouts in bootstrap.
