is bootstrap less mixin .makeColumn smaller than a span?

Question

I'm using bootstrap with less and I'm currently trying to make web semantic.

HTML part:

<!-- our new, semanticized HTML -->
<div class="article">
  <div class="main-section">...</div>
  <div class="aside">...</div>
</div>

Less part:

/* its accompanying Less stylesheet */
.article {
  .makeRow();        // Mixin provided by Bootstrap
  .main-section {
    .makeColumn(10); // Mixin provided by Bootstrap
  }
  .aside {
    .makeColumn(2); // Mixin provided by Bootstrap
  }
}

But when I take a look at the rendered html page... my article take less space than a span12

I can also put a .makeColumn(10) and .makeColumn(4) and it will stay on the same line. It's like it was a 14 grid column and not a 12 grid column.

Am I missing something?

You're already using classes like in the new html5 elements (article, section, aside). You may use them instead of the divs. (Note: This does not address your problem itself) — kleinfreund, Feb 07 '13 at 12:42
Just compiled your sample and everything works fine. What version of bootstrap do you use? Do you wrap your articles with `container` or `container-fluid`? — sody, Apr 18 '13 at 07:36
Just as @sody, everything works fine. You need to wrap the div or the new html5 elements with container(12 columns - span12) and row or row-fluid. — Valentin Vrinceanu, Apr 25 '13 at 22:03

BB Tony · Accepted Answer · 2013-04-29T15:52:14.503

3

No. If your required number of columns is n, the .makeColumn mixin and the .span (#grid > .core > .span) mixin both calculate width as follows:

(@gridColumnWidth * n) + (@gridGutterWidth * (n-1))

which is the width you'll need to set your element to a width of n columns on the grid.

If n = 6, it calculates all column widths and gutter widths from the left edge of your grid to the right-hand edge of column 6. 6 columns and 5 gutters.

.span only does width, .makeColumn also adds a float: left, and has an optional @offset argument that which isn't important to your current problem, but which allows you to add columns to the left of the element by adding a margin: left.

As @sody says above, wrapping your existing elements in a .container should fix your problem. And I agree with @kleinfreund on using the html elements where you can:

<div class="container">
    <article>
        <div class="main-section">Bootstrap rocks
            <aside>
                 By the way...
            </aside>
        </div>
    </article>
</div>

I hope that helps.

edited Apr 29 '13 at 15:52

answered Apr 26 '13 at 15:26

BB Tony

116
1
1
6

I am using 'bootstrap-responsive' and I have this issue despite wrapping in a container. I think it is related to the fact that the mixins are not responsive, it is a known issue: https://github.com/twitter/bootstrap/issues/7403. For the time being I am using `@extend .row` and `@extend .span12` in place of `@include makeColumn(12)` etc (I am using bootstrap-sass not less, but similar should work. – Silas Davis May 16 '13 at 15:47
Yeah, the .makeColumn and .makeRow mixins are not built to be responsive. I believe the whole grid is being revisited for bootstrap 3. See https://github.com/twitter/bootstrap/pull/6342 under "Grid System". – BB Tony May 20 '13 at 09:05
Mixins for semantic fluid grid are in this answer: http://stackoverflow.com/a/17453405/285775 – christianhanvey Sep 04 '13 at 01:06

is bootstrap less mixin .makeColumn smaller than a span?

1 Answers1