Bootstrap not working with ruby

Question

I have tried everything and I just cant get my navbar in bootstrap to work. I am using a up to date version of ruby and rails version

I have the gems the github tells me to put in my code

Gems

and its says that they are being used

used

I changed my application file from application.css to a scss file and got rid of all the require statements.

scss file change

I updated my application.js file the way they told me to.

js file

but when I try and put this boostrap header in my file

header

I end up with this

rendered

instead of this

from the website

If anyone could help it would be appreciated. I have done everything I could think of.

Answer 1

I recently done a project in ruby on rails with Bootstrap 4 beta 2, here are my setup:

Gemfile

gem 'jquery-ui-rails', '~> 5.0', '>= 5.0.5'
gem 'bootstrap', '~> 4.0.0.beta2'
gem 'jquery-rails', '~> 4.3', '>= 4.3.1'
gem 'font-awesome-rails'

app/assets/javascripts/application.js (The sequence are important)

//= require jquery3
//= require popper
//= require rails-ujs
//= require jquery-ui
//= require_tree .
//= require bootstrap-sprockets

assets/stylesheets/application.scss

@import "bootstrap";
@import "font-awesome";

For more details, go visit bootstrap-sass gem

HERE IS THE UPDATE (refer to bootstrap-sass)

1. Generate new rails app rails new bootstrap4test

2. bundle install

3. Scaffold a simple blog with text rails g scaffold Blog content:text

4. Database Migrate rails db:seed && rails db:migrate

5. Add gem into Gemfile

   gem 'bootstrap-sass', '~> 3.3.7' gem 'sass-rails', '>= 3.2'

6. rename app/assests/stylesheets/application.css to .scss

7. remove everything in the application.scss and add these

   // "bootstrap-sprockets" must be imported before "bootstrap" and "bootstrap/variables" @import "bootstrap-sprockets"; @import "bootstrap";

8. Now, add another gem gem 'jquery-rails' into your Gemfile

9. bundle install

10. in app/assets/javascripts/application.js add 2 lines

    //= require jquery //= require bootstrap-sprockets

Your application.js should look like this

//= require jquery
//= require bootstrap-sprockets
//= require rails-ujs
//= require turbolinks
//= require_tree .

11. Then start server rails s and go to http://localhost:3000/blogs

Tested on Mac, ruby: 2.4.2, rails: 5.1.4

Answer 2

You should need to include @import "bootstrap-sprockets" before @import "bootstrap". do not know if rails-ujs includes both but, you might also want to require jquery and jquery_ujs inside application.js file.

assets/javascripts/application.js

//= require jquery
//= require jquery_ujs
//= require bootstrap

assets/stylesheets/application.scss

@import "bootstrap-sprockets";
@import "bootstrap";

views/layouts/application.html.erb

<%= javascript_include_tag 'application' %>
<%= stylesheet_link_tag 'application', media: 'all' %>

below is an excerpt from my working rails+bs setup.