CODEWITHSUNDEEP
ruby-on-rails-4twitter-bootstrap-3
MommaBear
MommaBear

Reputation: 15

How do I use bootstrap for my rails application?

I just deployed my first rails application following the RailsBridge tutorial. I also followed the tutorial on how to add bootstrap to the application, but I am stuck because it asks you to use the TOUCH command, and I am running Windows which doesn't have a touch command equivalent. The instructions are as follows:

Type the following into the command: 

touch app/assets/stylesheets/bootstrap_and_overrides.css.scss

Then, it tells you to open the file it created and type in the following:

@import "bootstrap";
body { padding-top: 60px; }
@import "bootstrap-responsive";

I just created the file manually from an empty text file, and then followed the remainder of the instructions. Here is a link to the instructions if you are curious: http://docs.railsbridgecapetown.org/intro-to-rails/add_bootstrap I got the following error:

Showing C:/Sites/railsbridgejan/suggestotron/app/views/layouts/application.html.erb where line #7 raised: couldn't find file 'bootstrap'(in C:/Sites/railsbridgejan/suggestotron/app/assets/stylesheets/application.css:15)

Here is what line #7 says

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

Also, I was not sure which Bootstrap to download, so I just downloaded all three of them. Do I have to move these files to a specific place? In the tutorial it had get the gem 'bootstrap-sass'.

Edit
Omar's solution worked, but I think I am having another problem due to not having node.js installed. Here is my new error:

Showing C:/Sites/railsbridgejan/suggestotron/app/views/layouts/application.html.erb where line #7 raised:

Invalid CSS after "...trap-sprockets"": expected selector or at-rule, was "@import "bootst..." (in C:/Sites/railsbridgejan/suggestotron/app/assets/stylesheets/application.scss:21) Extracted source (around line #0):

Upvotes: 1

Views: 2652

Answers (2)

Recomer
Recomer

Reputation: 191

I recently encountered this problem solved it by trying to following instructions :

1-Create a new file in your /assets/stylesheets and give the name custom.css.sass

2-Add this part to top of your custom.css.sass file

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

3-Save it

You're good to go.

The problem was in my custom.css.scss file's extension. It was wrong to use scss and when I changed it to sass it all solved.

Good Luck!

Upvotes: 0

Omar Sar
Omar Sar

Reputation: 138

Hi I will try to share what I have on my current rails application on Windows:

First of all, I am not sure why you had to use that TOUCH command I don't remember using it in my app. I will try to show you what some of my important file contain, so you can guide yourself and try to find a way to solve this.

  #Gemfile
    gem 'bootstrap-sass', '~> 3.3.1.0'



    #app/stylesheets/application.css.scss
    /*
 * 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 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 'masonry/transitions'
 *= require 'masonry/infinitescroll'
 *= require_tree .
 *= require social-share-button
 *= require jquery.tagsinput
 *= require jquery.minicolors
 *= require font-awesome
 *= require_self
 */


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

    #.../layout/application.html.haml
    #this goes right below %head
    = stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true
    = javascript_include_tag 'application', 'data-turbolinks-track' => true

    #app/javascripts/application.js
    //= require bootstrap-sprockets

Upvotes: 2

Related Questions