How to create five equal columns in Bootstrap ? Last Updated : 19 Sep, 2024 Summarize Comments Improve Suggest changes Share Like Article Like Report In Bootstrap, creating five equal columns means dividing a row into five evenly spaced columns. This can be achieved using the Flexbox-based grid system in Bootstrap 4+. Simply add five col elements inside a row, and Flexbox automatically distributes them equally.Approach:Download the latest Bootstrap files from the official Bootstrap website and include them in your project directory.Create a basic HTML template, linking the Bootstrap CSS and JavaScript files in the <head> section for proper functionality.Inside the <body> tag, create a container div to hold the layout elements, providing structure and alignment to the content.Within the container, create a row div to manage the columns using Bootstrap’s Flexbox grid system for responsive design.Populate the row with 5 div elements, each having the col class to create five equal-width columns automatically.Example: In this example we creates a Bootstrap-based layout with a row containing five equal-width columns. Each column is styled with a green background, padding, and margin, providing a responsive grid using Flexbox. html <!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" /> <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> <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: Comment More infoAdvertise with us Next Article How to Create a Multi-Column Footer in Bootstrap ? F feduser Follow Improve Article Tags : Web Technologies Bootstrap Bootstrap-Misc Similar Reads How to Create Equal Height Columns in Bootstrap ? This article will demonstrate how to create equal-height columns in Bootstrap. We will use different approaches to achieve equal heights using the bootstrap classes and methods. Table of ContentUsing Bootstrap and FlexboxUsing Bootstrap GridsUsing Bootstrap TableApproach 1: Using Bootstrap and Flexb 4 min read How to create unequal columns in Bootstrap ? Bootstrap is a responsive framework created by Twitter. It is used to create responsive sites. It has a pre-defined class and design. In Bootstrap, we can add pre-defined classes into the code without writing code. We also have a predefined ".col" class to create columns. Grid Layout System: The who 2 min read How to Create a Multi-Column Footer in Bootstrap ? Bootstrap offers a range of classes that can be employed to design web pages and apply diverse styles. Footers are a crucial element of web design, as they provide users with valuable information and navigation options. With Bootstrap, creating a multi-column footer that is visually appealing and re 3 min read How to Create Equal Height Columns in CSS ? Equal Height Columns in CSS refer to ensuring that multiple columns in a layout have the same height, regardless of the content inside each column. This can be achieved using modern CSS techniques like Flexbox, CSS Grid, or the Table display property.Table of ContentUsing FlexUsing GridUsing Table p 3 min read How to Create a Four-Column Layout with Bootstrap ? In Bootstrap, creating a column layout is important for organizing content into a structured grid system. A four-column layout allows for efficient arrangement of content, such as displaying courses, products, or services, with flexibility in responsiveness for various screen sizes. Below are the ap 2 min read How to make a Row with 7 Equal Columns in Bootstrap ? Bootstrap is the styling framework to make the web application more attractive. To create a row with 7 equal columns in Bootstrap, you can use the grid system by dividing the row into 12 columns and assigning each column a class such as col-1 for each of the 7 columns. This way, each column will occ 2 min read Like