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:



filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


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

Output:



My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.




Article Tags :

Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.