getting application.css to override bootstrap

Question

I'm trying to customise my rails app navbar and have added the css to application.css. I know that application.css is being correctly referenced, because the app is picking up other styling from it. But the navbar css is trying to override what is already in bootstrap.css, and the app is not recognising it...

application.html.erb (layout)

<%= stylesheet_link_tag "application", :media => "all" %>
    <%= javascript_include_tag "application" %>
    <%= analytics_init if Rails.env.production? %>
    <link href="../assets/bootstrap-responsive.css" rel="stylesheet">

application.css

body {
  padding-top: 20px;
  padding-bottom: 60px;
}

/* Custom container */
.container {
  margin: 0 auto;
  max-width: 1000px;
}
.container > hr {
  margin: 0px 0;
}

/* Main marketing message and sign up button */
.jumbotron {
  margin: 20px 0;
  text-align: center;
}
.jumbotron h1 {
  font-size: 100px;
  line-height: 1;
}
.jumbotron .lead {
  font-size: 24px;
  line-height: 1.25;
}
.jumbotron .btn {
  font-size: 21px;
  padding: 14px 24px;
}

/* Supporting marketing content */
.marketing {
  margin: 60px 0;
}
.marketing p + h4 {
  margin-top: 28px;
}


/* Customize the navbar links to be fill the entire space of the .navbar */
.navbar .navbar-inner {
  padding: 0;
}
.navbar .nav {
  margin: 0;
  display: table;
  width: 100%;
}
.navbar .nav li {
  display: table-cell;
  width: 1%;
  float: none;
}
.navbar .nav li a {
  font-weight: bold;
  text-align: center;
  border-left: 1px solid rgba(255,255,255,.75);
  border-right: 1px solid rgba(0,0,0,.1);
}
.navbar .nav li:first-child a {
  border-left: 0;
  border-radius: 3px 0 0 3px;
}
.navbar .nav li:last-child a {
  border-right: 0;
  border-radius: 0 3px 3px 0;
}

Am I missing out something?

Where is bootstrap.css? And what is the app not recognising, bootstrap style or your style? — Pigueiras, May 08 '13 at 10:01
both application.css and bootstrap.css are in assets/stylsheets. It is not recognising my style (application.css) — tessad, May 08 '13 at 10:03
Do you have a directive `require bootstrap` in your application.css? If not, maybe the order that the css is being generated could be in a correct order, if you rely on `require_tree .`. — Pigueiras, May 08 '13 at 10:20
thanks, it must be something about the order. If I add require bootstrap in application.css - nothing changes unfortunately — tessad, May 08 '13 at 10:27
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/29592/discussion-between-pigueiras-and-tessad) — Pigueiras, May 08 '13 at 10:54

score 20 · Accepted Answer · answered May 08 '13 at 11:04

Try to let your application.css just for 'require' purposes, it will pave your way to track errors as well as take advantage of Rails3 assets pipeline stack.

In your app/assets/stylesheets/application.css:

/*
 * 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 bootstrap
 *= require bootstrap_responsive
 *= require my_styles
 */

In your app/assets/stylesheets/my_styles.css put the custom css that you have now in application.css.

That way your custom styles will be loaded after all the bootstrap stuff, overriding it.

To be honest I think that this is what is happening to you right now: it is not bootstrap.css what is overriding your styles, it is bootstrap_responsive as it is loaded after your styles.

score 2 · Answer 2 · answered May 08 '13 at 11:08

2

When you want to override bootstrap with your own style, then your application.css must be loaded after bootstrap definition.

answered May 08 '13 at 11:08

Hexodus

12,361
6
53
72

score 1 · Answer 3 · answered May 08 '13 at 11:08

You need to load bootstrap.css and bootstrap-responsive.css and then override your styles. One way is to define a new bootstrap_and_overrides.css.scss like so:

@import "bootstrap";
@import "bootstrap-responsive";

.well {
  box-shadow: 0 0 4px #888888;
  border-radius: 0px 0px 0px 0px;
}
// more overrrides

Then include this file before you include application.css in your rails layout.

getting application.css to override bootstrap

3 Answers3

Linked