CODEWITHSUNDEEP
htmlflexboxbootstrap-4
donV
donV

Reputation: 1091

How do I stretch nested columns with Bootstrap 4

Given this layout example:

https://www.codeply.com/go/Xw4cYl3kwu

The "HEADER" column is fixed-height. All the other columns have variable content with variable height depending on the page shown.

How can I make the "MENU" and "CONTENT" columns stretch down to the "FOOTER"?

Upvotes: 1

Views: 803

Answers (1)

Henrik Clausen
Henrik Clausen

Reputation: 729

Well if you can use flexbox then this could be a solution:

<div class="container-fluid">
  <div class="row" >
    <div class="col-9 bg-danger" style="display:flex;flex-direction: column">
      <div class="row" style="height: 3rem">
        <div class="col-12" >
          <h1 class="text-center">HEADER</h1>
        </div>
      </div>
      <div class="row" style="flex-grow:1">
        <div class="col-3 bg-success">MENU</div>
        <div class="col-9 bg-warning">CONTENT</div>
      </div>
    </div>
    <div class="col-3 bg-info">
      <p>SIDEBAR</p>
      <p>SIDEBAR</p>
      <p>SIDEBAR</p>
      <p>SIDEBAR</p>
    </div>
  </div>
  <div class="row bg-primary">
    <div class="col-12">
      <div class="text-center">FOOTER</div>
    </div>
  </div>
</div>

Upvotes: 2

Related Questions