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= 
"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" /> 
  
    <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= 
"https://code.jquery.com/jquery-3.2.1.slim.min.js"> 
  </script> 
    <script src= 
"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"> 
  </script> 
</body> 
  
</html> 

To distinguish between the columns, a small margin is added to each of the columns.

Output:

My Personal Notes

Recommended Posts: