A column implementation using tables built to use with bootstrap.

tbl.less

/*!
* tbl.less
* Version: 1.0
*/
 
/*** TABLE OF CONTENTS ***
*
* 1. Mixins
* 2. tbl
*/


// Core variables and mixins
@import "variables.less";
@import "../../bower_components/bootstrap/less/mixins.less";


/* Mixins
----------------------------------------------------------------------------------------------------*/

//
// Loop and set width for each possible cell prefix (1,2,3,4...)
//
.loop-tbl-cells(@index, @class, @type) when (@index >= 0) {
  .cell-@{class}-@{index} {
    width: percentage((@index / @grid-columns));
  }
  .loop-tbl-cells((@index - 1), @class, @type);
}

//
// Create grid for specific class
//
.make-tbl(@class) {
  .cell-@{class} {
    vertical-align: middle;
    padding-left:  (@grid-gutter-width / 2);
    padding-right: (@grid-gutter-width / 2);
    display: table-cell;
  }
  .loop-tbl-cells(@grid-columns, @class, width);
}


/* tbl
----------------------------------------------------------------------------------------------------*/

// Wrap - Equiv to how row works
// Adds negative margins to make up for gutter
.tbl-wrap {
  margin-left:  (@grid-gutter-width / -2);
  margin-right: (@grid-gutter-width / -2);
}

.tbl {
  display: table;
}

.tbl-stretch {
  width: 100%;
}

.tbl > .cell-stretch {
  width: 100%;
}

.tbl > .cell-fit {
  width: 1px;
}

// Extra small grid
.make-tbl(xs);

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

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

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