I am using bootstrap with Rails.
What's the difference between bootstrap and bootstrap-sprockets? Is sprockets the special version of bootstrap?
The github doc for boostrap-sass explains it:
bootstrap-sprockets and bootstrap should not both be included in
application.js.
bootstrap-sprockets provides individual Bootstrap Javascript files
(alert.js or dropdown.js, for example), while bootstrap provides a
concatenated file containing all Bootstrap Javascripts.
Related
I'm using a bootstrap 3 navbar for a site I'm creating for fun. It looks great but I often run into a bug where the dropdowns won't expand or the collapse button won't work. I'm building it in Rails and added the cdn link to bootstrap.min.js at the bottom of my application.html.erb file.
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
Am I putting it in the wrong place? Thanks
Have you checked your console? Bootstrap requires JQuery, so it might not be working if you haven't included JQuery as well.
However, in a Rails app people usually use the gem bootstrap-sass to incorporate Bootstrap-3. This gem allows you to include bootstrap in the asset pipeline. It's easier to prioritize the order of your assets when they are all kept within the asset pipeline.
I would strongly recommend using the bootstrap-sass docs to include Bootstrap in your asset pipeline rather than including bootstrap via CDN in your html. The documentation has a step-by-step guide that tells you exactly how to include it, and it's also updated for Rails 5.
One of the benefits of Rails is that it allows you to keep your code very organized, so it's good to include Bootstrap in that organization.
Helpful Resources:
bootstrap-sass
integrating-rails-and-bootstrap
Update
With the bootstrap-sass gem your application.js file should look like this (plus any additional javascripts you might have added):
// app/assets/javascripts/application.js
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require bootstrap-sprockets
//= require_tree .
Most importantly, it needs these two lines in this order to work:
//= require jquery
//= require bootstrap-sprockets
Rails 4.2.4
Ruby 2.1.2
I am trying to use twitter-bootstrap-rails.
I would like to use it by the same way I am using jquery-rails
assets/applications.js
//= require jquery
In this case I don't need to copy any jquery.js or jquery.css files to my project because Rails fetches it for me form gem.
The different situation is with twitter-bootstrap-rails.
In the guide
The Twitter Bootstrap Rails gem can provide the Bootstrap stylesheets
in two ways.
The plain CSS way is how Bootstrap is provided on the official
website.
The Less way provides more customization options, like changing theme
colors, and provides useful Less mixins for your code, but requires
the Less gem and the Ruby Racer Javascript runtime (not available on
Microsoft Windows).
Seems the first way is more suitable for me. But in this case I should use the generator rails generate bootstrap:install static before to use any twitter-bootstrap .js or .css files. The generator fetches the files into assets folder of my project.
So I am looking for a way how to use twitter-bootstrap-rails .js and .css files in my project without copying them into my project folder. I just would like to add twitter-bootstrap-rails files just putting for instance line //= require bootstrap into application.js.
Thanks a lot.
Instead of using twitter-bootstap-rails, use bootstrap-sass.
In your application.js, add the following:
//= require bootstrap-sprockets
change application.css to application.scss and add:
#import "bootstrap-sprockets";
#import "bootstrap";
and you're good to go. Oh. Just please don't forget to restart your server.
Learning rails... so I use the bootstrap-sass gem... Where are the actual bootstrap CSS files? Seems like there is some sort of magic going on to include them. What if I want to tweak a property of the CSS....
You're using the bootstrap-sass gem which is preferred by many Rails developers. So the Twitter Bootstrap CSS files are in the gem (in vendor/assets/stylesheets/).
Developers use a gem to include Bootstrap files because it makes things easier to update when new Bootstrap versions are released by simply updating the gem (plus gems are the Rails way, eh?). The bootstrap-sass gem is popular because Sass is the default format for stylesheets in Rails. An alternative is the twitter-bootstrap-rails gem which uses the native Bootstrap LESS format for stylesheets.
Using the gem, you need to modify the file app/assets/javascripts/application.js:
#app/assets/javascripts/application.js
//= require jquery
//= require jquery_ujs
//= require bootstrap
//= require_tree .
Best practice is to add a file named app/assets/stylesheets/bootstrap_and_overrides.css.scss:
# app/assets/stylesheets/bootstrap_and_overrides.css.scss
#import "bootstrap";
body { padding-top: 60px; }
#import "bootstrap-responsive";
This shows an example of overriding the Bootstrap body style to add padding to accommodate the Bootstrap navigation bar. Then just add application-specific CSS (or Sass) in additional files in app/assets/stylesheets/.
I've written an in-depth article:
Twitter Bootstrap and Rails
that goes into greater details and shows how to set up the application layout, navigation links, Rails flash messages, and form builders for Twitter Bootstrap. The article could be helpful if you want to know more.
Unfortunately, if you use the gem, the css files are hidden from you. If you do a bundle show bootstrap-sass you'll see where the files for the gem are, and you can see the stylesheets being used in there.
If you view the gem's files, you'll see the stylesheets being used in vendor/assets/stylesheets/.
I'd recommend just not using the gem, and getting your own Bootstrap stylesheets and putting them in your application's vendor/assets/stylesheets/.
The CSS files are inside the gem. To include them in your application,
in app/assets/stylesheets/ you can create a file of your choice. (i'll call it bootstrap_overrides.css.scss)
and include the bootstrap source, and override.
#include "bootstrap";
/* here are the overrides if you want to override the styles */
#include "bootstrap-responsive";
and make sure that bootstrap_overrides.css.scss is included in your global application.css file.
I'm trying to integrate bootstrap into a current rails project and am having a difficult type installing. Specifically, I seem to be having a problem with the javascript. I have added to application.js:
//= require bootstrap
But I get the following error:
These are referenced in bootstrap.js.coffee and I can get rid of the errors by clearing this file out. Here are the contents:
jQuery ->
$("a[rel=popover]").popover()
$(".tooltip").tooltip()
$("a[rel=tooltip]").tooltip()
There is discussion about loading the individual modules but it's not clear to me if I should be doing this or whether I need to be doing this. https://github.com/thomas-mcdonald/bootstrap-sass
I'd really like to be able to add bootstrap to this currently existing project. Any help is appreciated.
thx
You should make sure you have bootstrap.js or bootstrap.min.js from the Twitter Bootstrap Docs and then require it as you did. I think your issue is that you have yet another file named bootstrap.js.coffee. Try changing the name of it and requiring it along with //=require bootstrap.
First of all bootstrap requires jQuery. For Rails you can use the jquery-rails gem which provides the latest version of jQuery.
Then within your application.js you can load the required Javascripts with
//= require jquery
//= require jquery_ujs
//= require bootstrap
//= require_tree .
//= require_self
As neon mentions the load order of the scripts is important. You should load jquery first, then load bootstrap. At this point you can load all other scripts in the current directory with require_tree . (which probably contains your bootstrap.js.coffee).
There is a require for individual files like so:
//= require controllers/documents
Is there an equivalent for requiring a directory?
Yep:
//= require_tree controllers
By the way, you tagged this as coffeescript, but your question uses JavaScript comment syntax... so for the record, in CoffeeScript you want to use #=, not //=.
Also, this is actually a Sprockets question, not a Rails question. Sprockets is a default in Rails 3.1, but you can use it independently as well. At any rate, the Sprockets page offers documentation aplenty on require, require_tree, and many other handy directives.