Skip to content
Related Articles

Related Articles

How to create five equal columns in Bootstrap ?
  • Last Updated : 19 Jun, 2019

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:




My Personal Notes arrow_drop_up
Recommended Articles
Page :