Mixing col bootstrap classes in less?

4
votes

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);
}
2
twitter-bootstraplessmixins

2 Answers

9
votes

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.

1
votes

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

  1. http://yingtechthink.blogspot.co.uk/2014/03/using-less-bootstrap-3-and-font-awesome.html
  2. Define variables in one LESS file
  3. dotless on Azure Web Project doesn't understand &:extend

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