Skip to main content

Styling with Bootstrap Sass Discussion

General • Asked by Chris Oliver

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.

Excellent tutorial. Thanks.


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


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?

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


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


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', '~> 3.2.0.2' 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:

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


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


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!


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


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.

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


Login or Create An Account to join the conversation.

Subscribe to the newsletter

Join 24,647+ developers who get early access to new screencasts, articles, guides, updates, and more.

    By clicking this button, you agree to the GoRails Terms of Service and Privacy Policy.

    More of a social being? We're also on Twitter and YouTube.