Change Bootstrap 3 column widths dynamically with AngularJS?

Question

How can I toggle the Bootstrap 3 grid system column widths (col-*) using AngularJS? I am trying to use ng-class as shown below, but it is not working. Any help will be greatly appreciated.

Here is the grid structure in my view:

<div class="row">
  <div ng-class="{{columnWidth}}"></div>
  <div ng-class="{{columnWidth}}"></div>
  <div ng-class="{{columnWidth}}"></div>
</div>

Here is the variable in my controller:

$scope.columnWidth = "col-md-3"; //Toggle between "col-md-3" and "col-md-4"

The columns just stack as if I'm on a mobile device regardless of what I set the scope variable too.

Jayantha Lal Sirisena · Accepted Answer · 2014-03-19 06:37:50Z

9

Should be like this,

  <div ng-class="columnWidth"></div>

answered Mar 19, 2014 at 6:37

Jayantha Lal Sirisena

21.4k11 gold badges74 silver badges94 bronze badges

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

Collectives™ on Stack Overflow

Change Bootstrap 3 column widths dynamically with AngularJS?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related