How to align height of neighboring columns in Bootstrap

Question

I want to achieve something like this:

Here's what, I am currently getting in Bootstrap:

I want to achieve the following:

Width ratios must be such that Sites : User : Download = 2:8:2
Sites-Banner, Sites-Search, Download-Banner, Download-Summary all should have same heights
User-Login must have combined height of Sites-Banner & Sites-Search (or Download-Banner & Download-Summary)
Heights of Sites-List, User-Operations, Download-Details must be independent and can extend as long as required.

Here's my code: Fiddle (Check Update 1)

<div>
  <div class="row">
    <div class="col-2">
      <div class="row">
        <div class="col bg-primary">
          <p id="sites-banner">Sites Banner</p>
        </div>
      </div>
      <div class="row">
        <div class="col bg-secondary">
          <p id="sites-search">Sites Search</p>
        </div>
      </div>
      <div class="row">
        <div class="col bg-success">
          <p id="sites-list">Sites List</p>
        </div>
      </div>
    </div>
    <div class="col-8">
      <div class="row">
        <div class="col bg-danger">
          <p id="user-login">User Login</p>
        </div>
      </div>
      <div class="row">
        <div class="col bg-warning">
          <p id="user-operations">User Operations</p>
        </div>
      </div>
    </div>
    <div class="col-2">
      <div class="row">
        <div class="col bg-info">
          <p id="downloader-banner">Download Banner</p>
        </div>
      </div>
      <div class="row">
        <div class="col bg-light">
          <p id="download-summary">Download Summary</p>
        </div>
      </div>
      <div class="row">
        <div class="col bg-dark">
          <p id="download-details">Download Details</p>
        </div>
      </div>
    </div>
  </div>
</div>

I am not able to align the height of User-Login with Sites-Banner & Sites-Search [Done : Update 1]
Sites-List, User-Operations & Download-Details do not extend independently

Update 1: New Code

I got the User-Login to have combined height of Sites-Banner & Sites-Search, by wrapping them in a single row (<div class="row">)
But I am still not able to get the heights of Sites-List, User-Operations, Download-Details to be independent.

Update 2: New Code

Got the heights of Sites-List, User-Operations, Download-Details to be look independent.
But the there's lot of padding in between columns, which introduces white space in between and makes them look not aligned

Update 3: Fiddle

Although in Update 2 code it may look like that Sites-List, User-Operations & Download Details have different heights, they actually do not. They look so since we have applied background-color classes only to div element that contains the list.

For the issue regarding padding in between columns that can be solved by applying a mx-0 class attribute on the two rows, to make margin as 0 Rows have a negative margin of -15 px by default. Checkout: Bootstrap negative margin on rows

Without mx-0 would cause a horizontal scrollbar on page. Checkout: Bootstrap columns cause horizontal scrollbar

Summary:

Treat row & col as Table's tr and td
Always put content in col
A col should necessarily have row as parent. Checkout: Bootstrap Grid Working & Guidlines

Maybe this helps a little https://stackoverflow.com/questions/16351404/bootstrap-combining-rows-rowspan — ikiK, Mar 29 '20 at 20:17
@ikiK Thanks! Now I understand that I needed to create 2 rows. Plz check the update, since I'm not able to get the heights of cols in row2 to be independent. — Dost Arora, Mar 29 '20 at 20:59

Dmytro Cheglakov · Accepted Answer · 2020-03-29T22:17:01.907

.col p{
  margin: 0;
}

.user-login{
  height: 100%
}

<!doctype html>
<html lang="en">

  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

    <title>Downloader</title>
  </head>

  <body>

    <div class="container-fluid">
      <div class="row">
        <div class="col">
          <div class="bg-primary">
            <p>Sites-Banner</p>
          </div>
          <div class="bg-secondary">
            <p>Sites-Search</p>
          </div>
        </div>
        <div class="col">
          <div class="bg-danger user-login">
            <p>User-Login</p>
          </div>
        </div>
        <div class="col">

          <div class="bg-info">
            <p>Download-Banner</p>
          </div>
            <div class="bg-light">
              <p>Download-Summary</p>
            </div>

        </div>
      </div>
      <div class="row">
        <div class="col">
          <div class="bg-success">
            <p>Sites-List</p>
            <p>Sites-List</p>
            <p>Sites-List</p>
            <p>Sites-List</p>
            <p>Sites-List</p>
            <p>Sites-List</p>
            <p>Sites-List</p>
            <p>Sites-List</p>
            <p>Sites-List</p>
            <p>Sites-List</p>
            <p>Sites-List</p>
            <p>Sites-List</p>
            <p>Sites-List</p>
            <p>Sites-List</p>
            <p>Sites-List</p>
          </div>
        </div>
        <!-- <div class="clearfix"></div> -->
        <div class="col">
          <div class="bg-warning">
            <p>User-Operations</p>
            <p>User-Operations</p>
            <p>User-Operations</p>
            <p>User-Operations</p>
            <p>User-Operations</p>
            <p>User-Operations</p>
            <p>User-Operations</p>
          </div>
        </div>
        <!-- <div class="clearfix"></div> -->
        <div class="col">
          <div class="bg-dark">
            <p>Download-Details</p>
            <p>Download-Details</p>
            <p>Download-Details</p>
            <p>Download-Details</p>
          </div>
        </div>
      </div>
    </div>

  </body>

</html>

Thanks! Now I understand that I needed to create 2 rows. Plz check the update, since I'm not able to get the heights of cols in row2 to be independent. — Dost Arora, Mar 29 '20 at 20:59
Thanks! I'm gonna accept your answer since it resolved both of my issues. But in the updated code, there's lot of padding in between columns, which introduces white space and makes them look not aligned. Is there anyway resolve that? — Dost Arora, Mar 29 '20 at 21:58

How to align height of neighboring columns in Bootstrap

1 Answers1