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
Related
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
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
How do you customize something like Twitter Bootstrap in a Rails 3.2 app? I have the gem ('bootstrap-sass 3.0.3.0') already. Do I just get a copy of the Sass files and not use the gem at all? I feel like I am missing something here because I have begun to put !important in the CSS of my code. (I'm just trying to change the color of the navbar into a gradient.)
Is there also a way to not use the entire framework? I feel like I don't use some of the components anyway (both CSS and JS).
in your app/asssets/stylesheets/application.sass
$brand-primary: #829F21 !default
$brand-success: #771965 !default
$brand-warning: #A69E22 !default
$brand-danger: #d9534f !default
$brand-info: #5bc0de !default
#import "bootstrap"
list of variables https://github.com/thomas-mcdonald/bootstrap-sass/blob/master/vendor/assets/stylesheets/bootstrap/_variables.scss
important thing is to include those variables before you import bootstrap
if you want to import only parts of bootstrap than (like described on the Readme page) include only parts you want
e.g. in app/assets/javascript/application.js :
//= require bootstrap/scrollspy
//= require bootstrap/modal
//= require bootstrap/dropdown
It's just an error on my part. I just didn't copy my code for the static site prototype I built, and I had a copy of _variables.scss in my Rails app. The more you know... T_T
I have installed these gems : font-awesome-rails and bootstrap (gem 'anjlab-bootstrap-rails', :require => 'bootstrap-rails',
:github => 'anjlab/bootstrap-rails')
In my application.css.scss, I have
*= require twitter/bootstrap
*= require_self
*= require_tree .
*/
#import "font-awesome";
#import "font.css.scss";
where the last file contains #import url("//fonts.googleapis.com/css?family=Open+Sans:300,400,600,700"); The problem, is that no icon is loaded in my html because fontawesome seems not to be fetched. So I installed the font-awesome gem, but it didn't change anything. Could someone help ?
Can you try this one in your Gemfile (outside of the assets group)? gem 'font-awesome-rails', '4.0.1.0' After you bundle install, make any change (i.e. add an empty line) to your application.css.scss to get it to re-compile.
I am not sure what I am missing, but I can only use nesting for in my rails files. I want to be able to use mixins and variables as well.
My gem file is the includes sass:
group :assets do
gem 'sass-rails', '~> 3.2.3'
gem 'coffee-rails', '~> 3.2.1'
gem 'uglifier', '>= 1.0.3'
end
and my css files are name custom.css.scss. What am I missing?
From the Sass doc:
To install Sass in Rails 2, just add config.gem "sass" to
config/environment.rb. In Rails 3, add gem "sass" to your Gemfile
instead. .sass or .scss files should be placed in
public/stylesheets/sass, where they’ll be automatically compiled to
corresponding CSS files in public/stylesheets when needed (the Sass
template directory is customizable… see the Sass reference for
details).
I have to put the css files in a sass folder
I expect you're doing something like *= require_tree . in your application.css.scss file to include your stylesheets.
According to the official documentation, this won't work for mixins and variables:
If you want to use multiple Sass files, you should generally use the
Sass #import rule instead of these Sprockets directives. Using
Sprockets directives all Sass files exist within their own scope,
making variables or mixins only available within the document they
were defined in
It kinda sucks, but you need to include them all individually, if you want the mixins and variables to work. Including them using require compiles more quickly than using import, and should be preferred unless there are shared variables or necessary dependencies.
Example:
//= require navigation
//= require icons
//= require buttons
#import "variables.css.scss";
#import "mixins.css.scss";
#import "something_else.css.scss";