Bootstrap 3.1 How to use mixin make-grid-columns()?

Question

I used to use Bootstrap 3.0, and compiled my css from the bootstrap less files + some of my own less.

In this some of my classes adopts some bootstrap styles like this:

.myClass{     .col-md-3;     border: 1px solid #000;     [etc, etc] } 

It worked out great in Bootstrap 3.0, since all col-md-X classes are defined as less variables. But in Bootstrap 3.1 this seems to be somehow replaced with a mixin function called make-grid-columns().

Does anybody know how to utilize this mixin, and how to port the construction above into Bootstrap 3.1? :-/

Answer 1

According to the documentation, you can use the .make-md-column(3); mixin, for example:

.myClass{     .make-md-column(3); /* Replaces .col-md-3; */     border: 1px solid #000;     [etc, etc] } 

Answer 2

This is the grid written in classic bootstrap:

<div class="row">   <div class="col-xs-12 col-sm-6 col-md-4 col-lg-2">Meow</div>   <div class="col-xs-12 col-sm-6 col-md-4 col-lg-2">Meow</div>   <div class="col-xs-12 col-sm-6 col-md-4 col-lg-2">Meow</div>   <div class="col-xs-12 col-sm-6 col-md-4 col-lg-2">Meow</div> </div> 

And this is self compiled:

.productgrid {    .make-row();   .clearfix;    .product {      .make-xs-column(12);     .make-sm-column(6);     .make-md-column(4);     .make-lg-column(2);   } } 

The result markup will look like this:

<div class="productgrid">   <div class="product">Meow</div>   <div class="product">Meow</div>   <div class="product">Meow</div>   <div class="product">Meow</div> </div>