Question

I’m working on a Rails 3.2 app with Twitter Bootstrap. I’m trying to override Bootstrap’s colors in bootstrap_and_overrides.css.less.

I have been able to override colors using LESS variables. For example:

    @navbarBackground: @blue;
    @navbarBackgroundHighlight: @blueDark;

However, I want to deviate from the color variables. I can’t seem to put in a hex color like 5092CC. I don’t want to redefine the color variables in LESS because I’ve read that can cause problems down the road.

I’m also trying to change the colors for all of the headings tags. I want them to all be the same color. But, Bootstrap is ignoring every change I’ve tried. My most recent attempt was:

    h1, h2, h3, h4, h5, h6 {
      color: 325B7F;
      small {
        color: 325B7F;
      }
    }

I’m definitely confused between regular CSS and LESS. I’ve been battling this most of the day.

All help is greatly appreciated.

Answer 1

I am not familiar with Rails. However regardless if your are using CSS or LESS, you still need to add a #.

h1, h2, h3, h4, h5, h6 {
  color: #325B7F;
  small {
    color: #325B7F;
  }
}

If this is not working you should have a look at the variables.less file of bootstrap. Change the colors variables (@blue and @blueDark) to whatever you need and recompile the CSS

Addition:

This is how I overwrite bootstraps variables, without needing to change any bootstrap files directly. I have a file called mysite.less:

// bootstrap less files located in another folder 
@import "../../bootstrap/less/bootstrap.less";
@import "../../bootstrap/less/responsive.less";

// mysite overwrites located in my own project folder
@import "variables.less";

In variables.less redefine the variables you want to overwrite:

@blue: #123456;
@blueDark: #678912;

And finally compile your CSS:

lessc mysite.less > bootstrapincludingmyoverwrites.css