How to create unequal columns in Bootstrap ?
Last Updated :
10 Aug, 2021
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 whole working screen(desktop, tablet, mobile) is divided into 12 equal size rows. We can make unequal columns using the "col-number" class (pre-defined), where the number decides the ratio/size for that column and the number should be less than or equal to 12.
Step by step guide to implement unequal columns in bootstrap:
Step 1: Include Bootstrap and jQuery CDN into the <head> tag before all other stylesheets to load our CSS.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"> </script>
Step 2: Add class with .col-3 and .col-6 class to have unequal divisions of columns.
<div class=".col-3">
<!-- Column 1 content -->
</div>
<div class=".col-6">
<!-- Column 2 content -->
</div>
Step 3: Add <div> tag with class container-fluid and also add another <div> with class .row to have all the unequal columns in one row.
Example 1: The following example will create a 25%/50%/25% split of unequal columns length.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1">
<link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js">
</script>
<script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js">
</script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<! -- columns having unequal lengths -->
<! -- bg-success is background color -->
<div class="col-3 bg-success">col-3</div>
<div class="col-6 bg-warning">col-6</div>
<div class="col-3 bg-success">col-3</div>
</div>
</div>
</body>
</html>
Output:
25% /50%/ 25% split
Example 2: In the example below, we use two col elements, which get a width of 50% each of equal columns length. Bootstrap will recognize how many elements are present and accordingly create equal-width columns.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1">
<link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js">
</script>
<script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js">
</script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<! -- columns of equal width -->
<! -- bg-success is bg color -->
<div class="col bg-success">col</div>
<div class="col bg-warning">col</div>
</div><br/>
<div class="row">
<! -- columns having unequal lengths -->
<! -- bg-success is background color -->
<div class="col-3 bg-success">col-3</div>
<div class="col-6 bg-warning">col-6</div>
<div class="col-3 bg-success">col-3</div>
</div>
</div>
</body>
</html>
Output:
row1:- 50%/50% split, row2:- 25%/50%/25% split
Similar Reads
How to create five equal columns in Bootstrap ? 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 Bootstr
2 min read
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 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 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 Create a Basic Two-Column Layout using Bootstrap 5 ? To create a basic two-column layout using Bootstrap, first, we have to enclose your content within a container, then create two divs with classes like col or col-xx, where xx represents the breakpoint for responsive behavior. Place your content inside these columns, and Bootstrap will handle the lay
3 min read
How to Create Columns in WordPress? WordPress is a powerful platform that offers a range of features to help you create a professional-looking website. One of the most useful features is the ability to create columns, which can help you organize your content and make it more visually appealing. In this article, we will see the complet
2 min read