Bootstrap is not loading for me. What am I doing wrong?
application.scss (complete file, nothing else in it)
// "bootstrap-sprockets" must be imported before "bootstrap" and "bootstrap/variables"
#import "bootstrap-sprockets";
#import "bootstrap";
#import "bootstrap/theme";
Gemfile
gem 'bootstrap', '~> 4.0.0.alpha4'
gem 'bootstrap-sass', '~> 3.1.1'
gem 'bootstrap-sass-extras'
HTML IN HEADER SHOWS (running rails s, in development mode):
<link rel="stylesheet" media="all" href="/stylesheets/application.css">
have you try :
rails generate bootstrap:install static
rails generate bootstrap:install less
This is a little hard to track down with the information you provided. Have you renamed your style files to .scss extention? Make sure you follow the installation instructions in the docs: Bootstrap 4 alpha.
It looks like you are using extra gems you don't need. If you are using the alph 4 version of bootstrap, you only need that in your gem file, you do not need version 3. Make sure include the right dependencies in your application.js file:
//= require jquery
//= require bootstrap-sprockets
as well as:
#import "bootstrap";
in your application.scss file.
You have to configure these files and then make sure you restart your application in order for the changes to take place. Hope this helps!
Related
I keep trying to
#import "bootstrap-sprockets";
#import "bootstrap";
in app/assets/stylesheets/custom.scss, however, when I try to I get the error:
File to import not found or unreadable: bootstrap-sprockets.
Load paths:
/Users/SimonFekete/environment/course_cat/app/assets/config
When I comment out #import 'bootstrap-sprockets'; it works though.
I appreciate any help and please let me know if you need more info.
Do you have this gem in your gemfile.
gem 'bootstrap-sass', '3.2.0.2'
Also, Have you restarted the server after installing the gem.
If it doesn't work out, remove gem 'bootstrap' and/or gem 'sass-rails', if you have any of them in your gemfile
Try to add this line to your application.js :
//= require bootstrap-sprockets
Remember, always put //= require filename above //= require_tree .
I have a rails engine, and I want to use bootstrap on it.
I included 'bootstrap' as a dependency. And I want to import in my application.scss file.
However, importing like this:
#import 'bootstrap';
Doesn't work as normal. I suspect that it is because I'm running an engine, and my scss file is placed in a module instead of the /stylesheets directory. However,
#import '../bootstrap';
does not work either.
Any ideas, and in addition, is there something fundamental I should know about rails engines when it comes to referencing by directory and what not? I only ask because this is the first time I've ever worked with a rails engine
UPDATE
It appears that also the jquery-rails gem (in addition to boostrap) could not be found when I require it in my application.js file like this:
//= require jquery-rails
//= require bootstrap
I figured it out. I just had to change:
s.add_dependency 'bootstrap'
to this:
s.add_dependency 'bootstrap', '~> 4.1.3'
I am trying to import/activate bootstrap in my Ruby on Rails application. I have added the#import "bootstrap-sprockets"; followed by
#import "bootstrap"; lines to my application.css.scss file and saved it. I also added gem 'bootstrap-sass', '3.3.1' to my Gemfile. I then restarted my server. When I launch the app from my browser, it doesn't appear that the bootstrap sass/css was applied. I can tell because the font never changed and the bootstrap navbar I added don't look correct. I have tried closing out my browser and starting over and trying to launch the link from a different browser, but it doesn't help. Any suggestions?
Inside your gem file:
gem 'bootstrap-sass'
Inside your console
bundle install
app > assets > stylesheets > application.css
#import "bootstrap-sprockets";
#import "bootstrap";
Finally, rename the file from application.css to application.css.scss and restart your server. (Don't forget to add the JavaScript too.)
Simply add bootstrap .css files in assets and same goes for .js files. It should work then without installing gems. It is the best option as you can update your files with new versions whenever you want.
I have a application.css.scss with the following content -
#import bootstrap
Now I would like to use the chosen-rails gem, and add the following sprokets directive to my application.css.scss file -
*= require chosen
I installed the sprockets-sass gem, and changed my application.css.scss file to -
#import bootstrap
//*= require chosen
However I dont see the chosen css appear, what am I doing wrong?
Try using only the #import syntax:
#import 'bootstrap'
#import 'chosen'
The 'sass-rails' gem instructs not use the require syntax in SASS files.
I create a new rails project,and add
gem 'bootstrap-sass'
to my Gemfile, then I run bundle install and every things going good. then I add:
/*
*= require bootstrap
*/
in my application.css file, and I write a test,but it doesn't.
and I also try add`#import "bootstrap"; in my hello.css.scss file .but it also doesn't work.
Rollen,
You seem to be mostly there. Sass is in Rails 3.1 by default so you won't need to do anything specific for that. After you add the gem to your Gemfile and do a bundle install your issue is in the application.css file. Typically when using Sass I'd just suggest that you remove the manifest code (all the commenting at the top) from the application.css and rename the application.css to application.css.scss (removing Sprockets from the CSS file). Then add:
#import 'bootstrap'
to the very top of it. That should solve it for you. You'll need to manually add each CSS file you'll want to load into the application.css.scss file since sprockets is gone, but that's typically a good idea anyway since load order in CSS is important for the cascade.
If you want to add the JavaScript features to the framework (which you likely will want to) you'll also want to add
//= require bootstrap
Just above the call to //= require_tree . within app/assets/javascripts/application.js.
Probably a little late to the party, but just in case anyone else stumbles across the question...
This was a small gotcha I Solved by adding #import "bootstrap"; to the top of my application.css file, the renamed the file to application.css.scss
Hope this helps.
https://github.com/rails/sass-rails needs to be there in your Gemfile.
gem 'sass-rails', '~> 3.1'
gem 'bootstrap-sass', '~> 2.0.1'
Remove all the comments at the top of the application.css and rename application.css to either application.sass or application.css.scss depending on how you want to do your css'ing
Then add:
#import 'bootstrap'
This should allow you to start using bootstrap, providing you have indeed included the bootstrap-sass gem correctly and ran bundle install afterwards.