Partial spans for Twitter Bootstrap. Includes half/third for normal spans, spans inside Bootstrap tabs, and inputs.

bootstrap_halfsize_spans.less

// Partial size grid additions
// I have found sometimes I need partial spans (e.g. put two fields evenly below a span3 element)
// This now generates all spans, even though span4half is the same as span2. It is helpful when generating a page
// and you need to have half of an arbitrary span. 
#gridExtended {
  .core (@gridColumnWidth, @gridGutterWidth) {

    //
    // Partial spans
    //
    .spanXpartial (@index) when (@index > 0) {
      (~".span@{index}half") { .spanHalf(@index); }
      (~".span@{index}third") { .spanThird(@index); }
      .spanXpartial(@index - 1);
    }
    .spanXpartial (0) {}
    .spanHalf (@columns) {
      width: ( (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 2)) )/2;
    }
    .spanThird (@columns) {
      width: ( (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 3)) )/3;
    }
    // generate
    .spanXpartial (@gridColumns);

    //
    // Spans inside tab containers
    //
    .spanXtab (@index) when (@index > 0) {
      (~"div.tab-content .span@{index}") { .spanTab(@index); }
      (~"div.tab-content .span@{index}half") { .spanTabHalf(@index); }
      (~"div.tab-content .span@{index}third") { .spanTabThird(@index); }
      (~"div.tab-content .span@{index}.hero-unit") { .spanTabHero(@index); }
      .spanXtab(@index - 1);
    }
    .spanXtab (0) {}
    .spanTab (@columns) {
      width: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1 - 2*@columns/@gridColumns));
    }
    .spanTabHalf (@columns) {
      width: ( (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 2 - 2*@columns/@gridColumns)) )/2;
    }
    .spanTabThird (@columns) {
      width: ( (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 3 - 2*@columns/@gridColumns)) )/3;
    }
    .spanTabHero (@columns) {
      width: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1 - 2*@columns/@gridColumns)) - 120;
    }
    // generate
    .spanXtab (@gridColumns);
  }

  //
  // Input fields - which are drawn before padding/borders
  //
  .input(@gridColumnWidth, @gridGutterWidth) {

    //
    // Partial spans for input fields
    //
    .spanXinput (@index) when (@index > 0) {
      (~"input.span@{index}half, textarea.span@{index}half, .uneditable-input.span@{index}half") { .spanHalf(@index); }
      (~"input.span@{index}third") { .spanThird(@index); }
      .spanXinput(@index - 1);
    }
    .spanXinput (0) {}
    .spanHalf (@columns) {
      width: ((@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 2)))/2 - 14;
    }
    .spanThird (@columns) {
      width: ( (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 3)) )/3 - 14;
    }
    // generate
    .spanXinput (@gridColumns);

    //
    // Partial spans for inputs inside tab containers
    //
    .spanXtab (@index) when (@index > 0) {
      (~"div.tab-content input.span@{index}, div.tab-content textarea.span@{index}, div.tab-content .uneditable-input.span@{index}") { .spanTab(@index); }
      (~"div.tab-content input.span@{index}half, div.tab-content textarea.span@{index}half, div.tab-content .uneditable-input.span@{index}half") { .spanTabHalf(@index); }
      (~"div.tab-content input.span@{index}third, div.tab-content textarea.span@{index}third, div.tab-content .uneditable-input.span@{index}third") { .spanTabThird(@index); }
      .spanXtab(@index - 1);
    }
    .spanXtab (0) {}
    .spanTab (@columns) {
      width: ( (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1 - 2*@columns/@gridColumns)) ) - 14;
    }
    .spanTabHalf (@columns) {
      width: ( (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 2 - 2*@columns/@gridColumns)) )/2 - 14;
    }
    .spanTabThird (@columns) {
      width: ( (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 3 - 2*@columns/@gridColumns)) )/3 - 14;
    }
    // generate
    .spanXtab (@gridColumns);
  }
}

// The normal extensions
#gridExtended > .core(@gridColumnWidth, @gridGutterWidth);
#gridExtended > .input(@gridColumnWidth, @gridGutterWidth);

// Large desktop and up
@media (min-width: 1200px) {
  #gridExtended > .core(@gridColumnWidth1200, @gridGutterWidth1200);
  #gridExtended > .input(@gridColumnWidth1200, @gridGutterWidth1200);
}
  // Tablet
@media (min-width: 768px) and (max-width: 979px) {
  #gridExtended > .core(@gridColumnWidth768, @gridGutterWidth768);
  #gridExtended > .input(@gridColumnWidth768, @gridGutterWidth768);
}

Is there a compiled .CSS version of this that I can use directly?