Bootstrap Grid Explained

Note that in Bootstrap Grid system, the columns assigned to an element are applicable to that breakpoint AND TO ALL BREAKPOINTS ABOVE IT.

Bootstrap has 4 breakpoints, namely xs (phones), sm (tablets), md (desktops), and lg (larger desktops)

Now if i say:

<div class=”col-xs-4 col-sm-3 col-md-6 col-lg-4″>….</div>
<div class=”col-xs-8 col-sm-9 col-md-6 col-lg-8″>….</div>

Then i’m being explicit that i want different layout for all 3 breakpoints.

Note the no. of col is 12

But i wouldn’t want to do this every time Eg. if I want to honor only large and small devices, meaning that i’m fine with keeping the layout same for medium and large devices…

To do that i’ll specify the layout only for md and sm as md layout applies to md and above, ie md and lg…

so i’ll say:

<div class=”col-sm-3 col-md-4″>….</div>
<div class=”col-sm-9 col-md-8″>….</div>

That’s all there is to it….

Bootstrap buttons

I want to be able to show buttons as checkboxes with default checked

I finally did it this way

<div class=”form-group”>

<label class=”col-sm-4 control-label” style=”padding-top: 10px;”>RFH Queue:</label>

<div class=” col-sm-6 btn-group”>

<button type=”button” class=”btn btn-default” ng-class=”{active: !data.RFHQueue}” ng-click=”data.RFHQueue = false;”>Durable</button>

<button type=”button” class=”btn btn-default” ng-class=”{active: data.RFHQueue}” ng-click=”data.RFHQueue = true;”>Non-Durable</button>