Less Loops Used to Generate Column Classes in Twitter - How Do They Work

What's the maximum grid column count using LESS variables?

You have 2 options:

(basic customisation) use the customizer online http://getbootstrap.com/customize/#less-variables
(advanced customisation) edit variables.less inside your project and recompile

Let's talk about the manual customization.

You can change the number of grids in variables.less

//== Grid system
//
//## Define your custom responsive grid.

//** Number of columns in the grid.
@grid-columns:              12;
//** Padding between columns. Gets divided in half for the left and right.
@grid-gutter-width:         30px;

There is not a max number. The only thing to take care is that you have the gutter width so for example if you double the columns (24 instead of 12) it makes sense to have the gutter half size (15px instead of 30px)

You have also access to media-queries variables and you can set for example a bigger screen size here:

//== Media queries breakpoints
//
//## Define the breakpoints at which your layout will change, adapting to different screen sizes.

// Extra small screen / phone
//** Deprecated `@screen-xs` as of v3.0.1
@screen-xs:                  480px;
//** Deprecated `@screen-xs-min` as of v3.2.0
@screen-xs-min:              @screen-xs;
//** Deprecated `@screen-phone` as of v3.0.1
@screen-phone:               @screen-xs-min;

...

// Large screen / wide desktop
//** Deprecated `@screen-lg` as of v3.0.1
@screen-lg:                  1200px;
@screen-lg-min:              @screen-lg;
//** Deprecated `@screen-lg-desktop` as of v3.0.1
@screen-lg-desktop:          @screen-lg-min;

// Xtra-Large screen / wide desktop
//** Deprecated `@screen-lg` as of v3.0.1
@screen-xl:                  1600px;
@screen-xl-min:              @screen-xl;
//** Deprecated `@screen-xl-desktop` as of v3.0.1
@screen-xl-desktop:          @screen-xl-min;

// So media queries don't overlap when required, provide a maximum
@screen-xs-max:              (@screen-sm-min - 1);
@screen-sm-max:              (@screen-md-min - 1);
@screen-md-max:              (@screen-lg-min - 1);
@screen-lg-max:              (@screen-xl-min - 1);

Then you have to set also the .container size that is always your viewport size minus 2 times the gutter size (left side and right side of the page).

With the standard 30px gutter width this number will be 60px.
So for example the .container for the extra-large viewport that we created (1600px width) will be 1600px - 60px = 1540px.

//== Container sizes
//
//## Define the maximum width of `.container` for different screen sizes.

...

// Large screen / wide desktop
@container-large-desktop:      ((1140px + @grid-gutter-width));
//** For `@screen-lg-min` and up.
@container-lg:                 @container-large-desktop;

// Extra-Large screen / wide desktop
@container-xtra-large:      ((1540px + @grid-gutter-width));
//** For `@screen-xl-min` and up.
@container-xl:                 @container-xtra-large;

The last step is to generate the new grid for this new xtra-large viewport that we just set so you need to edit the grids.less

//
// Grid system
// --------------------------------------------------


// Container widths
//
// Set the container width, and override it for fixed navbars in media queries.

.container {
  .container-fixed();

  @media (min-width: @screen-sm-min) {
    width: @container-sm;
  }
  @media (min-width: @screen-md-min) {
    width: @container-md;
  }
  @media (min-width: @screen-lg-min) {
    width: @container-lg;
  }
  @media (min-width: @screen-xl-min) {
    width: @container-xl;
  }
}

....

// Large grid
//
// Columns, offsets, pushes, and pulls for the large desktop device range.

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

// Xtra-Large grid
//
// Columns, offsets, pushes, and pulls for the large desktop device range.

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

Add a value to a list in Less CSS

You can not do that. Less variables use the last declaration wins rule. A variable referencing itself will create a loop, the assigned value becomes the last declared, and so on.

You can use a loop to build a list which you can assign as a value to a property.

The LESS loops used to generate column classes in twitter - How do they work? shows you how to build a list of selectors.

how to adjust width of columns to equal instead of grid system applied while using Twitter Bootstrap template.

Bootstrap relies on 12 column grid and equally distributing 5 columns would need you to change the grid structure (by changing the less files). Put in 3 - 12 ranges and you will mostly end up with a large number of base columns.

An easier way would be to set the width inline on the element using style and calculate the width to put in (e.g. 5 columns = 100% / 5 = 20%, etc.)

Or you could define your own custom classes and add them after the bootstrap css. Note that you have to also account for the padding and other styles that bootstrap adds. An easy way to do this would be to just use the bootstrap column classes in addition to your column classes.

<div class="col-xs-1 my-by-5"></div>

with CSS

.my-by-5 {
    width: 20%;
}

Fiddle - http://jsfiddle.net/qdv7xedh/

Twitter Bootstrap (Responsive) - Additional Column After Certain Min Width

=Quite easy to do with a bit of jQuery.

Add and id to your divs and add/remove span classes and css on ready and resize.

<div class="container-fluid">
  <div class="row-fluid">
    <div id="one">
      .....
    </div>
    <div id="two">
      ..sidebar junk..
    </div>
    <div class="span3" id="three">
      ..sidebar 2 junk..
    </div>
  </div>
</div>

function sizing() {
  var windowwidth=$(window).width();
  if(windowwidth>=1200){
    $('#one').removeClass('span8').addClass('span6');
    $('#two').removeClass('span4').addClass('span3');
    $('#three').css('display','inline');
  } else {
    $('#one').removeClass('span6').addClass('span8');
    $('#two').removeClass('span3').addClass('span4');
    $('#three').css('display','none');
  }          
}
$(document).ready(sizing);
$(window).resize(sizing);

http://jsfiddle.net/baptme/9MYTZ/4/

LESS: Variables that contains multiple selector for use inside another selector

See also: https://github.com/less/less.js/issues/2263

If you are enable to split @var into two (or more) separated variables you can use the following Less code:

@var1: ~"> a";
@var2: ~"> a:hover";
body > header {@{var1},@{var2} { > strong > em {color:red;}}}

The preceding will compile into the following CSS code:

body > header > a > strong > em,
body > header > a:hover > strong > em {
  color: red;
}

When @var: "a", "a:hover"; you can also use:

@var1: e(extract(@var,1));
@var2: e(extract(@var,2));

body > header {
  > @{var1}, > @{var2} {
    > strong > em {
      color: red;
    }
  }
}

Or use a complex mixin (as Bootstrap does, see: LESS loops used to generate column classes in twitter - How do they work?) to build your selectors:

.mixin(@iterator: 0; @selectors: ~""; @seperator: ~"") when (@iterator < length(@var)) {
  @blah: ~"body > header > @{selector} > strong > em";
  @selector: extract(@var,@iterator + 1);
  @selectorlist: ~"@{selectors} @{seperator} @{blah}";
  .mixin((@iterator + 1); @selectorlist; ~",");
}
.mixin(@iterator; @selectors: ~""; @seperator: ~"") when (@iterator = length(@var)) {
  @{selectors} {
    color:red;
  }
}
.mixin();

Five equal columns in twitter bootstrap

Use five divs with a class of span2 and give the first a class of offset1.

<div class="row-fluid">
    <div class="span2 offset1"></div>
    <div class="span2"></div>
    <div class="span2"></div>
    <div class="span2"></div>
    <div class="span2"></div>
</div>

Voila!
Five equally spaced and centered columns.

In bootstrap 3.0, this code would look like

<div class="row">
    <div class="col-md-2 col-md-offset-1"></div>
    <div class="col-md-2"></div>
    <div class="col-md-2"></div>
    <div class="col-md-2"></div>
    <div class="col-md-2"></div>
</div>

UPDATE

Since bootstrap 4.0 uses Flexbox by default:

<div class="row">
    <div class="col"></div>
    <div class="col"></div>
    <div class="col"></div>
    <div class="col"></div>
    <div class="col"></div>
</div>

Displaying data in row in column 1, then rows in column 2, etc

If I had more time, I'd probably do it differently since this is NOT pretty but it did satisfy the requirements and I've spent too much time on this already but most importantly, the client is good with this approach given the budget and time.

For this implementation, the list will never exceed 75 records, will 99% of the time be used on a tablet or larger device, and will be used by users to select checkboxes. There will also be a "select all" option but that is not included in this answer - that's a user story for later.

I'm running three queries (running one query and then a query of queries ), one collecting the first XX number of records, and second XX number of records, XX for the third set of records. I am passing in a variable for the QoQ which will determine how many rows will be displayed so that each column will have some data appear in it.

Then the output looks like this (sorry but I can never get the formatting quite right in SO):

`    <div class="container">
    <div class="row">
        <div class="col-xs-3 col-xs-offset-1">
            <cfoutput query="colum1">
                <label><input type="checkbox"> #id# #mon#</label><br/>
            </cfoutput>
        </div>
        <div class="col-xs-3">
            <cfoutput query="colum2">
                <label><input type="checkbox"> #id# #mon#</label><br/>
            </cfoutput>
        </div>
        <div class="col-xs-3">
            <cfoutput query="colum3">
                <label><input type="checkbox"> #id# #mon#</label><br/>
            </cfoutput>
        </div>
    </div>
</div>`