Override bootstrap variables in twitter-bootstrap-rails gem
ruby-on-rails, twitter-bootstrap, twitter-bootstrap-rails
Solution
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.
Problem
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 } ```