1

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: enter image description here

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?

2 Answers 2

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>

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

2 Comments

But Isn't CSS grid?
CSS grid system is different from Bootstrap Grid system
0

Bootstrap divides a page into 12 sections Bootstrap

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

1 Comment

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.