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>
7
  • Removing turbolinks as per this stackoverflow.com/a/29682779/3346954 post has not solved the problem. Commented Oct 18, 2015 at 14:08
  • DId you run rails g bootstrap:install less? Commented Oct 18, 2015 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. Commented Oct 18, 2015 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. Commented Oct 18, 2015 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 :( Commented Oct 18, 2015 at 17:50

1 Answer 1

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");
Sign up to request clarification or add additional context in comments.

1 Comment

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.