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 of 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 by 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 = < title >5 cols a row</ title > < style > .row .col { height: 100px; background: green; } </ style > </ head > < body > < div class = "container px-5 py-5" > < div class = "row" > < div class = "col mx-1" >1</ div > < div class = "col mx-1" >2</ div > < div class = "col mx-1" >3</ div > < div class = "col mx-1" >4</ div > < div class = "col mx-1" >5</ div > </ div > </ div > < script src = </ script > < script src = </ script > </ body > </ html > |
To distinguish between the columns, a small margin is added to each of the columns.
Output: