CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Nunners
Nunners

Reputation: 17

How make some boostrap columns taller than other?

So basically I'm still a begginer when it comes to doing interfaces on the web and trying to allign everything properly. I've decided to use the bootstrap library. I'm trying to make a modal dialog divided into multiple section but i'm really struggling to make some section stack on top of each other and have another section take up the entire space.

What I currently have : https://i.gyazo.com/adeeb3cca0abb6dea4a5d002d3568afa.png

What I'm trying to achieve : https://i.gyazo.com/e8513c243424cb71926ac838e8b1166e.png

This is the code I currently have with some sample text to try to delimiter each section : 

<div class='container-fluid'>
  <div class="row">
   <div class="col-md-3" style='border:1px solid black;max-height:5vh;'>
      STATUS
   </div>
   <div class="col-md-9" style='border:1px solid black;min-height:50vh;'>
     L
   </div>
   <div class="col-md-3">
      SOME TEXT ASDASDASDJLASDJKLASDJAD
      ASDASDLASKD
      aASDASDK:ASDKASDK
      ASDASJDASDASDKASJDASDJ
   </div>
   <div class="col-md-9">
     L
   </div>
 </div>
</div>

Upvotes: 1

Views: 44

Answers (2)

Ebby
Ebby

Reputation: 534

You keep two main columns (3/9) and inside the first column you can add more container. You can also add styles or classes to them. 

<div class="container-fluid">
    <div class="row" >
        <div class="col-md-3" style='border:1px solid black;min-height:50vh;'>
            <div style="min-height:10vh">10vh</div>
            <div style="min-height:20vh">10vh</div>
            <div style="min-height:10vh">10vh</div>
            <div style="min-height:10vh">10vh</div>
        </div>

        <div class="col-md-9" style='border:1px solid black;min-height:50vh;'>L</div>
    </div>
</div>

Upvotes: 0

crenshaw-dev
crenshaw-dev

Reputation: 8344

To match the image you've provided, you want two columns - one three wide with four rows, and one nine wide with one row.

The height of the rows in the left column will be determined by their contents. I've written an example with extra content in one row in the left column:

<div class="container">
  <div class="row">
    <div class="col-sm-3">
      <div class="row">
        3
      </div>
      <div class="row">
        3<br>
        wide<br>
        but<br>
        taller
      </div>
      <div class="row">
        3
      </div>
      <div class="row">
        3
      </div>
    </div>
    <div class="col-sm-9">
      9
    </div>
  </div>
</div>

JSFiddle for a live example.

Upvotes: 1

Related Questions