CODEWITHSUNDEEP
ruby-on-railstwitter-bootstraptwitter-bootstrap-rails
oFca
oFca

Reputation: 2830

Override bootstrap variables in twitter-bootstrap-rails gem

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 }

Upvotes: 5

Views: 6501

Answers (6)

Breno Perucchi
Breno Perucchi

Reputation: 893

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

rake assets:clean 
rake assets:precompile

Upvotes: 0

ringe
ringe

Reputation: 812

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?

Upvotes: 1

shigeya
shigeya

Reputation: 4922

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.

Upvotes: 1

Josh W Lewis
Josh W Lewis

Reputation: 1319

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.

Upvotes: 8

Chris Barretto
Chris Barretto

Reputation: 9529

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.

Upvotes: 1

sailor
sailor

Reputation: 8044

Does your application.css file include this line?

*= require bootstrap_and_overrides

Upvotes: 3

Related Questions