Rails Active Admin css conflicting with Twitter Bootstrap css

I had the same problem, and was able to fix it by moving

app/assets/stylesheets/active_admin.css.scss

to

vendor/assets/stylesheets/active_admin.css.scss

The active admin assets should be in vendor/ as mentioned in the rails guide:

"Vendor/assets is for assets that are owned by outside entities, such as code for JavaScript plugins and CSS frameworks."


Have you watched the RailsCasts video on using ActiveAdmin? In the video, Ryan shows you how to prevent the ActiveAdmin CSS from stepping on your main app CSS.

http://railscasts.com/episodes/284-active-admin

Moving info from Video into answer

In the application.css you remove:

*= require_tree .

For rails 4, Jiten K suggests adding this to production.rb:

config.assets.precompile += ['active_admin.css']

However one of the comments on that SO answer says this is not needed. I have not needed it so far.


For me changing application.css to following solves the problem:

 *= require bootstrap
 *= require_tree .
 *= stub "active_admin"