How to Create a Multi-Column Footer in Bootstrap ?

How to create five equal columns in Bootstrap ?

Last Updated : 19 Sep, 2024

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:

How to Create a Multi-Column Footer in Bootstrap ?

F

feduser

Improve

Article Tags :

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

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

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

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 Content Using FlexUsing GridUsing Table

How to create full width container in bootstrap5?

Bootstrap containers are content holders that are used to align, add margins and padding to your content. Bootstrap has three different container classes, namely: .container .container-fluid .container-{breakpoint} Width of a container varies in accordance with its class. We can create a full width

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

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

How to Create Responsive Divs in Bootstrap ?

To create responsive divs in Bootstrap, utilize the grid system with container and row classes. Define columns using col classes and specify breakpoints for different screen sizes. This ensures divs adjust their layout and size responsively across devices. Below are the approaches to creating respon

How to create full width container using bootstrap?

Bootstrap offers two types of containers: fixed-width containers and full-width, fluid containers. The container-fluid class is used to create a full-width container that spans the entire width of the viewport, adjusting dynamically as the viewport size changes. Container Types in BootstrapFixed-Wid

How to create a basic button group in Bootstrap ?

Button: The .btn classes are used with the <button> element to create the basic button using Bootstrap. The buttons in bootstrap are used in forms, dialogs, etc. Button Groups in Bootstrap: In Bootstrap, button groups has group of buttons together on a single line. Button group is created usin