I am using bootstrap-sass and twitter-bootstrap-rails in my rails app. All the buttons turned 2D/flat and the labels text went bold after I precompiled my assets! I am trying to figure out what went wrong here?
rake assets:precompile
Gemfile:
gem 'bootstrap-sass'
gem 'twitter-bootstrap-rails'
gem 'therubyracer'
gem 'less-rails'
bootstrap_and_overrides.css.less
#import "twitter/bootstrap/bootstrap";
#import "twitter/bootstrap/responsive";
// Set the correct sprite paths
#iconSpritePath: image-url("twitter/bootstrap/glyphicons-halflings.png");
#iconWhiteSpritePath: image-url("twitter/bootstrap/glyphicons-halflings-white.png");
// Set the Font Awesome (Font Awesome is default. You can disable by commenting below lines)
#fontAwesomeEotPath: asset-url("fontawesome-webfont.eot");
#fontAwesomeEotPath_iefix: asset-url("fontawesome-webfont.eot?#iefix");
#fontAwesomeWoffPath: asset-url("fontawesome-webfont.woff");
#fontAwesomeTtfPath: asset-url("fontawesome-webfont.ttf");
#fontAwesomeSvgPath: asset-url("fontawesome-webfont.svg#fontawesomeregular");
// Font Awesome
#import "fontawesome/font-awesome";
I kinda figured out what's going on here... thanks to BootstrapThemer.
The issue is that I have upgraded to bootstrap 3.x where the defaults are flat buttons. I never noticed any difference in my dev environment until I precompile my assets as I already had precompiled versions of 2.x
However, If someone still prefers 3D style buttons, please check out this theme
Related
I am following a tutorial to set up my bootstrap 4 environment by using node package management and sass. I installed bootstrap using npm install bootstrap command and then import the source code to a main.scss file using the #import "node_modules/bootstrap/scss/bootstrap". I then installed Ruby and SASS with gem install sass, so it enables me to run sass main.scss main.css to convert boostrap file to a css file that can be link to the html file.
However, the boostrap code only works in IE but no Google Chrome. I inspected the code in google chrome and it seems it is reading the code all right, but don't know why bootstrap is not working in this case as you can see the form is not styled at all. so confused now.
I searched for what cause the problem and found out that there is someone's answer that might be relevant to my problem:
IE and Edge are not fussy : stylesheets are rendered regardless of
the encodings. But Chrome is totally intolerant of unmatched
encodings.
How can I change the unicode for my css file when it is generated by sass in the background? In addition, how to change the code to meet the same standard as my html file? is this unicode related issue??
I guess there is no point to show the code since main.css was created by sass for Bootstrap 4. I am not sure if someone has experienced a similar situation and know what I am talking about?
Try installing node-sass (https://www.npmjs.com/package/node-sass), and also install "npm install bootstrap" and import it as 'bootstrap/dist/css/bootstrap.min.css' which will import bootstrap4 (latest)
I've just created a brand new Rails app (5.0.1). In this Rails app I want to use Bootstrap 4. I have done it before and it is usually straight forward, but this time I'm having some issues. Some styling are off / overridden for some reason. I haven't added any custom styling myself yet beside installing:
gem 'bootstrap', '~> 4.0.0.alpha6'
See the image below for what I mean:
The button text should be white as default but when I inspect the element I can see that it is not working.
Beside adding gem 'bootstrap' to my gemfile I've also done the following:
application.scss
#import "bootstrap/variables.scss"; // I haven't tweaked any of the variables yet.
#import "bootstrap";
And application.js:
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require_tree .
//= require tether
//= require bootstrap
I'm using Rails 5.0.1 and bootstrap', '~> 4.0.0.alpha6'.
Any ideas on why it isn't working?
It looks like you have more than one version of bootstrap working, maybe bootstrap 3 is overriding bootstrap 4.
If you are working with some bootstrap template, check if bootstrap is on its dependencies folder and choose if you want to delete that or the gem.
Other thing that could be the problem: Only use imports and not include in your application.scss
other thing: you have a rule for links that seems to be overriding the text color from white to black, add an '!important' to override it
I am attempting to contribute to a rails app which has the following in the gemfile:
gem 'bootstrap-sass', '~> 2.3.2.2'
gem 'sass-rails', '>= 3.2'
It seems like everything works correctly in my layouts with the exception of columns:
<div class="col-md-6"> has no effect whatsoever on the content that it wraps.
However, if I add this line:
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
To my <head>, the <div class="col-md-6"> works perfectly but several other bootstrap classes don't work, specifically around the navbar I have in place.
How can I get the effect of the above div class without including the following line?
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
Your problem is that your gemfile defines: bootstrap 2.3.2.2, and you are using syntax for bootstrap 3.0.0.
Note that the specifier ~> has a special meaning, best shown by example: ~> 2.3.2.2 is identical to >= 2.3.2.2 and < 2.4 (more info here).
CSS overrides anything that was written "before" the latest lines, so when you add the link in your layout, the CSS for bootstrap 3.0.0 overrides anything in your assets pipeline. Everything that continues working in your web app was simply not changed between these versions, everything that stops working was changed.
You can get what you want by using the syntax from the boostrap 2.3.2 refences guide. You will find the default grid system under the scaffolding link.
Did you import the bootstrap mixins? You'd need to add #import "bootstrap/theme"; to your application.css.scss file
Here's a link to that section of the docs.
Also, have you tried the bootstrap-sass-rails gem instead?
Step 1: include gem 'bootstrap-sass', '~> 3.3.6' and run bundle update
Step 2: in application.js file include
//= require bootstrap-sprockets
Step 3: in css file :
Make sure the file has .scss extension (or .sass for Sass syntax). If you have just generated a new Rails app, it may come with a .css file instead. If this file exists, it will be served instead of Sass, so rename it:
**app/assets/stylesheets/application.css app/assets/stylesheets/application.scss**
and remove all the lines from that and include
#import "bootstrap";
Step 4:rails run server
After updating rails from 3.2.3 to 3.2.14, and updating twitter-bootstrap-rails from 2.2.0 - 2.2.6 I'm getting this Less unrecognised input error:
Less::Error - Unrecognised input
(in /Users/andrew/rails/teebox_network/app/assets/stylesheets/bootstrap_and_overrides.css.less):
(gem) less-2.4.0/lib/less/parser.rb:74:in `block (2 levels) in parse'
at finish (/Users/andrew/.rvm/gems/ruby-1.9.3-p448/gems/less-2.4.0/lib/less/js/lib/less/parser.js:475:in `'
at tree.importVisitor.run (/Users/andrew/.rvm/gems/ruby-1.9.3-p448/gems/less-2.4.0/lib/less/js/lib/less/import-visitor.js:25:in `'
at Parser.parser.parse (/Users/andrew/.rvm/gems/ruby-1.9.3-p448/gems/less-2.4.0/lib/less/js/lib/less/parser.js:484:in `'
The offending lines appear to be first 2 in bootstrap_and_overrides.css.less.
#import "twitter/bootstrap/bootstrap";
#import "twitter/bootstrap/responsive";
// Set the correct sprite paths
#iconSpritePath: asset-path("twitter/bootstrap/glyphicons-halflings");
#iconWhiteSpritePath: asset-path("twitter/bootstrap/glyphicons-halflings-white");
#fontAwesomeEotPath: asset-path("fontawesome-webfont.eot");
#fontAwesomeEotPath_iefix: asset-path("fontawesome-webfont.eot#iefix");
#fontAwesomeWoffPath: asset-path("fontawesome-webfont.woff");
#fontAwesomeTtfPath: asset-path("fontawesome-webfont.ttf");
#fontAwesomeSvgPath: asset-path("fontawesome-webfont.svg");
// Font Awesome
#import "fontawesome";
// Glyphicons
#import "twitter/bootstrap/sprites.less";
Googling suggested to downgrade to 2.2.0, however the error remains. I am running less-rails (2.4.2), sass-rails (3.2.6), therubyracer (0.12.0). If anyone needs any other gem versions just shout.
Do I have to update a critical gem to fix this issue?
The issue is with less-rails and not with bootstrap. It seems the less syntax has changed. A lot of people seem to have this problem right now: https://github.com/metaskills/less-rails/issues/71 has details.
The suggestion there, which works for me, was to make sure you use the older version of less-rails for now.
gem 'less-rails', '2.3.3'
in my Gemfile solved the issue for me.
I never got to the bottom of this issues, but as I didn't require access to the bootstrap mixins I reinstalled twitter-bootstrap-rails but ran the static stylesheets generator, so I wasn't using Less anymore.
rails generate bootstrap:install static
I am using bootstrap-sass and font-awesome-sass-rails gems and have successfully eradicated duplicate icons (from glyphicons) by adding to bootstrap-and-overrides.css.scss:
[class^="icon-"] {
background-image:none;
}
However, now I am having the problem of slightly out of line icons.. The glyphicons were perfect before. Now I am seeing:
I would like to move the icons down a pixel or 2. Please help. Thanks.
Similar to the directions for LESS found on the Font-Awesome Integration section, one should remove the SASS for the glyph icons altogether, rather than just load the Font-Awesome SASS on top of it. I strongly discourage any approach that merely tries to save appearances by overriding CSS rules that don't need to be there in the first place.
I don't use Rails, but I assume the rough outline would be:
Checkout a copy of the bootstrap-sass repo.
Locate the _bootstrap.scss file.
Replace the #import "bootstrap/sprites"; with #import "your/path/to/font-awesome";, where your/path/to/ contains the font-awesome.scss.
Recompile the bootstrap.scss (don't forget to minify!).
Im using the twitter-bootstrap-rails gem. I had to comment out:
#iconSpritePath: asset-path("twitter/bootstrap/glyphicons-halflings.png");
from bootstrap_and_overrides.css.less file