How do I use the Bootstrap stylesheet from Twitter with my existing stylesheet in Rails without messing up everything?

Question

So I included the URL to the stylesheet in my Rails app, but it throws everything into haywire.

I included it like this:

<%= stylesheet_link_tag('http://twitter.github.com/bootstrap/1.4.0/bootstrap.min.css', 'style', 'css3buttons', 'jquery.lightbox-0.5', :media => 'all') %>

What I want to do, is to just have the Twitter styles applied when I apply the class to the html tag. Ideally, what I would like to do is have it even override the styles in my 'style' sheet - which is the stylesheet for my entire app.

Is it possible to do this in an easy way, without having to modify the style for every single element I want to work with?

Answer 1

Look at http://twitter.github.com/bootstrap/1.4.0/bootstrap.css, you'll notice it defines resets and styles on root html elements.

For example:

h1 {
  margin-bottom: 18px;
  font-size: 30px;
  line-height: 36px;
}

So, if your style.css already defines a style for h1 or if your layout expects the h1 to have a different margin, your layout is not going to look as expected.

Twitter bootstrap is generally for when you start a project and not something you can completely plug into an existing project's stylesheets without any problems.

An alternative is to use their LESS stylesheets if you want to include, for example, just the forms and table styles. (using Bootstrap with Less).

<link rel="stylesheet/less" type="text/css" href="lib/tables.less">
<link rel="stylesheet/less" type="text/css" href="lib/forms.less">
<script src="less.js" type="text/javascript"></script>

You're not going to want to use lib/boostrap.less since includes everything, but you can include the other LESS stylesheets that work for you. Be warned, just including a subset of the twitter boostrap, may not work as expected, especially if you don't have css resets defined. If that doesn't work for you, look into using Preboot.less instead. Note: Rails 3.1 supports LESS compilation

If you still want to use the complete twitter bootstrap css in your application, you can create a new rails layout template that uses the twitter bootstrap. Then, build your new pages with the twitter boostrap, specify render :layout => "boostrap" or something similar to have your new pages use the twitter bootstrap layout. Then, when you're ready, you can migrate your old pages to the new layout template.