1

I have a simple ROR project and I want to use Bootstrap-sass. I've added it to my Gemfile, run bundle install and have added "@import "bootstrap";" as the very first line of my css file. As a quick test, I've cut and pasted an example of a couple of buttons with various styles.

They show up on the webpage as a couple of plain buttons.

How can I tell if bootstrap is actually getting loaded?

Update: Looking at the error console of the browser, I see the following message: 'The stylesheet localhost:3000/assets/bootstrap was not loaded because its MIME type, "application/javascript", is not "text/css"'

Any thoughts?

Thanks,

1
  • I think I have solved this. If I change the @import statement in my css file to "@import bootstrap.css" instead of "@import bootstrap", it seems to work. Of course, this contravenes everything I've read about installing bootstrap...
    – Per
    Jan 23, 2013 at 4:14

3 Answers 3

2

I solved problem by renaming application.css to application.scss

First I think I did that, but apparently I didn't save the renamed file name.

0

To start you can check your browser console's NET panel. It should show a request for 'bootstrap.css'. It sure sounds like it's not being pulled in. This would be the first step in confirming.

5
  • Started GET "/assets/application.js?body=1" for 127.0.0.1 at 2013-01-22 17:55:32 -0800 Served asset /application.js - 200 OK (0ms) Started GET "/assets/jquery_ujs.js?body=1" for 127.0.0.1 at 2013-01-22 17:55:32 -0800 Served asset /jquery_ujs.js - 304 Not Modified (0ms) Started GET "/assets/bootstrap" for 127.0.0.1 at 2013-01-22 17:55:32 -0800 Served asset /bootstrap - 304 Not Modified (1ms) Started GET "/assets/logo.png" for 127.0.0.1 at 2013-01-22 17:55:32 -0800 Served asset /logo.png - 200 OK (0ms)
    – Per
    Jan 23, 2013 at 1:59
  • Can you post an html snippet?
    – rtcarlson
    Jan 23, 2013 at 2:03
  • <button class="btn dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button> <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button> <button class="btn btn-danger dropdown-toggle" data-toggle="dropdown">Danger <span class="caret"></span></button> <button class="btn btn-warning dropdown-toggle" data-toggle="dropdown">Warning <span class="caret"></span></button> <button class="btn btn-success dropdown-toggle" data-toggle="dropdown">Success <span class="caret"></span></button>
    – Per
    Jan 23, 2013 at 2:07
  • sorry about the lack of formatting. There's supposed to be a couple of button pulldowns. Here's the URL I copied the example from: adobe.com/devnet/html5/articles/twitter-bootstrap.html
    – Per
    Jan 23, 2013 at 2:08
  • Mozilla console offers a clue? The stylesheet loalhost:3000/assets/bootstrap was not loaded because its MIME type, "application/javascript" is not "text/css".
    – Per
    Jan 23, 2013 at 2:16
0

I remember the first time I worked with bootstrap it didn't work. It was because I didn't point the document root to the right place. Of course I usually check the document root because it a reoccurring problem for me, and now that I know I tend to make an error there I start there. I will say that taking time to look at the type of mistakes I make frequently has helped my growth.

Your Answer

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.