0

I've added to gemfile, bundle installed and bundle updated twitter-bootstrap-rails gem and all of the dependency gems that i need as per here, yet none of the styles in my layout file a rendering? Can anyone see what I'm doing wrong or perhaps whether i'm missing an important require somewhere?

Gemfile

source 'https://rubygems.org'

# Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
gem 'rails', '4.2.1'
# Use postgresql as the database for Active Record
gem 'pg'
# Use SCSS for stylesheets
gem 'sass-rails', '~> 5.0'
# Use Uglifier as compressor for JavaScript assets
gem 'uglifier', '>= 1.3.0'
# Use CoffeeScript for .coffee assets and views
gem 'coffee-rails', '~> 4.1.0'
# See https://github.com/rails/execjs#readme for more supported runtimes
# gem 'therubyracer', platforms: :ruby

# Use jquery as the JavaScript library
gem 'jquery-rails'
# Turbolinks makes following links in your web application faster. Read more: https://github.com/rails/turbolinks
gem 'turbolinks'
# Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder
gem 'jbuilder', '~> 2.0'
# bundle exec rake doc:rails generates the API under doc/api.
gem 'sdoc', '~> 0.4.0', group: :doc

gem 'devise'

gem "therubyracer"

gem "less-rails" #Sprockets (what Rails 3.1 uses for its asset pipeline) supports LESS

gem "twitter-bootstrap-rails"

group :development, :test do
  # Call 'byebug' anywhere in the code to stop execution and get a debugger console
  gem 'byebug'

  # Access an IRB console on exception pages or by using <%= console %> in views
  gem 'web-console', '~> 2.0'

  # Spring speeds up development by keeping your application running in the background. Read more: https://github.com/rails/spring
  gem 'spring'

  gem 'rspec-rails'
end

group :test do

  gem 'capybara'

  gem 'pry-rails'

  gem 'shoulda-matchers', github: 'thoughtbot/shoulda-matchers'

end

stylesheets/application.css:

 /*
     * This is a manifest file that'll be compiled into application.css, which will include all the files
     * listed below.
     *
     * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
     * or any plugin's vendor/assets/stylesheets directory can be referenced here using a relative path.
     *
     * You're free to add application-wide styles to this file and they'll appear at the bottom of the
     * compiled file so the styles you add here take precedence over styles defined in any styles
     * defined in the other CSS/SCSS files in this directory. It is generally better to create a new
     * file per style scope.

     *= require bootstrap_and_overrides
     *= require_tree .
     *= require_self
*/

stylesheets/bootstrap_and_overrides.css.less

@import "twitter/bootstrap/bootstrap";

// Set the correct sprite paths
@iconSpritePath: image-url("twitter/bootstrap/glyphicons-halflings.png");
@iconWhiteSpritePath: image-url("twitter/bootstrap/glyphicons-halflings-white.png");

// Set the Font Awesome (Font Awesome is default. You can disable by commenting below lines)
@fontAwesomeEotPath: font-url("fontawesome-webfont.eot");
@fontAwesomeEotPath_iefix: font-url("fontawesome-webfont.eot?#iefix");
@fontAwesomeWoffPath: font-url("fontawesome-webfont.woff");
@fontAwesomeTtfPath: font-url("fontawesome-webfont.ttf");
@fontAwesomeSvgPath: font-url("fontawesome-webfont.svg#fontawesomeregular");

// Font Awesome
@import "fontawesome/font-awesome";

// Glyphicons
//@import "twitter/bootstrap/glyphicons.less";

// Your custom LESS stylesheets goes here
//
// Since bootstrap was imported above you have access to its mixins which
// you may use and inherit here
//
// If you'd like to override bootstrap's own variables, you can do so here as well
// See http://twitter.github.com/bootstrap/customize.html#variables for their names and documentation
//
// Example:
// @link-color: #ff0000;

javascripts/application.js

// This is a manifest file that'll be compiled into application.js, which will include all the files
// listed below.
//
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
// or any plugin's vendor/assets/javascripts directory can be referenced here using a relative path.
//
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// compiled file.
//
// Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details
// about supported directives.
//
//= require jquery
//= require jquery_ujs
//= require twitter/bootstrap
//= require_tree .

layouts/application.html.erb:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Odot2</title>
  <!-- Latest compiled and minified CSS -->
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <%= csrf_meta_tags %>
  <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true %>
  <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
</head>

<body>

  <nav class="navbar navbar-default">
    <div class="container-fluid">
      <div class="navbar-header">  
        <a class="navbar-brand" href="#">Odot2</a>
      </div>

      <div class="user-links collapse navbar-collapse">
        <ul class="nav navbar-nav navbar-right">
          <% if user_signed_in? %>
          <li role='presentation'><%= link_to('Logout', destroy_user_session_path,
              :method => :delete) %></li>
          <li role='presentation'><%= link_to('Edit registration', 
              edit_user_registration_path) %></li>
          <% else %>
          <li role='presentation'><%= link_to('Login', new_user_session_path) %></li>
          <li role='presentation'><%= link_to('Register', new_user_registration_path) %></li>
          <% end %>
        </ul>
      </div>

    </div>
  </nav>

  <div class="flash panel">
    <% flash.each do |type, message| %>
      <div class='<%= build_alert_classes(type) %>'>
        <%= message %>
      </div>
    <% end %>
  </div>

  <main>
    <div class="container-fluid">
      <%= yield %>
    </div>
  </main>
</body>
</html>
jbk
  • 1,911
  • 19
  • 36
  • Removing turbolinks as per this http://stackoverflow.com/a/29682779/3346954 post has not solved the problem. – jbk Oct 18 '15 at 14:08
  • DId you run rails g bootstrap:install less? – vanburen Oct 18 '15 at 15:30
  • I did. Initially I had tried to get it up and running without less-rails so i first of all, after adding and bundling `gem "twitter-bootstrap-rails"`, ran; `rails g bootsrap:install` without less suffix. After not being able to get it to work i added gems; `"therubyracer"` & `"less-rails"`, bundle installed, bundle updated, then ran; `rails g bootstrap:install less`. All ran without errors, still can't get bootstrap styles to render. – jbk Oct 18 '15 at 16:08
  • Are you getting any errors because I don't believe *= require twitter/bootstrap (only bootstrap_and_overrides) is needed in your application.css, I just setup a test and when I included that file as required I received FileNotFound, without the require everything works as expected. – vanburen Oct 18 '15 at 16:28
  • I received no errors with the *= require twitter/bootstrap in there, but you're right it's erroneous entry from me copying that line over from application.js into application.css, I have now deleted that require in application.css, bootstrap still not working :( – jbk Oct 18 '15 at 17:50
  • Adding application.js above also for context. – jbk Oct 18 '15 at 17:50
  • in the docs it says to run `rails generate bootstrap:install static` which was my issue. – raddrick Oct 23 '16 at 21:48

1 Answers1

0

I used the Bootstrap-sass gem and it works fine.

gem 'bootstrap-sass'

//= require bootstrap

and then in a file called "Bootstrap_and_customization.css.scss" I have:

@import url(http://fonts.googleapis.com/css?family=Lato:400,700);
@import 'bootstrap-sprockets';
@import 'bootstrap';
@import url("//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css");
JohnOHFS
  • 174
  • 14
  • If I can't get it to work with less I'll move to sass, but would like to know what the issue is with my set up of less. My `bootstrap_and_overrides.css.less` contents pasted above. Thanks – jbk Oct 18 '15 at 19:38