CODEWITHSUNDEEP
csstwitter-bootstrapcentering
MarkusJ
MarkusJ

Reputation: 87

How do I center a dynamic number of divs using bootstrap?

I am dynamically displaying either 3 or 4 divs that need to be centered within a container div. How do I ensure that the divs are always centered given their static bootstrap column values?

<div>    
    <div class="col-md-3">foo</div>
    <div class="col-md-3" ng-show="settings.isShown">bar</div>
    <div class="col-md-3">foo</div>
    <div class="col-md-3">bar</div>
</div>

Upvotes: 1

Views: 630

Answers (1)

haxxxton
haxxxton

Reputation: 6442

it looks like you're pairing this with AngularJS

in which case you can apply a ternary operator on ng-class to your <div>s so that they dynamically change class based upon the state of settings.isShown:

<div>    
    <div ng-class="(settings.isShown) ? 'col-md-3' : 'col-md-4'">foo</div>
    <div class="col-md-3" ng-show="settings.isShown">bar</div>
    <div ng-class="(settings.isShown) ? 'col-md-3' : 'col-md-4'">foo</div>
    <div ng-class="(settings.isShown) ? 'col-md-3' : 'col-md-4'">bar</div>
</div>

This solution assumes you are on Angular 1.1.5 or higher (they only added ternary operator support since then)

For other options on applying conditional classes to elements with AngularJS see https://stackoverflow.com/a/12151555/648350

Upvotes: 1

Related Questions