How to create five equal columns in Bootstrap ?
Creating any number of equal columns in a ‘row’ was never as easier as it is now in Bootstrap 4.0+. With the introduction of ‘flexbox’ approach to the grid system, designers don’t have to worry about adding additional CSS to make it work. Here’s how it is done.
Approach:
- Go to the Bootstrap site and get the latest Bootstrap files onto your computer.
- Write a basic HTML template using these files.
- Once everything is set up, create a simple ‘container’ div inside <body> tag.
- Inside the ‘container’, create another div with class ‘row’, and as the name suggests, we are creating a row for handling columns. Populate the ‘row’ div with 5 divs with class ‘col’. Because Bootstrap 4.0+ grid system has now shifted to Flexbox, the columns will arrange themselves into five equally sized DOM elements.
Example:
<!DOCTYPE html>
< html >
< head >
< meta charset = "utf-8" >
< meta name = "viewport"
content = "width=device-width, initial-scale=1,shrink-to-fit=no" >
< link rel = "stylesheet"
href =
< script src =
</ script >
< script src =
</ script >
< style >
.row .col {
height: 100px;
}
</ style >
</ head >
< body >
< div class = "container px-5 py-5" >
< div class = "row" >
< div class = "col mx-1 bg-success" >1</ div >
< div class = "col mx-1 bg-success" >2</ div >
< div class = "col mx-1 bg-success" >3</ div >
< div class = "col mx-1 bg-success" >4</ div >
< div class = "col mx-1 bg-success" >5</ div >
</ div >
</ div >
</ body >
</ html >
|
Note: To distinguish between the columns, a small margin is added to each of the columns.
Output:
Last Updated :
23 Feb, 2023
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...