Home/ Questions/Q 9000557
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-16T00:19:34+00:00

I am trying to customize Twitter Bootstrap’s CSS without altering local copies of the

  • 0

I am trying to customize Twitter Bootstrap’s CSS without altering local copies of the bootstrap code.* So I have cloned the Twitter Bootstrap project into one folder and have my application code within its own folder:

/html
    /bootstrap
       ...etc...
       /js
       /less
    /MyApp
       ...etc...
       /common_files
          /less
             style.less

Within my “style.less” file, I define a few LESS variables, then include the bootstrap files:

/* custom settings that deviate from Bootstrap's default values */
@sansFontFamily: Trebuchet MS, Tahoma, sans-serif, Arial;
@baseFontSize: 11px;
@baseLineHeight: 18px;

/* import bootstrap components from bootstrap-dedicated folder */
@import "../../../bootstrap/less/bootstrap.less";
@import "../../../bootstrap/less/responsive.less";

Since LESSCSS variables are really constants, I’m surprised that my @sansFontFamily is not getting picked up when I compile the LESS files into CSS: lessc style.less > MyApp.css --yui-compress

So…what am I missing? Why are my variables being overwritten by the variables defined within Bootstrap’s LESS files?

*–I have checked out “Twitter Bootstrap Customization Best Practices“, but think taking advantage of constants would be a better approach (if I can get it to work).

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    The correct approach is to import the bootstrap assets first, then define the custom values with LESS variables. So, given the directory structure in the question:

    If you’re using Bootstrap version 2.x:

    /* import bootstrap components from bootstrap-dedicated folder */
@import "../../../bootstrap/less/bootstrap.less";
@import "../../../bootstrap/less/responsive.less";

/* custom settings that deviate from Bootstrap's default values */
@sansFontFamily: Trebuchet MS, Tahoma, sans-serif, Arial;
@baseFontSize: 11px;
@baseLineHeight: 18px;

    If you’re using Bootstrap version 3.x:

    /* import bootstrap components from bootstrap-dedicated folder */
@import "../../../bootstrap/less/bootstrap.less";

/* custom settings that deviate from Bootstrap's default values */
@font-family-sans-serif: Trebuchet MS, Tahoma, sans-serif, Arial;
@font-size-base: 11px;
@line-height-base: 18px;

    Complete list of variables can be found in variables.less file.

    • 0