ruby on rails - 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?

Answer 1

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.