I'm new to AngularJS, and I guess by default I'm new to ui-bootstrap. However, I'm no stranger to official vanilla Bootstrap, so I'm a bit confused why my columns are not aligning. For some reason, any size of columns basically just behave like rows unless I add "pull-left" or "pull-right" classes, but by default just breaks down. I have no idea why it's behaving like this, as I've seen other bits of sample code not having any problems with columns in this format. I've read all the docs I could find associated with ui-bootstrap, but there's no mention of anything regarding the Bootstrap grid.
Here's the Plunker: https://embed.plnkr.co/txDqsQHqLrmhrpS0Wyl9/ (I'm aware the menu doesn't work here, that's fixed on the local version of this project.)
And... this SHOULD work, right?
<div class="container-fluid">
<div class="row">
<div class="col-lg-4 col-md-4 col-4-sm col-4-xs" style="background-color: pink;">First Col
</div>
<div class="col-lg-4 col-md-4 col-4-sm col-4-xs" style="background-color: cyan;">Second Col
</div>
<div class="col-lg-4 col-md-4 col-4-sm col-4-xs" style="background-color: lightgreen;">Third Col
</div>
</div>
Or am I missing something?
First:
The col-4-sm is incorrect. it needs to be col-sm-4 the column width goes at the end.
Second: If you are using angular material, I would recommend using the layout directives for controlling content position. See - https://material.angularjs.org/latest/layout/container
Hope that helps. :)