Overriding bootstrap with a custom.css.scss?

Question

I am creating a Ruby on Rails application and I am doing a bit of styling for my project.

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.

I have a landing page:

<div class="container-full">
<div class="row">
    <div class="col-lg-12 text-center v-center">
         <h1>Hello Landing</h1>

        <p class="lead">A sign-up page example for Bootstrap 3</p>
        <br>
        <br>
        <br>
        <div class="input-group" style="width:340px;text-align:center;margin:0 auto;">
            <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"> <span class="input-group-btn btn-default"><button class="btn btn-lg btn-primary" type="button">OK</button></span>

        </div>
    </div>
</div>
<!-- /row -->
<div class="row">
    <div class="col-lg-12 text-center v-center" style="font-size:39pt;"> <a href="#"><i class="glyphicon glyphicon-google-plus"></i></a>  <a href="#"><i class="glyphicon glyphicon-facebook"></i></a> 
        <a
        href="#"><i class="glyphicon glyphicon-twitter"></i>
            </a> <a href="#"><i class="glyphicon glyphicon-github"></i></a>  <a href="#"><i class="glyphicon glyphicon-pinterest"></i></a>

    </div>
</div>
<br>
<br>
<br>
<br>
<br>

I have a custom CSS page:

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%;
}

My application.css looks like this:

/*
 * 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

Answer 1

bootstrap-rails has been deprecated, use bootstrap-sass instead.

Gemfile:

gem 'sass-rails', '>= 3.2' # sass-rails needs to be higher than 3.2
gem 'bootstrap-sass', '~> 3.1.1'

Once you install the gem, make sure to restart your app/webserver.

Then rename your app/assets/stylesheets/application.css file to app/assets/stylesheets/application.css.scss and add the following:

@import "bootstrap";

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%;
}

Answer 2

Copy your custom CSS file under app/assets/stylesheets, and you should declare your bootstrap files in your application.css, and thus adding the following after *= require_tree .

*= require bootstrap
*= require bootstrap_responsive

Your custom CSS should prevail and there shouldn't be any collision.

Answer 3

Search for the template file where the bootstrap CSS is included, and add you own CSS link under that. If it is still not working, try adding !important to your styles.