title: Overriding bootstrap with a custom.css.scss?
body: <p>I am creating a Ruby on Rails application and I am doing a bit of styling for my project.</p>
  
  <p>I am using the Bootstrap gem v3.0.0, but I dont know where to add my custom CSS file in my Rails project and where to call it.</p>
  
  <p>I have a landing page:</p>
  
  <pre><code>&lt;div class="container-full"&gt;
  &lt;div class="row"&gt;
      &lt;div class="col-lg-12 text-center v-center"&gt;
           &lt;h1&gt;Hello Landing&lt;/h1&gt;
  
          &lt;p class="lead"&gt;A sign-up page example for Bootstrap 3&lt;/p&gt;
          &lt;br&gt;
          &lt;br&gt;
          &lt;br&gt;
          &lt;div class="input-group" style="width:340px;text-align:center;margin:0 auto;"&gt;
              &lt;input class="form-control input-lg" title="Don't worry. We hate spam, and will not share your email with anyone."
              placeholder="Enter your email address" type="text"&gt; &lt;span class="input-group-btn btn-default"&gt;&lt;button class="btn btn-lg btn-primary" type="button"&gt;OK&lt;/button&gt;&lt;/span&gt;
  
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;!-- /row --&gt;
  &lt;div class="row"&gt;
      &lt;div class="col-lg-12 text-center v-center" style="font-size:39pt;"&gt; &lt;a href="#"&gt;&lt;i class="glyphicon glyphicon-google-plus"&gt;&lt;/i&gt;&lt;/a&gt;  &lt;a href="#"&gt;&lt;i class="glyphicon glyphicon-facebook"&gt;&lt;/i&gt;&lt;/a&gt; 
          &lt;a
          href="#"&gt;&lt;i class="glyphicon glyphicon-twitter"&gt;&lt;/i&gt;
              &lt;/a&gt; &lt;a href="#"&gt;&lt;i class="glyphicon glyphicon-github"&gt;&lt;/i&gt;&lt;/a&gt;  &lt;a href="#"&gt;&lt;i class="glyphicon glyphicon-pinterest"&gt;&lt;/i&gt;&lt;/a&gt;
  
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;br&gt;
  &lt;br&gt;
  &lt;br&gt;
  &lt;br&gt;
  &lt;br&gt;
  </code></pre>
  
  <p>I have a custom CSS page:</p>
  
  <pre><code>html,body {
    height:100%;
  }
  
  h1 {
    font-family: Arial,sans-serif
    font-size:80px;
    color:#DDCCEE;
  }
  
  .lead {
      color:#DDCCEE;
  }
  
  
  /* Custom container */
  .container-full {
    margin: 0 auto;
    width: 100%;
    min-height:100%;
    background-color:#110022;
    color:#eee;
    overflow:hidden;
  }
  
  .container-full a {
    color:#efefef;
    text-decoration:none;
  }
  
  .v-center {
    margin-top:7%;
  }
  </code></pre>
  
  <p>My application.css looks like this:</p>
  
  <pre><code>/*
   * 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_tree .
   */
  group :assets do
    gem 'bootstrap-rails'
  end
  </code></pre>