How to create unequal columns using bootstrap col class

Question

I have been assigned to make the below layout using 3 methods.

Using Div's
Using CSS Grid System of Bootstrap
Using Row & Col class of Bootstrap

Here is the demo layout:

I have made layout using Div's & CSS grid system but I am unable to design the main content & sidebar using row & col classes of bootstrap because It does not allow to make unequal columns.

Is there anyway to achieve this using Col & Row classes of bootstrap?

Sara · Accepted Answer · 2020-11-01 16:29:28Z

0

You can use bootstrap col- classes for creating unequal columns

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

<div class="row">
  <div class="col-12" style="background-color:orange;">12/12</div>
  <div class="col-12" style="background-color:gray;">12/12</div>
  <div class="col-9" style="background-color:wheat;">9/12</div>
  <div class="col-3" style="background-color:aliceblue;">3/12</div>
</div>

answered Nov 1, 2020 at 16:29

Sara

7513 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

MOAZ ALI Over a year ago

But Isn't CSS grid?

Sara Over a year ago

CSS grid system is different from Bootstrap Grid system

Sanlyn · Accepted Answer · 2020-11-01 16:51:39Z

0

Bootstrap divides a page into 12 sections

You can divide sections into <div class="container"><div> and then inside into <div class="row"><div> and then the row can be modified by <div class="col-[SCREEN_SIZE]-[NUMBER_OF_SECTIONS]"><div>.

For SCREEN_SIZE check out: https://www.w3schools.com/bootstrap/bootstrap_grid_system.asp

NUMBER_OF_SECTIONS: 1-12

answered Nov 1, 2020 at 16:51

Sanlyn

1691 silver badge12 bronze badges

1 Comment

Sanlyn Over a year ago

You can also ignore the SCREEN_SIZE component and just write for an example: col-12

Collectives™ on Stack Overflow

How to create unequal columns using bootstrap col class

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related