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 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://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.
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.