Not found bootstrap.css when using twitter-bootstrap-rails gem [Rails3]

Question

I would like to use less with twitter-bootstrap-rails gem, but i receiving "Failed to load /assets/bootstrap.css" and "Failed to load /assets/bootstrap-responsive.css" errors (safari web inspector). Any ideas?

Here is my Gemfile:

source 'https://rubygems.org'

gem 'rails', '3.2.8'

gem 'devise'
gem 'cancan'
gem 'rolify'
gem 'roo'
gem 'kaminari'
gem 'activeadmin'
gem 'less-rails'

group :assets do
  gem 'coffee-rails'
  gem 'therubyracer', :platforms => :ruby
  gem 'jquery-ui-rails'
  gem 'angularjs-rails'
  gem 'angular-ui-rails'
  gem 'uglifier'

  gem 'slim'

  gem 'sass-rails'

  gem 'twitter-bootstrap-rails'
  gem 'bootstrap-timepicker-rails'
end

gem 'jquery-rails'
gem 'rabl'
gem 'yajl-ruby'

group :production do
  gem 'sqlite3'
end

group :development, :test do
  gem 'sqlite3'
  gem "capistrano"
  gem "rvm-capistrano"
  gem 'ruby-prof'
end

Here is my bootstrap_and_overrides.css.less file:

@import "twitter/bootstrap/bootstrap";
@import "twitter/bootstrap/responsive";

// Set the correct sprite paths
@iconSpritePath: asset-path("twitter/bootstrap/glyphicons-halflings");
@iconWhiteSpritePath: asset-path("twitter/bootstrap/glyphicons-halflings-white");

// Set the Font Awesome (Font Awesome is default. You can disable by commenting below lines)
// Note: If you use asset_path() here, your compiled bootstrap_and_overrides.css will not
//       have the proper paths. So for now we use the absolute path.
@fontAwesomeEotPath: asset-path("fontawesome-webfont.eot");
@fontAwesomeEotPath_iefix: asset-path("fontawesome-webfont.eot#iefix");
@fontAwesomeWoffPath: asset-path("fontawesome-webfont.woff");
@fontAwesomeTtfPath: asset-path("fontawesome-webfont.ttf");
@fontAwesomeSvgPath: asset-path("fontawesome-webfont.svg");

// Font Awesome
@import "fontawesome";

// Glyphicons
@import "twitter/bootstrap/sprites.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:
// @linkColor: #ff0000;

.icon-pressed {
  .icon-white;
  .label;
  width: auto
}

table > thead th {
  white-space: nowrap;
  vertical-align: 50% !important;
  font-weight: normal !important;
  cursor: pointer;
}

Here is my 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 vendor/assets/stylesheets of plugins, if any, 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 top of the
 * compiled file, but it's generally better to create a new file per style scope.
 *
 *= require_self
 *= require bootstrap_and_overrides
 *= require jquery.ui.all
 *= require daterangepicker
 *= require bootstrap-timepicker
 *= require angular-ui
 *= require_tree .
 */
body { padding-top: 50px; }
footer { margin-top: 200px; }

Here is my view:

<!DOCTYPE html>
<form class="form-search">
  <input type="text" class="input-medium search-query">
  <button type="submit" class="btn">Search</button>
</form>

Heidelbergensis · Accepted Answer · 2013-01-21 20:19:06Z

1

You have to run the command

rake assets:precompile

so the CSS files get copied into public folder. Try that, otherwise it may be that you are not adding the CSS to your HTML.

edited Jan 21, 2013 at 20:19

Heidelbergensis

4852 gold badges5 silver badges19 bronze badges

answered Jan 21, 2013 at 16:32

Leandro Temperoni

4355 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user1997649 Over a year ago

Thanks for quick response. I've precompiled assets, but there is no css files in public/twitter/bootstrap folder. There are only glyphicons files

quantumpotato Over a year ago

I ran this and I still have no bootstrap.css

R Milushev · Accepted Answer · 2013-01-21 16:44:39Z

0

I would advice you just to add a new insertion to your application.css manifest file . You should add :

*= require bootstrap 
*= require bootstrap-responsive

right after *=require self statement . I think it is a part of installing the gem twitter-bootstrap-rails , which means that you have missed rails g bootstrap:install .

The error messages are generated from wrong inclusion on the top of your bootstrap_and_overrides.css.less file (@import "twitter/bootstrap/bootstrap"; @import "twitter/bootstrap/responsive";). You should remove them .

You may consider to get more information from this RialsCast.

answered Jan 21, 2013 at 16:44

R Milushev

4,3153 gold badges29 silver badges35 bronze badges

1 Comment

R Milushev Over a year ago

Where did you place the view ? If you would like to try if the gem works , generate a dummy scaffold (rails g scaffold Project name content:text). Then go to localhost:3000/projects .

user1997649 · Accepted Answer · 2013-01-24 18:08:03Z

0

I've finally found it! I forget to delete these lines

<%= stylesheet_link_tag    "bootstrap" %>
<%= stylesheet_link_tag    "bootstrap-responsive" %>

from my application.html.erb

answered Jan 24, 2013 at 18:08

user1997649

235 bronze badges

Collectives™ on Stack Overflow

Not found bootstrap.css when using twitter-bootstrap-rails gem [Rails3]

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related