Styling with Bootstrap Sass Discussion
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.
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.
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.
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!
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.
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