[ANSWERED] html – Maintaining dynamic heights in Bootstrap Column Divs

Question 1

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>

Question 2

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>

More new and better approaches are welcomed:)

Question 3

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

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:

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

Bollate

[ANSWERED] html – Maintaining dynamic heights in Bootstrap Column Divs

By

Solution 1 :

Solution 2 :

Problem :

Comments

Comment posted by Swapnil Sourabh

By

Related Post

[ANSWERED] html – How to import/veiw STL files in a wordpress website?

[ANSWERED] javascript – How to handle repeating values in JQuery

[ANSWERED] java – How to send dropdown value to servlet NOT the option text

You missed

[ANSWERED] javascript – Text box to display updated text and save on button click

[ANSWERED] javascript – Pass html tag to angularjs variable from controller

[ANSWERED] html – bootstrap mobile menu not scrolling instead the background is scrolling

[ANSWERED] html – How to play live stream YouTube videos using CEF4Delphi?

Bollate