Twitter Bootstrap Question posted in

Rails with Bootstrap (on Windows) – empty application.css file and styling won't load – Twitter bootstrap

enter image description here

Relevant part of GemFile:

enter image description here

Bundle install:

enter image description here

And still no effect:

enter image description here

From appviewslayoutsapplication.html.erb:

<%= stylesheet_link_tag "application", :media => "all" %>
<%= javascript_include_tag "application" %>

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. JavaScript code in this file should be added after the last require_* statement.
//
// Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details
// about supported directives.
//
//= require jquery
//= require jquery_ujs
//= require twitter/bootstrap
//= require turbolinks
//= require_tree .

How do I load Bootstrap styling?

Tags:

2

Answers


  1. 0

    Seems youre missing to import bootstrap styles. To solve this according to the bootstrap-sass documentation you should:

    Import Bootstrap styles in app/assets/stylesheets/application.scss

    // "bootstrap-sprockets" must be imported before "bootstrap" and "bootstrap/variables"
@import "bootstrap-sprockets";
@import "bootstrap";

    bootstrap-sprockets must be imported before bootstrap for the icon fonts to work.

    Make sure the file has .scss extension (or .sass for Sass syntax). If you have just generated a new Rails app, it may come with a .css file instead

    Login or Signup to reply.
  2. 0

    First you should decide which gem to use, twitter-bootstrap-rails or bootstrap-sass, not both.

    Let’s say you use bootstrap-sass then in your application.js should be

    //= require bootstrap-sprockets

    not

    //= require twitter/bootstrap

    and then add

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

    to your app/assets/stylesheets/application.scss like R. Sierra said.

    Now your app should be good to go!

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search