CODEWITHSUNDEEP
cssangularbootstrap-4
Chatra
Chatra

Reputation: 3129

Expand columns on hiding other columns

I have the below HTML and CSS. If one of the columns is hidden, I want to expand the other 3 columns. I don't think I can use col-md-3 for this scenario.

How can I do this?

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
  <div class="col-md-3" *ngIf="hideCol1">
    Column 1
  </div>
  <div class="col-md-3" *ngIf="hideCol2">
    Column 2
  </div>
  <div class="col-md-3" *ngIf="hideCol3">
    Column 3
  </div>
  <div class="col-md-3" *ngIf="hideCol4">
    Column 4
  </div>
</div>

Upvotes: 1

Views: 1113

Answers (2)

DevHowTo
DevHowTo

Reputation: 39

You can use col-md (or just col) class to adjust columns automatically.

Thanks to flexbox, grid columns without a specified width will automatically layout as equal width columns. For example, four instances of .col-sm will each automatically be 25% wide from the small breakpoint and up. See the auto-layout columns section for more examples. https://getbootstrap.com/docs/4.1/layout/grid/#how-it-works

https://getbootstrap.com/docs/4.1/layout/grid/#auto-layout-columns

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
  <div class="col-md" *ngIf="hideCol1">
    Column 1
  </div>
  <div class="col-md" *ngIf="hideCol2">
    Column 2
  </div>
  <div class="col-md" *ngIf="hideCol3">
    Column 3
  </div>
  <div class="col-md" *ngIf="hideCol4">
    Column 4
  </div>
</div>

Upvotes: 3

possum_pendulum
possum_pendulum

Reputation: 179

If you mean that when hiding a column via *ngIf you want the remaining columns to responsively resize themselves, you can just set each column's class to "col", instead of specifying the col size.

Upvotes: 2

Related Questions