0

Does anyone know if this can be accomplished with bootstrap mixins.

columns( number of parent)

Something like what Neat has.

In Neat the Columns mixins works like these

@mixin span-columns($span, $display: block) { ... }

Where $span can be 3 or something like 3 of 12

Specifies the number of columns an element should span. If the selector is nested the number of columns of its parent element should be passed as an argument as well.

thanks

jplozgom
  • 129
  • 3
  • 9

1 Answers1

0

When i understand your question well you should read Less mixins and variables.

You will find the mixins to generate semantic grid columns in the less/mixins/grid.less file of Bootstrap's source code.

To generate a div that overspans 3 columns you should use for instance:

div.three{
.make-xs-column(3);
}

Notice the mobile first nature of these mixins. With the above code the xs mixin generate CSS code which will be applied for all screen width (no media queries).

When using: 

div.three{
.make-xs-column(6);
.make-sm-column(3);
}

You div will overspan 6 columns for screen width below the 768 pixels (thexs grid) and 3 columns above the 768 pixels, the sm grid and up (explicit calling the larger grid mixins is not needed unless you want to overspan a difference number of columns). It's inportant to start the mixins for the smaller grids before the larger grids, see also: Bootstrap 3 mixin multiple make-*-column

Community
  • 1
  • 1
Bass Jobsen
  • 48,736
  • 16
  • 143
  • 224
  • Bass thanks for your time and answer. What I'am looking for is a mixin where I can specify the number of columns based on the columns of a parent (this would be used with nested grids). In NEAT you simply specify 3 of 12, 4 of 8, etc. thanks – jplozgom Nov 19 '14 at 23:18
  • oh okay, than it seems that the only option will to use something like `div.parent {.make-xs-column(6); div { .make-row(); div {.make-xs-column(6);}}}` Notice that nesting again divides the parent in twelve columns, see also http://getbootstrap.com/css/#grid-nesting. – Bass Jobsen Nov 19 '14 at 23:35
  • Exactly, and nesting make you make the calculations so that you can rearrange everything based on the top level grid. In NEAt you simply specify N of Parent and that's it. – jplozgom Nov 20 '14 at 00:15