2

I've been having trouble integrating bootstrap-sass into any of my Rails 4 projects. So far i'm only getting partial rendering of the bootstrap assets. I've resorted to using using the railstutorial.org in my search for bootstrap functionality. I'm using the ch5 (listing 5.4) source code yielding the following results:

The classes btn-lg, btn-primary, and navbar-right classes are working. The page yields buttons and a partially structured navbar with the links to the right. However, the navbar classes for the most part are not working. The navbar has no 'inverse' styling, the entire div is washed out with no text styling whatsoever.

I've been using 'rake assets:precompile' and restarting the server after every update to the assets pipeline.

Gemfile contains the following above the 'jquery-rails' gem

gem 'rails', '4.2.0'
gem 'bootstrap-sass', '~> 3.3.3'
gem 'sass-rails', '>= 3.2'

custom.css.scss

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

application.html.erb

<!DOCTYPE html>
<html>
  <head>
    <title><%= full_title(yield(:title)) %></title>
    <%= stylesheet_link_tag "application", :media => "all" %>
    <%= stylesheet_link_tag 'application', media: 'all',
                                           'data-turbolinks-track' => true %>
    <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
    <%= csrf_meta_tags %>
    <!--[if lt IE 9]>
      <script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/r29/html5.min.js">
      </script>
    <![endif]-->
  </head>
  <body>
    <div class="navbar navbar-fixed-top navbar-inverse">
      <div class="container">
        <%= link_to "sample app", '#', id: "logo" %>
        <nav>
          <ul class="nav navbar-nav navbar-right">
            <li><%= link_to "Home",   '#' %></li>
            <li><%= link_to "Help",   '#' %></li>
            <li><%= link_to "Log in", '#' %></li>
          </ul>
        </nav>
      </div>
    </div>
    <div class="container">
      <%= yield %>
    </div>
  </body>
</html>

Buttons in home.hrml.erb

<% provide(:title, "Home") %>
<div class="center jumbotron">
  <h1>Welcome to the Sample App</h1>

  <h2>
    This is the home page for the
    <a href="http://www.railstutorial.org/">Ruby on Rails Tutorial</a>
    sample application.
  </h2>

  <%= link_to "Sign up now!", '#', class: "btn btn-lg btn-primary" %>
</div>

<%= link_to image_tag("rails.png", alt: "Rails logo"),
            'http://rubyonrails.org/' %>
rpenn30
  • 21
  • 1

1 Answers1

0

How are you handling your application.css file?

Make sure the bootstrap is being loaded after self

For example, in my application.css I have

/*
    *= require_self
    *= require main

*/

And in my main.scss I have my bootstrap

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

You can also try cleaning the assets, though I don't think this is the issue

Clam
  • 935
  • 1
  • 12
  • 24