Override bootstrap variables in twitter-bootstrap-rails gem

Question

How to use custom variables when using twitter-bootstrap-rails gem? I want to change the default widths for the grid system and have added the following line to my bootstrap_and_overrides file and nothing happens...

@gridColumnWidth: 50px;

What am I doing wrong?

Here's my bootstrap_and_overrides file:

  3 @import "twitter/bootstrap/bootstrap";
  4 body { padding-top: 60px; }
  5     
  6 @import "twitter/bootstrap/responsive";
  7     
  8 // Set the correct sprite paths
  9 @iconSpritePath: asset-path('twitter/bootstrap/glyphicons-halflings.png');
 10 @iconWhiteSpritePath: asset-path('twitter/bootstrap/glyphicons-halflings-white.png');
 11     
 12 // Set the Font Awesome (Font Awesome is default. You can disable by commenting below lines)
 13 @fontAwesomeEotPath: asset-path('fontawesome-webfont.eot');
 14 @fontAwesomeWoffPath: asset-path('fontawesome-webfont.woff');
 15 @fontAwesomeTtfPath: asset-path('fontawesome-webfont.ttf');
 16 @fontAwesomeSvgzPath: asset-path('fontawesome-webfont.svgz');
 17 @fontAwesomeSvgPath: asset-path('fontawesome-webfont.svg');
 18 
 19 // Font Awesome
 20 @import "fontawesome";
 21 
 22 // Your custom LESS stylesheets goes here
 23 //
 24 // Since bootstrap was imported above you have access to its mixins which
 25 // you may use and inherit here
 26 //
 27 // If you'd like to override bootstrap's own variables, you can do so here as well
 28 // See http://twitter.github.com/bootstrap/less.html for their names and documentation
 29 //  
 30 // Example:
 31 // @linkColor: #ff0000;    
 32 
 33 // -----------------------------------------------------
 34     
 35 @gridColumnWidth: 50px;

Heres my applicaiton.css file:

  1 /*
  2  * This is a manifest file that'll be compiled into application.css, which will include all the files
  3  * listed below.           
  4  *
  5  * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
  6  * or vendor/assets/stylesheets of plugins, if any, can be referenced here using a relative path.
  7  *
  8  * You're free to add application-wide styles to this file and they'll appear at the top of the
  9  * compiled file, but it's generally better to create a new file per style scope.
 10  *
 11  *= require_self
 12  *= require_tree .         
 13  *= require bootstrap_and_overrides
 14 */  
 15     
 16     
 17 .my_background_plate {     
 18   background-color: #eee;
 19   border: 1px #ddd solid;
 20   -moz-border-radius: 5px; 
 21   border-radius: 5px;
 22   padding: 15px;
 23   margin-bottom: 15px;
 24   margin-top: 15px;        
 25 }
 26 
 27 .my_crud_btn {             
 28   margin-top: 5px;         
 29   margin-left: 15px;       
 30 }
 31 
 32 #footer {                  
 33   margin: 15px 0;          
 34   background-color: black; 
 35 }

Dagley

I read somewhere that nothing should be added after the require_tree statement in the application.css file. Try moving require bootstrap_and_overrides before. – Mcgary

nothing. should i precompile again? and what about this dot in overrides file after require_tree ? – Dagley

The dot after require_tree indicates that all the CSS files in the current directory are included. – Mcgary

Have you tried to change the variable at the beginning of the file? I can not speak for .LESS version, but in the SASS version to change these variables they had to be defined at the beginning of the file. Because when you import bootstrap - grid calculation is based on this variable. If this fails, you can change the variables in the Gem. But it is better to use bootstrap-sass: in the new version you can change the width of the grid for even an adaptive page layout. – Policlinic

I was also facing the same issue. Try commenting responsive line as suggested by Josh Lewis. – Westernmost

Answer 1

Try removing this line:

@import "twitter/bootstrap/responsive";

I believe that the responsive media queries override the @gridColumnWidth when your viewport doesn't match the default.

Pekan

With Rails 3.2.9 the asset pipeline (Sprockets) doesn't usually require a restart to recompile less imports. So, I suspect it's about the media queries redefining the values. – Stilted

Answer 2

Does your application.css file include this line?

*= require bootstrap_and_overrides

Mcgary

I added it now but nothing changes? – Dagley

Also restarted the server / recompiled assets? – Zerla

i ran rake assets:precompile and changed with column widths. You mean some other command? – Dagley

Can you paste your application.css overrides.css files? – Mcgary

Answer 3

I am using twitter bootstrap and I set my column width like so:

bootstrap.scss

/*
*= require bootstrap-colorpicker/bootstrap-colorpicker
*/

$gridColumns: 24;
$gridColumnWidth: 30px;
$gridGutterWidth: 10px;
$linkColorHover: #08c;

@import "colors";
@import "bootstrap";
@import "compass";
@import "mixins";
@import "common_bootstrap";
@import "admin/bootstrap/main_layout";
@import "admin/bootstrap/devise";

Then my layout just has:

= stylesheet_link_tag "admin_bootstrap"

Columns all work out fine.

Morvin

Answer 4

While I'm using sass converted version, I might be wrong but, since bootstrap is processed by less engine, I guess you need to define the override before importing bootstrap itself.

Moving:

@gridColumnWidth: 50px;

to very first line of the file may solve the problem. As my understanding, first declaration of the variables are used (these are treated as constants).

On contrary to above definition, if you want to override CSS definitions, you need to define that after all import you want to override.

Koval

Answer 5

I'm not sure what the deal would be, since this works for me. I added the exact variable on the same line as you have in your example.

In my Gemfile:

  group :assets do
    gem "twitter-bootstrap-rails"
    gem "therubyracer"
  end

I have followed the guide for this to work.

Did you not run the generator, or are you using a different gem?

Cloudland

It's not a good idea to put the twitter-bootstrap-rails gem in the assets group as it has a few helpers and other things that won't work if you put it in there. – Samuelsamuela

Answer 6

to override the bootstrap_and_overrrides.css.less, run these Rake tasks:

rake assets:clean 
rake assets:precompile 

Vaseline