Skip to main content

21 Styling with Bootstrap Sass

Episode 7 · July 7, 2014

Learn how CSS and Javascript frameworks should be added to Rails applications

Javascript Gems Frontend


Resources

Transcripts

When it comes to front-end frameworks and integrating JavaScript libraries to your rails application, there's a lot of different ways that you can do it, sometimes you can download the library directly and install it in your application, in the assets folder, or you can use a gem to handle it, and there's many gems to do that, and different methods. So we're going to talk about integrating Bootstrap in your application, which includes a CSS framework, as well as a bunch of JavaScript helpers to do that. Normally, if you were to download bootstrap, you would come over here and click "Download Bootstrap", which this will download a zip file containing the stylesheets and the JavaScript files that you can copy into your applications assets folder. That's one way of doing it, it's ok to do that. But if you really want to integrate this in your application and always depend upon bootstrap, then you don't necessarily need to have bootstrap inside of your application. It's completely third-party, you're not going to be working on bootstrap, and if you do, you should work on bootstrap directly, not hacking it inside of your application. So this is where ruby gems come in. You have ruby gems that wrap bootstrap and allow you to integrate it into your rails application easily. The reason for this is because those gems will handle upgrading to the latest version of bootstrap seamlessly. You change the version, you upgrade the gem, and voila, you're on the latest version of bootstrap, and your application never has to care how bootstrap is designed or works in order to do that, so you completely separate the concern between those two things. Bootstap's code should be separate in your applications code should be independent of that, so this is why we want to use a gem like bootstrap-sass. Now bootstrap sass is a ruby gem that I like to use in my rails applications, the reason why is because it's extremely lightweight, and there's not a lot of code to it, so it loads up the assets, and that's basically it. It has a handful of helpers but in order to evaluate why this gem is one that I want to use, I'm going to walk you through that, so I've taken a while to read through this gem to figure out if it's something worth using. Because bootstrap doesn't have a lot of ruby logic, it just simply needs to serve up the CSS and JavaScript files. We want a gem that simply does that so if we dive into this gem, we can go into the lib directory and actually take a look at the rails integration here, and see how it does that. So normally we would just dump in the CSS and that would be ok. But because it's in a gem, it need a little bit of ruby code around it to properly integrate it. So we can dive in here into bootstrap-sass.rb file and see that ok this is going to simply load the gem properly, it has a handful of helpers of the paths, there's a couple other helper methods and really not a lot going on, and that's all that's in this file, so there's very little logic going on in here. If we dive into the gem more itself, we see that there's a rails engine to integrate it, they made som sass helper functions, and the ruby gem version, so there's really not a whole lot in here. If we want to dive into it and double check, you can look that ok there's some more path helpers, and that's about it. So these are really good signs that this gem is very lightweight and does exactly what we want from it, because if we were to integrate bootstrap ourselves, we would just copy files in and we'd be off to the races, so some people write gems that add a lot of overhead and things get to be slow and confusing, ant then when there's a bug it's hard to fix. So looking at this one, the code for itself is very simple, they have some rake tasks and templates and tests, but if we look in the vendor folder, you can see that inside of here, it's just the bootstrap files in SASS format, so this is good, it's in SASS which means that we can write, we can change the variables and then change the colors of bootstrap and tweak the settings, so if you want to make it a 16 column grid, you can do that easily. So, in here, if you want to learn how any of bootstrap works, you can dive right in and you know exactly what files contain which thing, so if you want to go into the mixers or the modals or anything like that, you can just simply dive in, and this gem is very transparent, so there's nothing very confusing or hidden away, and it's very simple, which I like. If I'm going to use a gem, I will not use a gem unless I trust that it's straightforward and that I would be able to go fix a bug myself if I came across one. So you want to really trust the gems that you use and not use them arbitrarily because: Oh, I wanted a great bootstrap, I guess I should find a gem for it. DO NOT DO THAT, because that is not a good way to handle things.

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

rake db:migrate

config/routes.rb

root to: "books#index"

rails server

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

mkdir app/views/shared

touch app/views/shared/_navbar.html.erb

And here we can paste in the navbar, and now, that will render on every single page that the application layout is rendered on, so if we come back to Chrome and refresh the page. Voila, now we have our nav bar in every page so if we go to add a new book, we still got the navbar and so on. So we have access to all of bootstrap's components and other so you can do, you know icons, and you can do dropdowns and anything that you see on here, you can take and then integrate it into your application, and all of it's available pretty much immediately. So if you want to use JavaScript for example, you'll do the same thing that we did with the application CSS, although, if we go into the README, we can see that you can use the asset pipeline require to handle it rather than sass to import. So going down to the JavaScript here, you can load all of the bootstrap JavaScript by saying require bootstrap, and we'll copy tha and put in out application.js file and we'll do it right after turbolinks. And now if we come back here, I haven't refreshed the page, so you can see that our dropdowns are working which that is because they need JavaScript, so if we refresh the page and click it now, it has loaded the JavaScript through the asset pipeline, and that is as simple as it is to evaluate and integrate a bootstrap gem into your application.

Transcript written by Miguel

Discussion


Gravatar
Johnny Goodman (30 XP) on

A very good video. I'm going to do it this way instead of using the heavier gems in future.

This should really be titled "Installing Bootstrap Saas" though as it doesn't get into Styling.

Gravatar
Jim Millecam (10 XP) on

Excellent tutorial. Thanks.


Gravatar
Christian Kyony (10 XP) on

Excellent video for those of us starting up with Rails and Bootstrap.


Gravatar
Rory Walker (770 XP) on

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?

Gravatar
Chris Oliver (167,560 XP) on

Just make sure sass-rails is in your Gemfile. As long as you're on a compatible version of sass, you should be fine.


Gravatar
ITdev on

Great video! But I have one minor problem glyphicons is not working, any idea why?


Gravatar
Dan Tappin (860 XP) on

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.

Gravatar
Dan Tappin (860 XP) on

Hmmm... not sure what I did but must be an issue with TextMate. Opened my Gemfile again and my gem 'bootstrap-sass', '~> 3.2.0.2' declaration was gone - added it back in and it seems to work now.

Gravatar
Chris Oliver (167,560 XP) on

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.

Gravatar
Roderick Silva (30 XP) on

Ctrl-s Ha ha ha.


Gravatar
Dan Tappin (860 XP) on

I started a new app today and it seems that the docs have changed:

https://github.com/twbs/boo...

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 ;^)


Gravatar
Jay Killeen (1,580 XP) on

Nailed it! Thank you. Would be interesting to see how we can get that site wide search feature to work :)


Gravatar
Pandu (10 XP) on

Hello, how can i use both material and bootstrap for single rails app. I mean i want to use material for not authenticated pages and bootstrap for admin pages. How can i do that? Help me!


Gravatar
jonnitrev on

what if i want to use the "signin" of bootstrap??? is the same way??


Gravatar
Matthew Welke (1,220 XP) on

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.

EDIT:

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.

Gravatar
Chris Oliver (167,560 XP) on

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.

Gravatar
Matthew Welke (1,220 XP) on

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?

Gravatar
Chris Oliver (167,560 XP) on

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.

Gravatar
Matthew Welke (1,220 XP) on

Gotcha.


Gravatar
Anyanwu Miracle on

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


Login or create an account to join the conversation.