1

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?

mthomp81
  • 63
  • 1
  • 10
  • Did you verify you got all the right dependencies and versions? https://angular-ui.github.io/bootstrap/ – altShiftDev Aug 14 '17 at 17:26
  • The only one I left out was Angular-touch, but seeing as to how that's optional, I'm not sure how excluding that would effect Bootstrap columns. – mthomp81 Aug 14 '17 at 17:30

1 Answers1

2

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. :)

ArcX
  • 687
  • 8
  • 20
  • 2
    I can't believe after using Bootstrap 3 for over a year now that I could botch columns with a simple flip-flop in code. I need more coffee apparently. Thanks Unknown. I wasn't aware AngularJS actually has any kind of layout bells and whistles, I mostly chose it because I wanted to try making a SPA. So the Angular method is the best to go by versus Bootstrap's grid method? I guess I have some reading to do. – mthomp81 Aug 14 '17 at 18:11
  • 1
    I personally would use the angular material directives as they offer a lot more flexibility for responsive design apps compared to the bootstrap classes. – ArcX Aug 14 '17 at 19:48