CODEWITHSUNDEEP
bootstrap-4
Florence
Florence

Reputation: 1721

boostrap div with variable column length

In my HTML page , i have 2 parties the second part is not always displayed.

I want that if the 2nd part is not displayed, the 1st takes 100% of the width of the page my code :

<div class="container-fluid  d-flex flex-row">
  <div>
      1st part
  </div>
   <div [hidden]="viewDetails()">
       2nd part
   </div>

Upvotes: 1

Views: 117

Answers (2)

Carol Skelly
Carol Skelly

Reputation: 362360

Use flex-grow-1...

<div class="container-fluid d-flex flex-row">
    <div class="flex-grow-1">
        1st part
    </div>
    <div>
        2nd part
    </div>
</div>

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

Another option is to use the Bootstrap Grid (as shown in the Codeply) and the col class which also applies flex-grow:1 to the column.

Upvotes: 1

cloned
cloned

Reputation: 6742

You can achieve this with using the col class in bootstrap. It uses as much space as available: 

<div class="row">
  <div class="col"> Some content </div>
  <div class="col"> Some content </div>
</div>

If both "cols" are in the code, each occupies 50% of the space, if only one is present, the col stretches over 100%. You can also give one col a fixed with with, for example: col-md-2, the other col class will then span the rest of the available space.

Upvotes: 0

Related Questions