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

bhaberer · Accepted Answer · 2014-03-05 00:25:06Z

2

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

answered Mar 5, 2014 at 0:25

bhaberer

354 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

the Tin Man · Accepted Answer · 2014-03-04 22:27:15Z

0

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.

edited Mar 4, 2014 at 22:27

the Tin Man

161k44 gold badges222 silver badges308 bronze badges

answered Mar 4, 2014 at 21:20

sidney

2,7243 gold badges31 silver badges45 bronze badges

Comments

the Tin Man · Accepted Answer · 2014-03-04 22:28:05Z

0

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.

edited Mar 4, 2014 at 22:28

the Tin Man

161k44 gold badges222 silver badges308 bronze badges

answered Mar 4, 2014 at 21:02

jurjen

739 bronze badges

Collectives™ on Stack Overflow

Overriding bootstrap with a custom.css.scss?

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related