how to customise the bootstrap grid.less file; 16 columns for desktop and 12 columns for tablet

I want to generate 16 columns for desktop and 12 columns for tablet and mobile. bootstrap uses the float-grid-columns, make-grid-column functions to generate the grid. I tried modifying it, however couldnt get the result.

.float-grid-columns(@class) {
  .col(@index) { // initial
    @item: ~".col-@{class}-@{index}";
    .col((@index + 1), @item);
  }
  .col(@index, @list) when (@index =< @grid-columns) { // general
    @item: ~".col-@{class}-@{index}";
    .col((@index + 1), ~"@{list}, @{item}");
  }
  .col(@index, @list) when (@index > @grid-columns) { // terminal
    @{list} {
      float: left;
    }
  }
  .col(1); // kickstart it
}

Answers


You can use Bootstraps built-in classes.

16-column desktop example (keep in mind, this is the HTML solution to a CSS-related question, however should give the same result based on your question):

<div class="container">
      <div class="row">
        <div class="col-lg-12">
          <div class="col-lg-3">
            <div class="col-lg-3">
              <p>This is a column</p>
            </div>
            <div class="col-lg-3">
              <p>This is a column</p>
            </div>
            <div class="col-lg-3">
              <p>This is a column</p>
            </div>
            <div class="col-lg-3">
              <p>This is a column</p>
            </div>
          </div>
          <div class="col-lg-3">
            <div class="col-lg-3">
              <p>This is a column</p>
            </div>
            <div class="col-lg-3">
              <p>This is a column</p>
            </div>
            <div class="col-lg-3">
              <p>This is a column</p>
            </div>
            <div class="col-lg-3">
              <p>This is a column</p>
            </div>
          </div>
          <div class="col-lg-3">
            <div class="col-lg-3">
              <p>This is a column</p>
            </div>
            <div class="col-lg-3">
              <p>This is a column</p>
            </div>
            <div class="col-lg-3">
              <p>This is a column</p>
            </div>
            <div class="col-lg-3">
              <p>This is a column</p>
            </div>
          </div>
          <div class="col-lg-3">
            <div class="col-lg-3">
              <p>This is a column</p>
            </div>
            <div class="col-lg-3">
              <p>This is a column</p>
            </div>
            <div class="col-lg-3">
              <p>This is a column</p>
            </div>
            <div class="col-lg-3">
              <p>This is a column</p>
            </div>
          </div>
        </div>
      </div
    </div>

You'd want to make sure you set padding/margin to whatever necessary, as Bootstrap has built in padding/margins, which will probably give it a different structure than you are looking for.

You can then customize it a bit to turn to 12 columns for tablet and mobile, using col-xs-4 and col-sm-4, and possibly removing certain columns under a certain screen resolution with CSS.

Refer to http://getbootstrap.com/examples/grid/


You don't need to modify those generating mixins themselves, what you need is to modify how they are used (see grid.less), something like this (to be included after Bootstrap code, or more specifically after grid.less or (with corresponding additions) instead of it to reduce unused code):

// import this only if you don't import "bootstrap.less" itself:
@import "<bootstrap/less>/variables.less";

& {

@import (multiple) "<bootstrap/less>/mixins/grid-framework.less";

@grid-columns: 16;

@media (min-width: @screen-sm-min) {
  .make-grid(sm);
}

@media (min-width: @screen-md-min) {
  .make-grid(md);
}

@media (min-width: @screen-lg-min) {
  .make-grid(lg);
}

}

Where <bootstrap/less> is the path to the corresponding Bootstrap dir.


    I achieved it by:

    on variables.less, added:
    ----------------------------
    @grid-xs-columns: 4;
    @grid-sm-columns: 12;
    @grid-md-columns: 16;

    on grid.less file, modified:
    -------------------------------
    .make-grid(xs,@grid-xs-columns);
    // Small grid
    //
    // Columns, offsets, pushes, and pulls for the small device range, from phones
    // to tablets.
    @media (min-width: @screen-sm-min) {
        .make-grid(sm,@grid-sm-columns);
    }

    // Medium grid
    //
    // Columns, offsets, pushes, and pulls for the desktop device range.
    @media (min-width: @screen-md-min) {
       .make-grid(md,@grid-md-columns);
    }

on grid-framework.less; modified
--------------------------------
.calc-grid-column(@index, @class, @type) when (@type = width) and (@index > 0) {
    .col-@{class}-@{index} when (@class = xs){
      width: percentage((@index / @grid-xs-columns));  
    }  
    .col-@{class}-@{index} when (@class = sm){
      width: percentage((@index / @grid-sm-columns));  
    }  
    .col-@{class}-@{index} when (@class = md){
      width: percentage((@index / @grid-md-columns));  
    }  
}
.calc-grid-column(@index, @class, @type) when (@type = push) and (@index > 0) {
  .col-@{class}-push-@{index} when (@class = xs){
    left: percentage((@index / @grid-xs-columns));
  }
  .col-@{class}-push-@{index} when (@class = sm){
    left: percentage((@index / @grid-sm-columns));
  }
  .col-@{class}-push-@{index} when (@class = md){
    left: percentage((@index / @grid-md-columns));
  }
}
.calc-grid-column(@index, @class, @type) when (@type = push) and (@index = 0) {
  .col-@{class}-push-0 {
    left: auto;
  }
}
.calc-grid-column(@index, @class, @type) when (@type = pull) and (@index > 0) {
  .col-@{class}-pull-@{index} when (@class = xs){
    right: percentage((@index / @grid-xs-columns));
  }
  .col-@{class}-pull-@{index} when (@class = sm){
    right: percentage((@index / @grid-sm-columns));
  }
  .col-@{class}-pull-@{index} when (@class = md){
    right: percentage((@index / @grid-md-columns));
  }
}
.calc-grid-column(@index, @class, @type) when (@type = pull) and (@index = 0) {
  .col-@{class}-pull-0 {
    right: auto;
  }
}
.calc-grid-column(@index, @class, @type) when (@type = offset) {
  .col-@{class}-offset-@{index}  when (@class = xs){
    margin-left: percentage((@index / @grid-xs-columns));
  }
    .col-@{class}-offset-@{index}  when (@class = sm){
    margin-left: percentage((@index / @grid-sm-columns));
  }
    .col-@{class}-offset-@{index}  when (@class = md){
    margin-left: percentage((@index / @grid-md-columns));
  }

}

// Basic looping in LESS
.loop-grid-columns(@index, @class, @type) when (@index >= 0) {
  .calc-grid-column(@index, @class, @type);
  // next iteration
  .loop-grid-columns((@index - 1), @class, @type);
}

// Create grid for specific class
.make-grid(@class,@numbers) {
  .float-grid-columns(@class);
  .loop-grid-columns(@numbers, @class, width);
  .loop-grid-columns(@numbers, @class, pull);
  .loop-grid-columns(@numbers, @class, push);
  .loop-grid-columns(@numbers, @class, offset);
}

Need Your Help

performance of .Primitive and .Internal

r

I was doing some optimization by removing one step from the process...

Looping in BizTalk

oracle biztalk

On an Oracle database I got a customer table with at Id and Name and so, and a number of customerstuff tables all related a key.