How to create unequal columns in Bootstrap ?

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
Bootstrap-Questions
Picked
Bootstrap
HTML
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to Show Images on Click using HTML ?
How to Use Bootstrap with React?
How to set vertical alignment in Bootstrap ?
Tailwind CSS vs Bootstrap
How to toggle password visibility in forms using Bootstrap-icons ?
How to update Node.js and NPM to next version ?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?
REST API (Introduction)
Hide or show elements in HTML using display property