AngularJS conditional styling

Question

can someone please provide me with the correct AngularJS syntax to swap this one to ng-class:

<div class="visible-md pull-left">
...
</div>

(= if screen size is medium, pull the content of the div to left)

Please note that I have seen this post and went through all the examples but none seemed to the do trick.

<div ng-class="{???}">
...
</div>

Thank you for the help!

`None of them seemed to do the trick` is a hard pill to swallow when that is an exact dupe of this question. Maybe post what you tried that didn't seem "to do the trick"? — Adam Jenkins, May 22 '20 at 13:04
Maybe take a look at this [codepen](https://codepen.io/DevelopIntelligenceBoulder/pen/rewObY/)? — Adam Jenkins, May 22 '20 at 13:07

score 0 · Answer 1 · answered May 22 '20 at 18:33

You shouldn't need to use ng-class for pulling the content of the div to the left if size is medium. If you can use Bootstrap 4, check out responsive floats:

<div class="float-sm-left">Float left on viewports sized SM (small) or wider</div><br>
<div class="float-md-left">Float left on viewports sized MD (medium) or wider</div><br>
<div class="float-lg-left">Float left on viewports sized LG (large) or wider</div><br>
<div class="float-xl-left">Float left on viewports sized XL (extra-large) or wider</div><br>

If you have to use Bootstrap 3, you could create your own "responsive pull" css class:

@media (min-width: 768px) {
    .pull-left-md {
        float: left;
    }
}

AngularJS conditional styling

1 Answers1