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 }
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With