CODEWITHSUNDEEP
cssruby-on-railstwitter-bootstrap
tessad
tessad

Reputation: 1229

getting application.css to override bootstrap

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?

Upvotes: 10

Views: 17036

Answers (3)

Hexodus
Hexodus

Reputation: 12965

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

Upvotes: 2

pungoyal
pungoyal

Reputation: 1798

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.

Upvotes: 1

Galen
Galen

Reputation: 947

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.

Upvotes: 20

Related Questions