Check out my new project, Practical Service Design!
User Experience at Hello Erik

Bootstrap 3 Less Workflow Tutorial

Posted September 26, 2013

IMPORTANT NOTE: Bootstrap 4 will be out soon, and it will be moving to Sass for its CSS instead of Less. Most of the principles of this article will still apply – but I will do my best to quickly either rewrite the post for Sass, or just update this post for both.

Read more here: http://www.helloerik.com/the-arrival-of-bootstrap-4-and-tutorials

Bootstrap 3 is still new, and you may not be totally familiar with how it uses Less, and how you can use it too. This is a tutorial on a Less workflow that can get you up and running and using Less right away. It can be confusing to set up a workflow your first time, but once you do it, you’ll never want to go back. And the best part is that you can use the workflow with or without Bootstrap 3. But for this post, I am going to talk about how you can use the power of Less with Bootstrap and make your life a whole lot easier.

Nowhere in this post will you see “less is more.”

(Read the Part 1 about a Bootstrap Grid Introduction here Bootstrap 3 Grid Introduction Tutorial and The Subtle Magic Behind Why the Bootstrap 3 Grid Works.)

Introduction to Less

Less is one of the popular pre-compiled CSS languages. There are a few other very popular languages that function essentially in the same way, but Bootstrap has picked Less as their flavor. Some people like it, some like to use other things, but if you’re getting introduced to Less, I’d recommend just sticking with it until you get the hang of CSS preprocessors.

To fully understand Less, go read the documentation at LessCSS.org. There are endless ways to use it, more than I could ever explain. Less can be quite powerful once you’ve mastered all of the dynamic and repeatable capabilities. If you are not familiar with it at all, you might want to go skim it’s site to at least get the basic idea.

Less gets compiled from the its own syntax, into CSS. They are pretty much the same, Less just adds more options and ways to actually “author” it, but if you can write CSS, you can write Less.  To compile it, there are command line and apps that compile it for you. I use an app called Codekit (Mac). There is also Less.app which is free (Mac), and SimpLESS (Windows and Mac) which is also free.

If you have Node.js installed, there’s a npm package for it you can install with npm install -g less. Any of these methods will work fine. The command line version is especially useful if you’re using a build script or makefile. There are various ways to compress and minify the output CSS as well, since with the workflow I want to show you, you’ll be combining the Bootstrap styles in with your custom styles.

None of this is specific to Bootstrap. You can start using Less in any project that uses CSS. I haven’t written raw CSS in almost 2 years. If you do want to dive in to the Bootstrap Less world, this is how you get started.

Without Less

A lot of people just use the bootstrap.min.css file and add their own stylessheet to it. This works when you’re trying to do something very quick (or don’t have a workflow set up), or when your modifications are minimal. The drawback of this is that you are totally reliant on Bootstrap’s HTML classes to make any modifications to your HTML, i.e. if you want to hide something at a certain media size, you have to use .hidden-lg, or if you were to set up a responsive section with different widths, your HTML would need to look like <div class="col-sm-4 col-md-5 col-lg-6"></div>. If you are just using the bootstrap.min.css, you are stuck with just using the predefined styles that Bootstrap includes, and they all have to go in your HTML markup and can’t be hidden away in a stylesheet.

Going without Less also makes it impossible to really change the attributes of a style responsively like this:

By compiling the Less, you’re able to do a lot more without a whole lot of hassle. Setting up a workflow is very easy, and the new styles you write in Less are probably not as much work as writing regular CSS.

I should mention an additional alternative is using Bootstrap’s customizer. This allows you to change or remove things as you see fit, but it still leaves you with a static CSS file that you can’t really leverage for serious customization. If you just don’t care and want a CSS file and nothing else, the customizer is a great option.

How Bootstrap uses Less

Bootstrap makes full use of Less. Almost all of the mobile first/responsive properties of the grid are built using Less variables and math functions. For example, the padding between grid columns is calculated like this:

Or this

You might be asking “Why do I care how a mixin is made?” Well, see how both those mixins are using using a variable called @gutter? That is calculated in the variables folder:

Starting to see the picture? If you changed that 30px value, it would be calculated all over the place and boom – you have a new gutter width size. The gutter size is used all over the place, but sourced from that singular variable.

Variables are used for almost everything:

  • @font-size-base: 14px
  • @grid-columns: 12;
  • @container-desktop: ((940px + @grid-gutter-width));

Everything is based on some sort of variable, all stored in one place. This lets Bootstrap be built using a set of data that is highly customizable. If you did want to dive into the Bootstrap source you could modify it heavily and still output a usable, working custom version. Or you could overwrite the variables you need in a different file. That’s not what I want to talk about today, but it is possible.

Bootstrap also has a huge list of mixins that you can use in your own Less. These mixins allow you to quickly add common attributes to any styles you make. And with the way that Less lets you use parameters, you don’t have to do anything but specify how you want things to appear. For instance, one of the more common needs is a gradient. Bootstrap has a mixin already made, so all you need to do in your style is add this inside of the style you want it to mix into:

Just one simple line where you chose 3 colors and a fade point, and that outputs everything you need in the CSS from this mixin:

No one wants to write that by hand. Using Less variables and a mixin, it’s easy. This isn’t even specific to Bootstrap, it just  happens to include it. There are a lot of other examples, check Bootstrap’s mixins.less file to see them all.

Key Advantages

Using Less, especially with Bootstrap 3, gives you a few advantages that really make it a awesome choice:

  • Changing variables in one place can have wide-reaching effects, for super easy global customization
  • Augment, shift, and change existing styles and variables, or roll your own
  • Easily override Bootstrap variables/mixins/classes with your own
  • Have a clean, customized singular CSS file
  • You can easily comment out any part of Bootstrap you don’t need or want, right down to the single line
  • Componentization. You can break your Less up into smaller files for very easy editing and separation, great for applications where you’re using version control like GitHub

DRY: Don’t repeat yourself. Using a preprocessor like Less lets you do things once, and reuse them anywhere. Once you have your variables and mixins built up, or use Bootstrap’s defaults, you’ll be able to just style things out without having to write new styles each time.

Let me show you how I do things. It’s always a little different, but when I am starting a project, be it a website, prototype, UI idea, or just something undetermined, I have developed a system that works for me. Your experience with it may vary, and if you have other ways of doing things, be sure to post them in the comments below so we can all learn from each other!

My Example Workflow

I’ve been using this same method for almost 2 years now. I like to clone the repository from GitHub, and then copy the files from the repository on my local computer to my project folder. This gives me a clean, decoupled set of the Less files that are now orphaned from the repository. I prefer this so I can keep the Bootstrap repository updated on my machine, without having to check it for changes that might break what I have. When I’m ready, I can test any new changes locally without having to interrupt my project with an unpredicted Bootstrap Less change.

There are lots of ways to achieve the same results. Some people like to have the Github sources linked right in their project and to just pull it down. I prefer to add the files to my projects manually. Do whatever works for you.

I typically have some sort of “src” folder that holds my Less (and jade and coffeescript). This all compiles to a separate “public” directory where my actual project is output. You don’t have to use any HTML templating language of course, you could still use this method for just Less.

I create a folder called “less” and in that, I make another folder called “bootstrap”. That is where all the Bootstrap Less files go. I leave the Bootstrap folder alone, this makes it really easy to update when a new version comes out. Technically, you could make this a Github form repo and just keep it up to date there, but I like to do it manually. This is how the project looks now:

fodler-example

You can see in my src folder I have a Less folder that has the Bootstrap folder inside it (and font-awesome, which comes as a Less source as well). These will all get pulled down into a master CSS file and exported to the public/css folder above.

Importing Less

Inside of the Less folder, I make a file called styles.less. This is what will be compiled to styles.css. You can name your Less file whatever you want, I’ve just always called it styles.less.

This styles file is important as it will contain only imports to other Less files. It doesn’t have any styles itself. The way I do it, I import all of my granular Less files through this file. It looks something like this:

It almost always goes the Bootstrap folder first, then font-awesome, then my own variables and mixins. I want to make sure these global pieces are at the top, since this is the order the CSS will be built.

Now that styles.less is made, the new granular files can be added at any time. I usually break it up quite a bit, into logical “things” that all are related organizationally on the page/site/UI.

My Variables

When importing my own files, variables are first, so they can be used on anything below. Even though this file is named the same as the Bootstrap variables.less file, it won’t overwrite anything unless you specifically name the variable the same. You can override existing Bootstrap variables with your own, or just start creating what you need. Most of the time, whatever I’m building has a basic set of colors, so I define those first, something like

I always use HSL, so that I can adjust the colors without having to look them up or find a hex. Once you have a primary (and/or secondary) color, you can make a mini palette with some less:

 

And there you go – I have a palette with 11 colors, all based off the first @primary variable. This isn’t a lesson in Less though, it’s about a Bootstrap 3 Less workflow, so I’ll try to stay focused…

My Mixins

Mixins come next, since they use the variable. You can mixin in anything from Bootstrap or your own new variables into a new mixin. It can get a little crazy, but most of the time you can just keep it simple. Having your own mixins is great for things you have to do a lot and want to shorten it up. One that I find myself using often is a mixin for coloring text shades of gray. Instead of using HSL or maybe lighten() or darken(), I’ve made this mixin. All I would do here is add a number in the parenthesis for how “gray” I want it, zero being black, 100 being white:

Which is defined like this:

It’s a bit quicker than typing color: hsl(0,0,50%). Not a huge deal, but for a designer like me, sometimes a shade of gray can be 1% off. This makes it easy for me. Here are some mixins I’ve made or adapted that I find very useful:

Building your own mixins and variables is a lot of fun, and is essential for making a very custom designed website. Anytime I think of something handy, I add it to my mixins file and insert that into each new project.

Building Up My Styles

Once I’ve imported the Bootstrap files, font-awesome, and my own variables and mixins, I start with a main.less file this holds styles that I consider to be the most global. Things like styles for html, body, h1-h6, strong, em, essentially anything that is an element I just want changed everywhere. This file also holds things that I have no other good place to put yet, sort of a catchall. Usually by the end of a project this file is pretty small.

I usually end up with something like this for my styles.less file – for instance, this is the actual helloerik.com styles.less file:

Sometimes, if there are global elements that are reused in lots of different parts of the site, I’ll add a globals.less for custom buttons and other UI or layout elements that aren’t a part of anything else, but also aren’t main elements. Typically it ends up being a place for things that “widgets” around a site, or discrete elements like a custom tweet button. Do what feels best for you and your project.

As I move down the list, things get more specific. There is no technical need to break down the files into granular files, but I find it so much easier to keep things sorted out and scoped correctly. Since I use Github for most projects, this also lets the commits be on a more specific basis as the Less file usually corresponds with some equivalent code file of HTML or whatever is building the output HTML. As you can see above, I start with the nav.less, then header.less, and eventually end up at something pretty specific, loop-nav.less. But that had enough of its own styling that I wanted it in its own file, to keep it from cluttering up other areas.

From here, it’s super simple. I just write my Less like you would CSS, add imported files when I feel it’s necessary, and build up the projects variables file with things that are reused all over. Each time I hit “save”, CodeKit compiles all the Less to a minified CSS file, and refreshes my browser, so I can see the changes instantly. It’s an addictive workflow, instant feedback is awesome (It also does this with my Jade and CoffeeScript files, so I never have to actually press refresh, it just does it). Once I’m at this point, styling my own stuff is easy, and modifying Bootstraps stuff is easy. It’s all easy. This keeps Bootstrap’s files all self contained and keeps all my files organized and separate.

Responsive Less

If you’re new to Bootstrap 3, you’ll notice that there is no responsive specific files anywhere. That’s because Bootstrap 3 is built mobile-first with the responsive properties built right in.

This is another huge reason to use less. In my post about the Bootstrap 3 Grid Introduction Tutorial, I talk about how you can build the grid using just Less mixins and media queries. If you’re just using the CSS files alone, you can’t do any of this. Here’s an example of how you can use your own Less to build styles in a much more power, flexible, and responsive way:

You have complete control over what CSS is output. When you’re building a site with a custom design and using Bootstrap 3 with the intent of going mobile first, you almost can’t do it without using Less. Go read the article, I explain it in much more detail there, but this should give you an idea of the type of control you have when using Less and the Bootstrap included mixins and such.

A Workflow Summary

With all that said and done, here’s the workflow in summary:

  1. Get Bootstrap
  2. Choose a Less compile method, an app or the command line
  3. Make a “source” folder to hold your less. Call it whatever you want.
  4. Put a folder called “bootstrap” in there, and put the Bootstrap Less files all in there
  5. Inside your “source” folder, make a styles.less that imports bootstrap/bootstrap.less
  6. In that same styles.less folder, import the rest of your desired Less files (main.less, header.less, footer.less, etc etc)
  7. Write your Less in those granular files – not in the styles.less
  8. Compile styles.less to wherever you want to refer to your styles.css. Minify/compress if you want.
  9. That’s it!

If you set this up once, you’ll never want to go back to doing it with just CSS. You don’t even have to use Bootstrap to do this, just follow the same steps but don’t include the Bootstrap parts. This will get you using Bootstrap Less and your own Less so quick and easy, you’ll find yourself saying “Wow, Less really is an increased value over the value I had previously.”

Got questions, ideas, your own workflows to share, or places I screwed up? Post them in the Disqus thread below.

Like this article? Read the Part 1 about a Bootstrap Grid Introductions here Bootstrap 3 Grid Introduction Tutorial and The Subtle Magic Behind Why the Bootstrap 3 Grid Works.

Pro Resume & Portfolio Critique + Coaching from me!
All for only $50 and with a 72 hour guaranteed turnaround.
I love all things experience design. I work as a Principal Service Experience Designer at Intuit in Mountain View, CA.
  • Pingback: Bootstrap 3 Grid Introduction | UX at Hello Erik()

  • Cody

    Where do you put the rest of the Bootstrap and Font Awesome resources (ie. fonts, JavaScript, etc.)?

  • The font-awesome Less files go in the same Less directory as bootstrap, so in the screenshot above you can see that it is in there next to the bootstrap folder.

    For your actual compiled site, I just put the javascript in a js folder, and the fonts go in a font folder, all on the same level as css. Those are in the public folder though, not source. I don’t keep the source in the same place as the actual html and css since I write the HTML portions in Jade, and the javascript parts in CoffeeScript.

    But, if you’re just using Less, I would put the files right alongside your other folders in your root directory, and then from another location, target your Less to compile “styles.css” to there.

  • Itsraja

    As bootstrap’s js folder contains many js files, you’ll combine those to a single file like bootstrap.min.js along with your own js files? And normally you do any changes with bootstrap’s own js files?

  • pezzab

    Thanks for sharing Erik. I’m currently tinkering with my own WP/BS set up and it looks like you have come to similar conclusions about how that should work. I don’t know how I managed to function before I started using LESS. Some interesting stuff regarding LESS here http://ruby.bvision.com/blog/please-stop-embedding-bootstrap-classes-in-your-html in case you haven’t come across it before.

  • pezzab

    Ha, just read the rest of your tutorial – I guess the link I posted is old news :)

  • I built this site on wordpress using the Hybrid Base framework: http://themehybrid.com/themes/hybrid-base. I recommend it. There’s no actual “design” to it, it is just the loops and functions. So you don’t have to build that up, just the actual HTML and CSS. It’s a really fantastic way to build a totally custom parent theme without having to rip out guts of another theme, or know enough wordpress PHP to write all the loops and functions yourself.

  • pezzab

    That’s an interesting coincidence! http://pointatthemoon.co.uk/about/ :) I’m working with a parent theme framework built with Hybrid and Bootstrap – started from scratch with an _s theme (aka underscores). All the styling and customisation is done in the child theme.

  • andrey

    Nice post! Actually I’m new in HTML, but your approach looks very smart for me. But what’s about bootstrap theme? I mean that file bootstrap-theme.css which is included in Bootstrap distribution by default. I suppose it wouldn’t be applied if I use styles.css from your example. Is there a way to combine it with Less or create another one?

  • Pingback: CSS LESS 学习总结 | Ian's Blog()

  • Pingback: The Subtle Magic Behind Why the Bootstrap 3 Grid Works | UX at Hello Erik()

  • Hef

    Thank you!! Great article. Number one Bootstrap 3 usage manual.

  • Jeff Wilmoth

    Great stuff Erik, I really got a lot out of this and your BS3 grid blog post.

    I found a couple small errors in your responsive style attribute example using less. This does the trick:

    h1 {
    font-size: 22px;
    margin-bottom: 10px;
    @media (min-width: @screen-tablet) {
    font-size: 40px;
    margin-bottom: 20px;
    margin-left: 20px;
    }
    }

    *Also for BS3 that would be @screen-sm

  • Good eye.

    I think that you can still use screen-tablet/desktop/large-desktop… maybe that’s been recently changed?

  • Antonio Brandao

    Hello, really great post. But what abut the file “theme.less” in the bootstrap less folder? You don’t use it? You don’t mention it in this article. I thought of importing it to the “styles.less” folder and use it as a base to customise my theme design. Does this make sense?

  • It does. I start just with the raw bootstrap styles, building upon those and not the theme.less. There’s nothing wrong with starting that way though if you don’t want to build up those common styles on your own.

    It’s all about the level of custom design you want to use. I like to pare it down to just the minimal bootstrap styles, and v3 is perfect for that.

  • If you use the bootstrap less files, there is a theme.less in there you can use that adds the little nuances and details to the vanilla design. It doesn’t really affect what I wrote, it would just add a little flavor. It’s no different than build it up your own though, mostly it just applies gradients and shadows to otherwise very flat elements.

  • Antonio Brandao

    Is there a way to get an email every time you make a post?

  • Not really. Twitter is the best way to know when something is new for sure.

  • Antonio Brandao

    A pity. I tried Twitter but it is overwhelming, I’m very busy so I prefer when blogs offer the chance of getting an e-mail for each new post. No need for another app.

  • Geronimo

    Hi,

    Apologies if this is a daft question but i’m a little confused as to how this all fits together.
    Do you import all those LESS files using your styles.css (i’m confused as to why you would add the @import to the less file and not just on your css file)?
    And then below the @import you add your usual styles making use of the Bootstrap variables?

    Thanks for the useful posts by the way.

  • I don’t do anything with CSS. It goes like this:

    1. I make a styles.less that I will ouput to styles.css. I just like the name “styles”. You can call it whatever. This will be the final CSS file you use in your site.

    2. At the top of styles.less, I import the bootstrap.less, which itself imports all the bootstrap files.

    3. Beneath the bootstrap.less, I import the rest of my own less files I’ve broken up into components.

    4. The styles.less is compiled to styles.css and pulls in everything else. The final CSS file has no imports as it is all compiled down to 1 compressed file, like you can see here http://www.helloerik.com/wp-content/themes/helloerik/style.css

    The example I give above of all the imports in a row, that’s the styles.less file, not CSS:

    @import “bootstrap/bootstrap.less”;
    @import “font-awesome/font-awesome.less”;

    @import “variables.less”;
    @import “mixins.less”;
    @import “main.less”;

    @import “nav.less”;
    @import “header.less”;
    @import “footer.less”;
    @import “home.less”;
    @import “posts.less”;
    @import “all-posts.less”;
    @import “loop-nav.less”;

    All of that ends up as the compressed CSS file I linked above.

    I am not sure if that answers anything for you but that’s how I read your question =)

  • Geronimo

    Yes an RSS feed would be a welcome addition…how about it?

  • Geronimo

    Right I got ya:-)
    It’s just a totally different way of working to how i would normally start a project, I do use Less but not like this and never with Bootstrap. So you are re-using all the classes from the less files in your html and you just change the odd variable to suit the projects specific styling.

    I’ll give it a go and see how it pans out. The css file is quite hefty at 106kb where typically my final css file would only be around 50 – 60kb or less, but looking at it this could be reduced.
    Cheers

  • http://www.helloerik.com/feed works. I used to have a link/button, not sure where it went but I’ll get one back on today.

    I’m also doing a un-promoted blog at Svbtle for not so much UX related things but more… mini rants. http://helloerik.svbtle.com/. That has an RSS too.

  • You can exclude as much of bootstrap as you want as well.

    I am not sure what you mean with “So you are re-using all the classes from the less files in your html and you just change the odd variable to suit the projects specific styling”, but we may just be talking past eachother semantically.

    There are lots of ways to reduce the file size for a production site.

  • darto

    great tutorial. thanks for sharing, very helpfull

  • Aaron

    Great Blog posts…very informative…thanks!!

  • nosnetrom

    I really have been wondering how best to incorporate Bootstrap’s LESS into my workflow; good article. :-)

  • I’m just starting to learn how to to use bootstrap and LESS. And I was quite confused as to how to get started. But your article saved me! Thank you so much! One newbie question: Is it okay for bootstrap/variables.less and /variables.less to contain the same…well, variables? Which will take precedance?

  • CSS works linearly from the top down, so if you import them from weakest to strongest (however you want that), the bottom ones win.

    You could do

    @red: #ff0000;
    @red: #00ff00;

    And only the second one would matter.

    Also – you can scope variables too. so if you did this:

    @red: #ff0000;
    .awesome {
    @red: #00ff00;
    color: @red;
    }
    .blossom {
    color: @red;
    }

    Blossom would get the real red, as defined at the top. But Awesome would get the red defined INSIDE the class, in between { }’s. So when awesome’s color:@red looks for a @red variable, it goes up until it finds one, and stops. But since Blossom doesn’t have a defined @red, it doesn’t look inside of Awesome, it just goes to the next @red variable, which is the global one.

    There’s no hard and fast rule as to when to scope variables, but you can do it sometimes when you just want one thing once.

  • Thanks for the clear explanation and example. I’ve a better understanding now.

  • Hi Erik,

    Thanks for your Bootstrap series, it was very well written and descriptive enough.

    I’m always wondering when using Bootstrap how to reduce the css file size. What’s your workflow for this?

    Do you uncomment the lines directly in the bootstrap files? If so, how would it work when there’s an update on the bootstrap library?

    Also, how do you know what’s dependent? There are so many less files on the BS library that it’s hard to find what’s working with what, see what I mean?

    Also, say I want to change the icons and I’m only using a few. Wouldn’t it make sense to uncomment the ones I’m not using?

    Last, when you compile the main less file, it only generates one file. But would it be beneficial to have 2 files? One with my customizations and one with the regular bootstrap file (that could therefore be called from a CDN for optimization).

    Then again, what’s the best, performance wise? I feel weird sometimes to have a really simple layout with a 200k css file.

    – Vincent

  • Thanks for the conversation.

    If you include bootstrap css off a cdn, your own Less files won’t be able to make use of the bootstrap mixins and variables, since you’re not compiling your own CSS using it. That’s a huge loss in my book.

    I do comment out the partial files in the bootstrap.less. It’s actually pretty easy to figure out what you don’t need. Here is my actual bootstrap.less file for this site: https://www.dropbox.com/s/u9esqsu3wtlzf8r/bootstrap.less

    When bootstrap updates, I update all the Less files and comment them out again. Takes just seconds, and it gives me complete control and transparency into what i’m doing and doesn’t rely on automated processes. I don’t find it hard to know what to comment out, I just look at if I use it, and most of the time it’s broken apart so well I can just comment out “list group” or “jumbotron” or whatever.

    As far as the glyphicons or font awesome icons, if you only use a few, I’d go to some of the sites like fontello to select only the icons you want and output the CSS that way, and not rely on the bootstrap icon files. There’s no need if you don’t want them included. The entire font awesome Less files are 48k, and the minified css is 22k.

    As far as the 2 CSS files, one off a CDN, it might load the files faster into the browser, but again, you lose any ability to use the bootstrap mixins and variables. I don’t see a real world benefit if you’re doing a lot of custom design. If you’re just prototyping, sure, just use the CSS.

    With regards to file size, right now the CSS for my website is 105k, which includes all the bootstrap stuff I need and all my own styles, which there is a fair amount. A similar site I have made that has a LOT of custom styles, is only 145k. So if you’re at 200k, you’re including way too much stuff.

    Most of the bootstrap CSS bulk is the grid. And if you’re not using the grid, why use bootstrap at all? Just copy some of their mixins into your own files. Even with nothing in the CSS but the grid, it’s 60k. That’s no custom styles, no fonts, nothing but what it takes to make the bootstrap grid.

    I don’t know what sort of traffic and server load you’re pushing. If there is so much that the CSS file is too big, then there is a lot to do to reduce it. But if not, between things like Cloudflare that can host your custom CSS on a CDN or other services, it seems like a negligible gain.

    If it were me, I’d get the CSS so that it includes what you need, isn’t too huge but it still may be 100-150k, and try it on Cloudflare first and see how it performs.

  • Thanks Erik for all this additional information.

    It’s not so much that I’m concerned about performances (right now at least) but to keep my files to minimal just for good practice. Why stuff the css with unnecessary code.

    I’m gonna use your way of working for a few days to see how it goes.

    I’m also trying to incorporate some css from a bootstrap theme (design modo startup framework). This is where it gets confusing. They all ship with less files, which is great but where it falls short is that you can’t juste replace the buttons.less file for ex. for theirs, there’s more coding in other dir. which makes it (at least for me, an intermediate coder), painful to get what I want.

    Anyway, I’m rumbling. Thanks again for all your help!
    – Vincent

  • Kyle Farris

    This has been extremely informative. Thank you for sharing this, it’s been a big help getting me started on the Less and Bootstrap bandwagon.

  • PB

    Hi Erik,
    is there any reason that you put img folder inside of the less folder? Thanks

  • That is for this specific project, all the source filed are stored in the src directory and that is in the git repository. The compiled CSS, HTML, and everything else is exported to the public directory. So since we don’t commit the public directory to the repository, image files are copied out of the src path and into the public so people can clone the repository and run a build without the public directory having to be committed.

  • bobmonsour

    What a wonderful set of posts on the bootstrap grid and your workflow. Many thanks. I have been using Codekit for a little while now and completely agree that once you get that “save file and auto browser refresh” in your bones, it really is addictive.

  • Eduardo

    Is that Sublime Text you’re using? if so what theme? I like the blue folders on the sidebar.

  • It is the Flatland theme https://github.com/thinkpixellab/flatland, super dope.

  • Charlie

    Thanks for this, I have been beating around the bush with bootstrap.min.css for ages and this really helped me push the bootstrap framework to where I wanted it to go. The only thing I would say is that simpless is currently unable to compile bootstrap.less properly so for windows I highly reccomend using crunch. It doesn’t autocompile which is a shame but I’ll take robustness over fiddly any day.

  • Eduardo

    Yes it is, thanks!

  • Alex

    Just wanted to say thanks for a very useful post, I was searching for a guide on using the LESS version of Bootstrap directly and wondering whether it was something I could/should do. Your guide sorted me right out, thanks! :]

  • SURESH

    Really awesome post :)

  • moeTi

    I like how you named one of the file ‘home.less’ :-D

    I always downloaded the CSS files of bootstrap because I had no idea what to do with LESS, but now I wanted to finally learn about. Good post, thanks!

  • Petr

    Useful Article! Thank you!

  • Pingback: Starting with LESS | Nehil's Blog()

  • thank you

  • Eyal Peleg

    Thanks for this post.

    I must be missing something: You started by talking about how I might want to change @gutter but I don’t see where will you do that?

    Should this not somehow happen in between where bootstrap itself imports the default values for its variables and where they import everything else ?

    maybe this should use the theme.less file mentioned in one of the comments?

    Could you explain how you would go and change the gutter using this workflow?

  • [placeholder to remind me to respond later]

  • You can change the gutter variable in your own files anywhere below the original variables. This will change it for where it is used globally. The variable is divided by 2 most places so that you get the gutter split to be half the width on each side, and 2 columns together form the original, combined space.

  • Eyal Peleg

    Can you expand on “where it is used globally”? How will it look to have a variable defined, used “globally”, and redefined such that the redefined value is the one actually used..? Alternatively where can i read about this? As it feel counter intuitive for me…

  • Eyal Peleg

    Just in case i am not clear enough the issue i am talking about is the order in which the different .less files are imported and how this impacrs the ability toboverride the values of the variables…

  • It is all explained on the Less documentation website: http://lesscss.org/features/#variables-feature

    If you have a variable set like this: @primary-color: red; and then you later set it as @primary-color: green;, it will compile as the primary color being green.

    As far as ordering goes, it goes top-down just like CSS does.

  • Eyal Peleg

    hmm… thanks for the link. actually the more specific link for my Q would be http://lesscss.org/features/#variables-feature-lazy-loading and it says there explicitly that “Variables are lazy loaded and do not have to be declared before being used.” so this actually answers my Q… I wander what other implications this has… #still_a_bit_confused

  • It’s a compiled language. The Less compiler runs the entire project looking for all the variables, and then compiles them as needed. What is important is a) scope and b) order of the same variable.

    For instance, if you do

    @gutter-width: 40px;
    @gutter-width: 100px;

    The 100px variable will be used everywhere – unless it is scoped, like this

    .class {
    padding: @gutter-width;
    @gutter-width: 500px;
    }

    @gutter-width: 40px;
    @gutter-width: 100px;

    In this case, the .class will have a padding of 500px, but the rest of the project will still use 100px, since 40px comes first.

    So this means, if you want to change the gutter width for all of bootstrap, just add a @gutter-width variable to your own less that appears somewhere below the original bootstrap one.

    It’s different than CSS in that yes, the variables can be USED and DECLARED out of order, but they OVERWRITE from the top -> down.

  • Royce Lithgo

    I’ve learnt an enormous amount about Bootstrap and now Less thanks to your blogs post and for that I am extremely grateful. One question, with the way you structured your less files, don’t you run the risk of inadvertently clobbering a Bootstrap mixin if you use the same name in your own less files? Unless you have in-depth knowledge of all Bootstrap mixins, wouldn’t it be safer to namespace your custom mixins so there’s no risk of collision with Bootsrap?

    Also in your workflow just wondering whether you setup something to watch / auto-compile your less files, or are you doing it manually after each change? I know there are grunt based solutions around for auto-compiling, but wondering whether its worth going that way or just do it manually.

  • Mixins will mix. If you use the same name as a mixin, it will just add all the attributes from all of them, or cancel out the higher-up attributes. You can namespace things if you think there will be a bootstrap collision. But mostly they won’t collide, they combine.

    Regarding watching/auto compiling, I use Codekit for everything. https://incident57.com/codekit/. It meets all my needs. I’m not really in the development world though so using CLI and various build tools are probably more important to others.

  • Royce Lithgo

    Thanks for the reply. I didn’t realise that mixins mix! :)

  • olesuper8

    Hi Erik, thanks so much for introducing me to Less, I’ve been using Bootstrap for a while and I can see how great this is going to be once I’m up and running with it. However, I’ve followed everything to a ‘T’ but CodeKit fails to compile on the first line. It must be something to do with setting up CodeKit as I’m looking at the files in the correct order, I’m totally lost to get this working, I feel I’m so close,

    also your recap is a little confusing and you say the ‘styles.less’ file should go in the source folder, according to the import that file belongs in the ‘less’ folder,

    anyway I would really appreciate any advice/help… cheers

  • What does the Codekit error say?

  • Sorry for hijacking someone’s post, I didn’t mean to do that.

    Here is the error in Codekit:

    FileError: ‘bootstrap/bootstrap.less’ wasn’t found in /Applications/MAMP/htdocs/greenfingers-2014/src/less/styles.less on line 1, column 1:

    1 @import “bootstrap/bootstrap.less”;

    2 @import “font-awesome/font-awesome.less”;

    I have a folder named ‘src’ inside three more ‘bootstrap’ (with the bootstrap less files inside) ‘font-awesome’ (with the FA less files inside) & ‘img’ plus the styles.less file, the markup in the styles file for importing is:

    @import “bootstrap/bootstrap.less”;
    @import “font-awesome/font-awesome.less”;

    I could upload the file structure somewhere perhaps?

    many thanks
    Ollie

  • Are you sure that there is a bootstrap.less file in the folder, or that you don’t have a second bootstrap folder in there? Your error is just a file pathing issue. Styles.less should be on the same level as the bootstrap folder, and the bootstrap folder should have bootstrap.less file in it.

  • Thanks for getting back Erik, I’m a massive tool… after a break, I couldn’t believe what I was looking at when coming back to the files, compiling is now working, the bootstrap.less file was misspelt, I swore it was a Codekit setup problem as I’m completely unfamiliar with compiling files. Huge apologies, if you’re ever in the UK I’ll buy your a pint.

    thank you

  • James

    Hi, Erik, as for “As far as the 2 CSS files, one off a CDN, it might load the files faster
    into the browser, but again, you lose any ability to use the bootstrap
    mixins and variables. I don’t see a real world benefit if you’re doing a
    lot of custom design. If you’re just prototyping, sure, just use the
    CSS.”, I have the similar question, the compiled css file(customized) only relies on CSS stuff, right? if so, then it should work without Bootstrap, but it requires Bootstrap during compiling. My question is: is there any idea about how to compile them with separate files?

  • you want to compile your custom Less file as a standalone CSS, and then also use a standalone copy of the bootstrap CSS?

    This is just like splitting the finished file into 2 CSS files, so it would work. You could host bootstrap off a CDN, and then just use your CSS that is compiled down.

    I don’t know how you would do that automatically though. If it’s important, I would just manually copy the custom CSS out of the final file into a new one. I am sure there are some ‘make’ scripts (or whatever) that could figure this out, but it’s outside of my knowledge.

    But yes, you could use 2 files compiled from Less since your custom Less doesn’t need the Bootstrap CSS, since it is itself CSS.

  • Pingback: Hello world: How to start programming | My Blog()

  • I came here to know about bootstrap less, and your post give me very valuable insight, thanks Erik :)

  • rizerzero

    a really great tutorial but i wish you could make an update to the current bootstrap less files ,
    or make a sass workflow maybe
    thank you

  • javimaro

    Very useful!

  • With so many devices with different resolutions, screen sizes, and operating systems in the market, the need for responsive websites and applications is essential for anyone building an online presence. Bootstrap is a toolkit that helps in development of complex web applications. It is lightweight as it is coded in LessCSS.

    Check: http://www.cloudways.com/blog/how-to-customize-bootstrap-css/

  • Omar

    Hi Erik, great post. is there disadvantages in use only one css file with bootstrap-styles and own-styles?

  • Not really disadvantages. Some might prefer one or the other, but if you’re compiling down your own Less with the bootstrap imported in, it will be 1 file. If you use the bootstrap.css and your own css, you can’t use any of the bootstrap mixins or variables in your own file.

    I always prefer to @import the bootstrap files into my own Less and compile it down from there. If there are Bootstrap pieces I don’t need, I comment out those files from the Bootstrap.less file.

  • Omar Marie

    Thanks for the reply.

  • Jeremiah Blanch

    Hi Erik, this is a really useful post, thanks. Can I clarify: You put all the original Bootstrap LESS files into the bootstrap folder, but then you don’t modify them? So to put in brand colors and sizes etc, you would overwrite the values of the bootstrap variables in your own LESS files? But then how do you have bootstrap build itself with the correct colors (when you simply import the entire root bootstrap.less file)? Or do you import bootstrap’s variables.less, then import your own variables.less, and then import the rest of the bootstrap less?

  • Good question.

    My method is: I have a Less folder, it holds everything Less. In it, let’s keep it simple and say we have 1 file – styles.less. In the folder, I also include another folder called bootstrap/. It has the bootstrap files in it.

    In styes.less, I import the single bootstrap.less file. This drags in everything bootstrap, every less file that comes with it. To answer your point, no, you don’t include bootstrap variables.less or anything – it’s already imported in bootstrap.less.

    If you look at the “importing less” section above, you can see my exact method. I import the master bootstrap less file (which itself is just a list of imports), and then all my other granular less files.

    In my styles.less, I do whatever I want. Anything that IS THE SAME AS BOOTSTRAP will be overwritten now by your custom variables/mixins. If you have your own variables.less or mixins.less OUTSIDE of the bootstrap folder, it doesn’t matter.

    I don’t quite get your question on the second half, but I’ll take a guess. Less lazy-loads variables. If you name a variable the same as it is in bootstrap, yours will just overwrite it, simple. If you want to change things about the default bootstrap variables, just make your own file (or just put it in a main styles.less file or whatever you want to call it) and give it a new value. Your next compile of less to css will use that value.

    I have the phrase “you’re over thinking it”, but you’re over thinking it =P Just import the bootstrap.less into your own file, and don’t worry about it again. Use the variables and mixins as you need, and if you have to add your own or change existing ones, just do it. No need to change bootstrap files (and it’s not recommended as if they do an update, you can just overwrite them and by fine 99% of the time).

    If you need more help let me know and maybe I can write up an amendment or make a video demo or something. If you give me a real life usecase I can work with that too.

  • Jeremiah Blanch

    Hey Erik, thanks.
    I want to set custom colors for our app, and custom break points for responsiveness. So I want to change bootstrap’s @brand-primary, @btn-default-color etc.

    I just tried doing an experiment with your workflow. I set the @body-bg variable to a new value inside my styles.less file, and it worked! I thought that because the bootstrap LESS was written BEFORE I had assigned the value to that variable it would compile with the old value for @body-bg.

    So I just learnt something new about the LESS compiling. It seems to do the imports FIRST, then after it has done the imports it actually calculates the CSS.
    Thanks.

  • It’s a little smarter than just CSS inheritance, where Less will scan the files in the order you import them, scan the elements, and then look at the mixins and variables. If a variable is defined after another, the latter variable value will be applied to where the variable is called.

    But like you saw, the last instance of a variable definition will be applied to anywhere it occurs, regardless of if the USAGE of the variable precedes it.

    Mixins sorta work like this too, but I forget exactly how. You can make another mixin with the same name, and it sort of combines the two.

    Look in to variable scoping for more power: http://lesscss.org/features/#features-overview-feature-scope

  • RonWade

    Thanks, this article is really helpful. I was wondering how to set up a workflow that would leave Bootsrap’s files untouched, and allow me to overwrite specific variables. You answered all my concerns.

  • Sarapan Malam

    thank you.. very helpful

  • Pingback: The 10 Most Useful Bootstrap Tutorials For Web Designers (2014) - Bootstrap Templates()

  • Nina

    This is a very good tutorial. Now I have a better understanding of the LESS workflow. Other resource links lead me to more information. GOOD JOB!

  • I want to create some custom variables using Bootstrap’s official generator or Bootswatchr, like colors, buttons, navs … and I’m thinking to download first the original less files and then to create a file called “variables.less” outside the Bootstrap folder and paste there the new variables. Do you think this a good approach ?

  • I am not sure what you mean, but if you are adding anything to the Bootstrap Less source, you’ll want to follow my guide and have your own styles.less that imports bootstrap.less and then your own variables.less etc. Just keep bootstrap in its own /bootstrap folder.

    So if you replace a bootstrap variable in your own files, it will replace the Bootstrap one. Get it?

  • I get it know. What I need is creating a folder called bootstrap with all the original files and then outside of this folder to create my own variables file, mixins and so on which will overwrite the original ones if it’s the case.

  • Yes. And @import the bootstrap/bootstrap.less and your own files into a single styles.less.

  • What about the default “js”, “css”, “fonts” folders which are included in Bootstrap. How should I arrange those? I understand that for the less files I need to create a bootstrap folder inside my less folder and paste there all the default less files from bootstrap but where should I put the js files, fonts which are included also in Bootstrap folder? How do you suggest to arrange this assets for a good workflow ?

  • I explain it in the “My Example Workflow” section above. You should have your Less stored in a pre-compiled folder outside of your actual website. The JS and other files go in the active folder, but your Less (and whatever else you precompile, jade, coffeescript) are in a different working folder.

    Your less is then spit out into your CSS folder, and you’d just leave the bootstrap javascript alone. In that section above you can see an image of how my folders are set up. Your public folder can still be set up with your root HTML in the root folder, then a css/ fonts/ and js/ folder there too. The Less is output into the css/ folder as 1 css file.

  • So, you’re saying that I should create inside the “public folder” css/ / fonts/ js/ and put there all the bootstrap default files alongside my own custom js,css files ?

  • You do not need the bootstrap.css file as everything it has is already contained i your own styles.css custom file that you compiled. The Less you have already pulls in all the bootstrap less, and your own less.

  • Thanks for this @erikflowers:disqus… I’m afraid I’ve fallen behind the times a little on this stuff… I have been needing to get my head around this for some time but being actively developing sites day in and out, I have had trouble finding the time to just stop what I’m doing and learn what’s current. This post really helped me get my head around the basics of Less and how it relates to Bootstrap. I’m sure it’s a good starting point as I endeavor to upgrade my skillset through trial-and-error, and I can finally stop using CSS overrides on my Bootstrap deployments. :)

  • yeah, CSS overrides through CSS are dead. It’s all Less. If you’re on a mac go buy CodeKit and use that to compile your less ;)

  • I urge readers to use Grunt (and the grunt-recess module) as this is how Bootstrap itself is developed. Best to use the same lessc compiler as the original project. And once you set up Grunt, it’s easy to add live-reload and other game-changing improvements to your workflow. Check out Paul Irish https://www.youtube.com/watch?v=f7AU2Ozu8eo (this talk is a little old, but remains a great starting point for learning about modern FE dev workflow automation).

  • I’m on Linux. I wrote a quick shell script to take care of the compiling & minifying for me and automatically put the resulting CSS files onto the CDN and change the db entry to force users’ browsers to re-cache. Works for me :)

  • drew bailey

    Awesome, that totally clarified some things I was overthinking ;)
    Thanks for posting this; I’m still learning web development and I think this just steered me in a great direction!

  • Vijay

    Thanks Erik, After doing all the things you have explained, finally in the HTML Page Should I add the less css and js in this order:

    or

    I can use the compiled styles.css file in the html instead of styles.less, please clarify.

  • Pingback: Best Less Tutorials : A Comprehensive Guide to LESSFree Internet Tutorials | Free Internet Tutorials()

  • Great tip, thank you!

  • salma

    Erik, how can I use parts of bootstrap, for example I already have an HTML5 theme that I would like to modify. I would like to use bootstrap Wells and Buttons within the theme. I compiled bootstrap-style.less with netbeans using @import bootstrap.less

    I added the link to bootstrap-style.css below the theme style.css link but still I am not able to get the bootstrap buttons to work. Here is my HTML code:

    Patient Information

    Click Here

  • Unai Aizpurua

    Hi Erik,
    Very interesting post, and great ideas for how establish a great workflow.
    I have a little question rounding my head.

    This way you generate your .css file from .less, great. But what about the .js files or font files that grunt generates when you compile Bootstrap?
    I need to compile outside codekit or everything can be done in one time?

    Regards, and keep with your great blog!

  • This is such a fantastic tutorial! Thanks for sharing Erik. As someone who is just starting out with Sass (yes, not Less) this helped me a lot, because the basic principles are the same between Sass and Less.

  • I use a similar workflow. Still, very nice and a great tutorial for Bootstrap beginners!

  • Sawyer

    Hello,
    so in src/bootstrap you put the the file bootstrap.min.css?
    And styles.css import all .less files to the bootstrap.min.css , is that correct?

  • Thank you! This article answered everything I needed to know about getting started with LESS in Bootstrap 3.

  • Mr Kuuk

    I reply to my own post :), i got it up and running now, had to think twice with the workflow.
    Thanks

  • Dima Karpov

    Thank you a lot, this is super informative. It’s like you open new planet for me.

  • Thanks a lot

  • Thanks for sharing this! It was a very clear and useful guide and I’m excited to have a more productive workflow. Thanks!

  • Dima Karpov

    This post helped me so much during this project, again want to say thank you.

  • Jonas Donbæk

    Hi Erik,

    Thank you for this great article!

    I got some troubles when i want to compile the css. You can see my folder structure here: http://d.pr/i/1eigC

    I would like to change the color of the navbar-inverse class. Ive input this in my header.less:
    @navbar-inverse: hsla(267, 100%, 50%, 1);

    When i compile the css, i can’t see my line of navbar-inverse in the compiled css file. Which i think means that my changes to the navbar-inverse won’t happen when i upload the website.

    EDIT:
    When i apply normal css classes to the header.less & footer.less file it is compiled perfectly to the styles.css along with the bootstrap css.
    My less files is imported this way in the styles.less:

    @import “header.less”;
    @import “footer.less”;
    @import “bootstrap/bootstrap.less”;

    What did i do wrong? :)

    Thanks.

  • I am not sure that the variable @navbar-inverse: hsla(267, 100%, 50%, 1); exists. All you are doing there is setting that variable to be a color. But I don’t see that variable used anywhere in the Bootstrap Less.

    I see these:

    @navbar-inverse-color: lighten(@gray-light, 15%);
    @navbar-inverse-bg: #222;
    @navbar-inverse-border: darken(@navbar-inverse-bg, 10%);

    So that is the navbar-inverse class text color, background, and border. So if you wanted to change the navbar-inverse colors, you’d add your own version of those.

    But if @navbar-inverse isn’t a variable that is used somewhere, it won’t do anything.

    It looks like the class that uses the colors first is “.navbar-inverse”, but that’s a class, not a variable.

    I would suggest adding a class to your header.less like this

    .navbar-inverse {
    background-color: @navbar-inverse-bg;
    border-color: @navbar-inverse-border;

    }

    And change the values there, either as a variable, or change them directly to colors.

  • iBcht

    Good experience you shared there ! For WordPress front-end developers, I advice to try Roots.io, a very good bootstrap/less/grunt starter theme.

    I just noticed one thing : “Inside of the Less folder, I make a file called styles.less. This is what will be compiled to styles.css. You can name your Less file whatever you want, I’ve just always called it styles.css.” -> I guess you were talking about “styles.less” at the end ;)

  • Dapo Adediran

    Thanks! This is a life saver!

  • I tend to want to make the upgradeability and toolchain flow as simple as I can, which means I don’t do anything but import Bootstrap as is, and have commented out the pieces I don’t need. I never feel like the output CSS is too complex for browsers to parse fast, and I also uglify it down to illegibility, so I shave off whatever I can since no one needs to see the CSS.

    I realize there’s selector crawl overhead, but really, I don’t work at a scale that ever really effects anyone.

  • Jessy Cormier

    Thanks for your feedback @erikflowers:disqus

  • adrianmak

    I’m confused. If you’re using bootstrap mixins to generate grid css , why you still imported a full bootstrap less ? As you will not write bootstrap css class in html directly

  • I am not using the bootstrap CSS, I include the bootstrap.less file and whatever other ones it imports, and build the final CSS with that. It doesn’t duplicate anything. The grid less files are a part of the main Bootstrap import, not as a part of my own variables. I just take bootstrap less as a whole and add on what I want.

  • adrianmak

    Then, the compiled css will include original bootstrap css class, right ?

  • Yes, the final output includes the bootstrap less. You’ll only need 1 file at the end, it will have bootstrap, and your own styles.

  • Pingback: The Birth of the Shoelace Bootstrap Grid Builder | Experience Design at Hello Erik()

  • Dave Diomede

    How do you reference the sources in your html doc?

  • They are not referenced, they are compiled into a single CSS file. This all assumes that you compile the Less first into a public output file and don’t rely on using the less.js to compile at runtime.

  • Dave Diomede

    Thank you for the reply and the great tutorial.

  • Late to the lovefest, but almost two years later this post was very helpful for me. If you are looking for topic ideas to write about next, I’d love to know more about how you use LESS with Bootstrap (because most people reading this article are probably working with it for the first time, and you slayed this intro). Your current examples are very helpful too. Thank you.

  • Do you mean how someone would use Less/Sass in a workflow when building up a site, using Bootstrap as the framework? Custom things etc?

  • Jonathan Soifer

    Thank you very much. I started as a web developer back in 1996 or something and stopped around 2002. Getting back to the game has proven to be really tough.

    This article helped me a lot to get a decent workflow going. THANKS!

  • Erik great article and thank you for speaking simple english for all of us who see LESS as something foreign and / or mysterious. Would you happen have a recommedation on a YouTube video that comes close to walking through on what you taught here? Regardless…Thanks for being a leader in this area of web development!

  • I am not familiar with any video tutorials, I mostly learned it on my own by analyzing the existing code, or reading the Less site. It’s tough to find people who explain it real simply with the idea that someone may know nothing about it.

    Feel free to ask questions here though, that’s what the comments thread is for :)

  • Erik, we could always bring you on http://www.Category5.TV via Skype Video and then share the link with kensley lewis. What’ya say? Email pr@category5.tv and we’ll set it up.

  • I think you would be proud. I just created my first Fork in GitHub for Bootstrap. Downloaded copy of the project so I can track changes locally. Created a new folder to import LESS files from the Bootstrap folder and now outputting CSS. Thanks for getting me hooked!

  • Erik, after we import Bootstrap LESS into our custom LESS file, is it possible to override Bootstrap LESS variables for one Navbar, but not the other (if we are using multiple navbars on the same page)? If so whats the easiest workflow for that in your opinion? Thanks!

  • It’s all possible with how you nest variables and class names inside each other. I would have to actually go and test it out to remember exactly how it works, but when you put a variable inside a class, it will look for that variable inside itself, then one class up, then another class up… so you can put your variable overrides more nested. Or, put them in classes so that namespace is restricted to just that class. You don’t have to define variables out off on their own, you can define them right where you need them inside the actual class braces { }. Let me know if that’s not clear, it’s hard to explain, I’d have to write up a demo on Codepen or something.

  • if you could provide a small demo that would be awesome. worse case i simply use raw CSS selectors to control multiple nav bars. Thanks!

  • I don’t even know if I am addressing your question, but here is what my answer looks like

    http://codepen.io/flowerpower/pen/Myjypv

    Basically see how I have .box as sort of a global element, then I have classes attached to it. then each class has box-color re-defined and less uses the definition of the variable that is “closest” inside the nesting chain. This means that for something like multiple navbars in a page, you can add classes to them and then redo the variables however you want right in the addon class.

    Does this come close?

  • Erik thank you so much for the demo! That is extremely close in what I was referring too. To slightly tweek the demo you wonderfully provided, my question relates to using a Bootstrap pre-defined variable (ex: @navbar-default-border). How could we change up the value of @navbar-default-border? So basically have @navbar-default-border:none for the top navbar on the page, then @navbar-default-border:solid 2px pink, for the middle navbar on the page, and then @navbar-default-border:solid 1px blue, for the last navbar on the same page? See the conditional logic going on here? I don’t know if LESS is smart enough to do conditional stuff like this with Bootstrap’s variables, which is why I am asking :) Thanks again for being open and available for the support on this!

  • Still not sure if I’m getting it, but you can just overwrite variables inside their class. I have to presume that you have something that makes each navbar different from the rest, either wrapper classes of some sort or classes right in the navbar

    http://codepen.io/flowerpower/pen/dMOYVo

    The more specific place the variable is called, the more it overwrites. So in this example there’s a global black border variable, then 2 versions of it as class alongside the other in the HTML, and then 2 that are wrapper divs around the navbars.

    I think I know what you’re asking, but not sure if codepen can show it.

  • You are the man!!! thank you!

  • Was that what you needed? I didn’t think it was, but I couldn’t figure out a way to code it up to try it without building a full blown website.

    If that is what you were asking, the variable part isn’t really what matters on there, all that was doing was adding the rules inside a more specific class than just .navbar. Overwriting the variable is no different than just putting a different color in there without the variable. If it was a mixin it might be different.

  • Yes that was what I needed. What threw me off was that I had to do “something” with that variable once it is inside of a class selector…not just re-declare a value to it. Thank you so much!

  • In this case then, you wouldn’t need to use the variable at all. In a full bootstrap built site it might be different since I am not actually pulling all the Less files into the codepen. Here’s the same thing just using new CSS, all it needs is more specific selectors and then just the new css rule to override.

    http://codepen.io/flowerpower/pen/oxBjaN