CODEWITHSUNDEEP
htmlcsstwitter-bootstrapgrid
Swapnil Sourabh
Swapnil Sourabh

Reputation: 519

Maintaining dynamic heights in Bootstrap Column Divs

I have two rows written in a sequence. I am getting an output like this.Stackblitz link enter image description here

I need to get that RHS in the top right corner at the same level as LHS. Since I have simplified my actual question, please do not suggest having both LHS div and RHS div in the same class="row". I need to keep them seperate in different class="rows". I simply want RHS div to be at the top irrespective of LHS div.

 <div class="row">
    <div class="col-md-9">
     LHS DIV
     This is a div which can have a dynamic height.
    </div> 
</div>
<div class="row" style="margin-top: inherit;">
    <div class="col-md-9">
    </div>
    <div class="col-md-3">RHS DIV</div>
</div>

PS:

  1. I tried using margin-top: -30%; but the problem is this percentage is dependent on the height of the LHS div.
  2. Both LHS and RHS divs can be of variable height. Any help is welcomed.

Upvotes: 0

Views: 32

Answers (2)

Swapnil Sourabh
Swapnil Sourabh

Reputation: 519

For those who are still looking for a solution:

I later figured out that moving a particular div anywhere can be done by making that div's position as absolute.

<div class="container" style="position:relative">
<!-- LHS div code will be same -->
<div class="row">
    <div class="col-md-9">
    </div>
    <div class="col-md-3" style=" position: absolute;top: 0;right: 0;border: 1px solid red;">
    <strong>RHS div</strong></div>
</div>
</div>

enter image description here

More new and better approaches are welcomed:)

Upvotes: 0

Temani Afif
Temani Afif

Reputation: 272947

A solution using bootstrap classes

.rhs-div {
  border: 1px solid red;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">

<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="container d-md-flex">
  <div class="row mx-0">
    <div class="col-md-12" style="border:1px solid red">
      <strong>LHS DIV</strong> This is a div which can have a dynamic Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore esse quae quis eaque ab? Magnam tenetur id ducimus laudantium, optio quisquam eos ut dolorum sunt iure deserunt deleniti
      delectus voluptatibus.
    </div>


  </div>
  <div class="row mx-0">
    <div class="col-md-9 d-md-none">
    </div>
    <div class="col-md-12 rhs-div "><strong>RHS div</strong></div>
  </div>
</div>

Another one modifying only the CSS:

.rhs-div {
  border: 1px solid red;
}

@media (min-width:767px) {
  .container {
    display: flex;
  }
  .container .row{
    margin:0;
  }
  .container .row .col-md-9,
  .container .row .col-md-3{
    width:100%!important;
    max-width:100%!important;
    flex: 0 0 100%;
  }
  .container .row:last-child .col-md-9 {
    display:none;
  }
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">

<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="container">
  <div class="row">
    <div class="col-md-9" style="border:1px solid red">
      <strong>LHS DIV</strong> This is a div which can have a dynamic Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore esse quae quis eaque ab? Magnam tenetur id ducimus laudantium, optio quisquam eos ut dolorum sunt iure deserunt deleniti
      delectus voluptatibus.
    </div>


  </div>
  <div class="row">
    <div class="col-md-9">
    </div>
    <div class="col-md-3 rhs-div"><strong>RHS div</strong></div>
  </div>
</div>

Upvotes: 2

Related Questions