So if you want to go to rubygems and download and install this gem in your application, I always recommend grabbing this gemfile line so that you have this version, and most importantly, the version specifier here then make sure that when you run
bundle update it will update this version and not include any major version changes.
Now that we've spent some time looking into the bootstrap gem and determining why we want to use it, let's go add the bootstrap gem into one of our applications. I'm going to create a new application, and we're going to install a nav bar from bootstrap, and we're going to go take a look at that right now. If we go over to the components section, we come down to the navbar, we're going to put this inside of a rails application that I'm just going to create from scratch, so we'll go though the whole installation process and then integrate this navbar. So let's hop over to the terminal and create a new rails application.
rails new bookstore
Before we do anything, let's set up a page, so that we have a homepage to look at and we can tell if it's going to be using bootstrap or not. So normally you know there's no CSS, so we'll be able to tell pretty easily weather or not it's working.
rails generate scaffold book name:string description:text
root to: "books#index"
We see that we get the regular scaffold styles that come with a rails scaffold. First I think we should delete that so we don't have it to conflict with the bootstrap stylesheets, so we can remove the app/asset/stylesheets/scaffold.css.scss and now if we go back to Chrome, we can refresh and see that all the styles are gone, and this is just the basic stuff that Chrome uses. So if we come over here to the rubygems bootstrap sass tab and we grab the gemfile line, we'll go back to our application and open put the gemfile, and add it at the bottom. Come back to the terminal and run
bundle install, and then we'll restart our rails server, refresh the page, and nothing changed. So the gem needs to be installed, but it also needs to be loaded, so if we go back to our terminal, we're going to use the move command to rename our application css stylesheet to one that uses SCSS formatting so that we will import this bootstrap sass gem. So all we have to do is say
mv app/assets/stylesheets/application.css app/assets/stylesheets/application.scss, and if we go back to our editor and we open that at the bottom here we can use Sass to import the bootstrap stylesheet file which is provided from the bootstraps sass gem that we just installed. So now if we go back to Chrome and refresh, now we have bootstrap's font, bootstrap's color and styles, so this is good, we're almost there. Now we want to integrate this navbar code, so I'm going to copy this, and you'll be able to edit it later, but for now we'll just put in the example. So we want this navbar at the top here on every single page, which means that we want to put this inside of our application layout file. And instead of putting the code directly in this file, it's going to make this file quite a bit bigger than we want, because if you looked at that before, there was a whole lot of lines of code just for the single navbar, so we're going to do is we're going to put this in a partial so that the navbar can be shared between multiple layouts if we happen to decide that for checkoutwe're going to have a different layout, and it will be a little bit different. So to prepare for that, we're going to render a partial, and we're going to call it
<%= render partial: "shared/navbar" %>, and this is going to look in the app/views/shared/_navbar.html.erb
Transcript written by Miguel
Hey, very helpful video.
I have a question - on Bootstrap-sass Github, it recommends to also add "gem 'sass-rails', '>= 3.2'" to your Gemfile.
is that required?
Followed the instructions but the gem does not seem to be loading. The bundle command runs but it is not getting installed. I tried a manual install of the gem but all you get when you load a page is a thrown exception:
File to import not found or unreadable: bootstrap
The scss page tries to load bootstrap but the gem isn't loaded.
I am going to guess it's a rails version or dependency issue but not sure where to start.
Hmmm... not sure what I did but must be an issue with TextMate. Opened my Gemfile again and my gem 'bootstrap-sass', '~> 22.214.171.124' declaration was gone - added it back in and it seems to work now.
Ha, glad you figured it out! I was going to say the gem hasn't changed recently so it's likely something wrong with your Gemfile.
I started a new app today and it seems that the docs have changed:
You need to remove the require directives from your css files but when you do that it seems that all the other CSS files do not get included. You need to manually import each one in your new application.scss file. I seem to be missing something here (and I did save my files this time ;^)
I'm just getting into this basic Rails stuff now that I have time to, and a problem I encountered while following this episode was how to get the Bootstrap dropdowns working.
As of the latest version of the Rails gem as of today (5.1.0rc1), jQuery is no longer included by default in new Rails apps. Because Bootstrap's dropdown functionality relies on having jQuery loaded first, I couldn't get the dropdowns working without pulling in jQuery myself. In the episode, you convey the benefits of using gems to manage this, so here's my solution:
- I looked for a jQuery gem. I found "jquery-rails" which seems to be well-supported and up to date.
- I added jquery-rails to my Gemfile.
- As per their GitHub readme instructions, I added "//= require jquery" and "//= require jquery_ujs" to my application.js file, right above "//= require bootstrap".
It works! My dropdowns started working at that point.
I'm wondering what you think of the steps I took to solve this and if you had any other recommendations on how to add Bootstrap now that jQuery isn't included.
Unfortunately, an issue I'm encountering now is not being able to use the app in production mode. And this happens whether I do Bootstrap and jQuery or just Bootstrap like in the episode. I try to hit any route and I get "We're sorry, but something went wrong. If you are the application owner check the logs for more information.". And this is with providing a value for SECRET_KEY_BASE. Because it's in production mode, I can't see anything logged to hint at what the issue might be.
Yep, you're spot on. Basically what you did was replicate the setup from Rails 5.0 or earlier to a T. With jQuery being a dependency of the Bootstrap JS, you just include jQuery ahead of the bootstrap JS.
You don't need the jquery_ujs file because that's for handling the remote: true things which is done with the new Rails ujs that doesn't need jQuery. It doesn't really make much difference in this case, but using the new rails_ujs will be better going forward.
Until Bootstrap removes jQuery as a dependency, this is pretty much the way to go.
Thanks for clearing it up. :)
Any idea why I wasn't able to run in production doing this? Do you think there are any quirks we need to be aware of when using gems like this?
You'll have to check your Rails logs in production to see what the error is. There error isn't necessarily related to this code, but it could certainly be. Whatever error is in the logs will give you insight as to what's going wrong.
There's nothing special to these gems especially considering jquery-rails shipped with Rails every single release between like 3.1 and 5.0. GoRails itself uses that and the bootstrap-sass gem.
I have a really small question... How do i style a particular element in a particular controller action. I know there's a way to put the controller name in the body of appcontroller but i don't know how to refer to an element with that. Thanks