How to use Twitter Bootstrap stylesheet with my existing stylesheet in Rails without messing everything up?

Question

So I included the stylesheet url in my Rails application, but it throws everything on 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 just apply Twitter styles when I apply the class to the html tag. Ideally, I would like him to even override the styles in my “style” sheet, which is the stylesheet for my entire application.

Is it possible to do this in a simple way without changing the style for each element that I want to work with?

Answer 1

Take a look at http://twitter.github.com/bootstrap/1.4.0/bootstrap.css , you will notice that it defines dumps and styles in the html root elements.

For instance:

 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 h1 to have a different marker, your layout will not look as expected.

The Twitter boot file is usually used when starting a project, not that you can fully connect to existing project style sheets without any problems.

An alternative is to use their LESS stylesheets if you want to include, for example, only 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 won't want to use lib/boostrap.less as it includes everything, but you can include other LESS stylesheets that work for you. Be careful just turning on a subset of twitter boostrap may not work as expected, especially if you don't have css dumps set. If this does not work for you, use Preboot.less instead . Note: Rails 3.1 supports LESS compilation.

If you still want to use the full bootstrap css tweeter in your application, you can create a new rail layout template that uses boot twitter. Then create new pages using twitter boostrap, specify render :layout => "boostrap" or something similar, so that your new pages use the twitter boot buffer layout. Then, when you are ready, you can transfer the old pages to the new layout template.

Answer 2

I think you need to change the css loading order.

in your case, to override the application stylesheet using bootstrap

download the application stylesheet first and then bootstrap.css

  <%= stylesheet_link_tag :default %> 

and then

  <%= stylesheet_link_tag ('http://twitter.github.com/bootstrap/1.4.0/bootstrap.min.css', :media => 'all') %> 

Answer 3

You can simply configure the boot using the jitter github setup tool Configure the boot file

Select only the items you have selected and download the customized version.

I also looked for something like that for a long time, Now I have done and really helped.

Answer 4

For this purpose you can use less or sass mixins, boostrap provides some nice ones.

For instance:

 <!- our new, semanticized HTML --> <article> <section class="main">...</section> <aside></aside> </article> <!-- its accompanying Less stylesheet --> article { .makeRow(); section.main { .makeColumn(10); } aside { .makeColumn(2); } } 

See http://ruby.bvision.com/blog/please-stop-embedding-bootstrap-classes-in-your-html and http://www.sitepoint.com/5-useful-sass-mixins-bootstrap for details / as well as https://github.com/twbs/bootstrap-sass/tree/master/assets/stylesheets/bootstrap/mixins