CODEWITHSUNDEEP
ruby-on-rails
user974873
user974873

Reputation: 321

Cannot get Bootstrap to work with Rails app

I am trying to learn Rails and during this time I wanted to make my pages a little more stylish. To do so I went ahead and downloaded Bootstrap 4 and followed all the installation instructions I could find. To test it I tried to add a simple navigation bar. The bar loads all the text fine but there is no CSS applied to it :(

All the bootstrap css and js files are in assets/stylesheet and /javascript

At this point I am not too sure what I am doing wrong or what needs to be changed. I am guessing it is something simple.

Gemfile

gem 'rails', '4.2.4'

gem 'execjs'

gem 'sass-rails', '~> 5.0'

gem 'coffee-rails', '~> 4.1.0'

gem 'coffee-script-source', '~> 1.8.0'

gem 'bootstrap', '~> 4.0.0.alpha6'

gem 'jquery-rails'

Application.html.erb

<!DOCTYPE html>
<html>
    <head>
      <title>Test</title>
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true %>
      <%= javascript_include_tag 'application', media: 'all', "data-turbolinks-track" => true %>
      <%= csrf_meta_tags %>

    </head>
    <body>  
    <nav class="navbar navbar">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">Test</a>
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Page 1</a></li>
      <li><a href="#">Page 2</a></li>
      <li><a href="#">Page 3</a></li>
    </ul>
  </div>
</nav>
        <div class="container">
            <%= yield %>
        </div>
    </body>
</html>

This is my /assets/stylesheets/application.scss

@import "bootstrap";

This is my /assets/javascript/application.js

//= require jquery
//= require bootstrap
//= require bootstrap.js
//= require bootstrap.min.js
//= require jquery-3.1.1.min.js
//= require jquery_ujs
//= require turbolinks
//= require_tree .

Thank you

Upvotes: 0

Views: 625

Answers (1)

user974873
user974873

Reputation: 321

I Think I found the issue. I had two sass entries in the gemfile

gem 'sass-rails', '~> 5.0'
gem 'bootstrap-sass', '~> 3.3.6'

I commented out sass-rails and everything started working.

Upvotes: 0

Related Questions