Mixing col bootstrap classes in less?

Question

If i do something like this in bootstrap, in html, all is working fine.

<div class="col-lg-9 col-md-9 col-sm-9 col-xs-9 content"> </div>

But problem goes when i want to nest bootstrap col class? How to mix col bootstrap classes in LESS or SASS, always i got undifined, must col be outside

.content
{
.make-lg-column(9);
.make-md-column(9);
.make-sm-column(9);
.make-xs-column(9);
}

score 9 · Accepted Answer · answered Jan 06 '14 at 14:18

9

You should import the bootstrap.less file. For this download the full bootstrap project, and copy out the less folder. Then put the less folder in your project. Also make sure to add the less.js file to your project if you want to get your less compiled while your working. Look at lesscss.org for more information.

Example : custom.less

@import "../less/bootstrap.less";

 section {
    .make-row();
}
.left-navigation {
    .make-sm-column(3);
}
.main-content {
    .make-sm-column(9);
}

May be this will work for you.

answered Jan 06 '14 at 14:18

Rubyist

6,486
10
51
86

Ok, close but if I add something liek this deos not work ok .make-lg-column(9); .make-md-column(9); .make-sm-column(9); .make-xs-column(9); – Schneider Jan 06 '14 at 14:43
@user3165604 Considering your question before editing: There's difference between "mixing a class in" and "nesting it". What is your goal? And if you need to "nest bootstrap col class" into ".content" what CSS output do you expect? (This answer and my comment above assume that you need to mix it because nesting does not make much sense in this context - but we could probably miss something). – seven-phases-max Jan 06 '14 at 15:04
I just want to short the primary class in html, is that possible? – Schneider Jan 06 '14 at 21:10
Shorting of primary class means ? Do u want to separate few of the syntax from main file or something else ? – Rubyist Jan 06 '14 at 21:14
No, i want to short class nema in html? – Schneider Jan 07 '14 at 06:16

score 1 · Answer 2 · edited May 23 '17 at 12:24

I'm choosing to read this question as:

I want to replace this

  <div class="col-lg-9 col-md-9 col-sm-9 col-xs-9 content"> </div>

with this

 <div class="content"> </div>

I've just done the same thing, I did it via these links

Quick summary. Install dotless and bootstrap, dotless is a bit out of date so the bootstrap files need tweaking. Eventually you end up with a single .less file that includes the contents of all your .less files

There is probably a better way of doing this than using dotless given it's out of date but it does work

Just to add, your css is correct, you just need the framework in place

Mixing col bootstrap classes in less?

2 Answers2