How to change bootstrap columns dynamically based on event?

Question

I am using angular-ui collapse to hide and show 2 columns so when user click on glyphicon it will hide/show columns, Now when two columns are hidden at that time i want 10 columns to be 12 columns. is it possible to achieve this task ?

main.html

<span class="glyphicon glyphicon-th-list" class="btn btn-default" ng-click="isCollapsed = !isCollapsed" id="treelist"></span>
<div class="row">
  <div class="col-md-2" uib-collapse="isCollapsed">
      <p>test</p>
      <p>test</p>
  </div>
  <div class="col-md-10">
    contains some data here ...
  </div>
</div>

captncraig · Accepted Answer · 2016-10-25 18:38:31Z

2

You should be able to use ng-class to switch between classes.

<div ng-class="{'col-md-12':isCollapsed,'col-md-10':!isCollapsed}">
    contains some data here ...
</div>

answered Oct 25, 2016 at 18:38

captncraig

23.3k18 gold badges116 silver badges154 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

hussain Over a year ago

Perfect Boss that's what i was looking.Thanks

artonbej · Accepted Answer · 2020-05-20 13:01:54Z

0

I am using this way in Angular

<div [ngClass]="{'col-md-12':!advancedSearch,'col-md-10':advancedSearch}"></div>

answered May 20, 2020 at 13:01

artonbej

2974 silver badges10 bronze badges

Collectives™ on Stack Overflow

How to change bootstrap columns dynamically based on event?

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related