Twitter bootstrap usage instead #1027

akashkamboj opened this Issue Feb 16, 2012 · 128 comments

It would be so great if you use Twitter Bootstrap instead. There are a few issues that are coming when working with IE i.e. IE8 or below doesn't show Topbar Dropdown Menu. And if you use Twitter bootstrap instead these problems will be gone as well as we will get some extra features to customize the look and feel using the javascripts that bootstrap offers.

I think I can give you extra hands if you want to achieve this.

UPDATE: I want to start on this. Can you suggest shall i create styles according to current Arbre layouts? or do I modify the Arbre layouts according to Bootstrap?


Yeah, I've got to add my vote here too. I think this would be really useful, and would make it easier to get consistency for the front-end and back-end interfaces.


In my opinion the main thing is to get the classes added to the various elements so that they will inherit the Bootstrap styling when the CSS is included. I think changing the layout is a secondary issue, and I'm quite fond of the ActiveAdmin layout. Obviously using the Bootstrap grid would be a benefit, as would use of its support for responsive layout, but it's secondary to getting the look of the UI consistent.


A vote for this from me too.

The simple_form gem just added native support for bootstrap2:

I use it with Bootstrap sass and am pretty happy with the results:


Hey guys,

We're definitely considering this but we don't have plans to do this right now.

@mattvague mattvague closed this Feb 22, 2012

akashkamboj, if you feel like getting this started in a fork Ben and I will try to help out. Then we can try to get this accepted with a Pull Request.


Yes simon it would be great if we can do it together. Though I have a concern that whether we change arbre layouts to achieve bootstrap styling or create new styles according to arbre layouts. I feel that we should change arbre layouts but I am not sure whether active_admin team will approve it or not. Please do suggest.


I agree that's the first question, and I'm happy to help, although my experience with ActiveAdmin and Abre is minimal. I might defer to Ben on that question, as he's used simple_form for Bootstrap support. As I understand it, it's mostly a case of adding the required classes into the markup so that the Bootstrap CSS is applied to the forms.


I hope bootstrap is going to be added to active admin, i love AA but I thinks it needs some fixes, and bootstrap could help a lot in the client side dev, hope it is still being considered.


I'm voting for this as well, AA is a great engine for database administration, but I really like some of the layout features included with twitter bootstrap...


with bootstrap the administration system could be viewed from a smartphone or tablet because bootstrap includes responsive design in its feautures


Got my vote.!




+1 :)


+1 with the caveat that bootstrap should be considered a dependency, and not bundled with active admin, allowing developers to choose the bootstrap version for the needs of the site proper first.


Would also make ActiveAdmin more seamless;y integrate into the existing layout/frame of a site built on Bootstrap, which is what I'm hoping to end up with. If someone is working on this, I'd love to hear about and follow it.


+1 has anybody started to work on this?


+1, it'll be cool =)


+1, bootstrap looks nice, has well structured code logic and is largely known... I cant see a better approach for next AA version


+1. This makes it significantly easier to have the admin interface blend seamlessly with non-admin pages.


Anyone willing to do it? :)


+1 from me and willing to help.


+1. This would be really great!


Breaking news! @gregbell is working on it. :)

@pcreux pcreux reopened this Sep 18, 2012
@gregbell gregbell was assigned Sep 18, 2012

👍 ™ thanks @pcreux for your news. Can I Help you guys? hope I can. But this moment, still hijack this like a monkey-patch :(


+1. Anxious!


That would be a huge change to activeadmin, a very interesting one. 👍

The only issue I see, there are 2 Twitter-bootstrap implementations for rails. Either should work and should not interfere too much.

I personally use both on different projects

  1. (using less) has more rails helpers.
  2. (using sass) currently on latest 2.2.1, I find this more stable.

What are you guys thoughts? which one do you use and prefer?


I've been using so far. I did check out twitter-bootstrap-rails a while back, but don't recall exactly what made up my mind.

An ideal solution for activeadmin would be something along the lines of the SimpleForm wrappers API, which would allow for a good degree of DOM customization (and therefore css/js swapping).

I imagine a (somewhat) smaller first step would be to render DOM that matches a recent version of bootstrap, but does not in fact load bootstrap itself. That could, more or less, mean that it really wouldn't matter what Rails engine or CSS preprocessor was used.


Is there any updates on this issue? We're working on some AA generic extensions and I wonder how soon Bootstrap version is out for testing?


+1. would be great to bring some light into that. thanks!


+1, would be great!


+1 (and +3 teammates)


@doabit It's true... the next version of Active Admin will use to Bootstrap. I expect us to have a formal pull request in the next couple of weeks.

We're currently working on re-building the default Active Admin theme on top of Bootstrap. Thanks to @macovsky for a lot of the grunt work!


awesome news! :-) 👍


Very much looking forward to this! :metal:






Great news! 👍




after trying Zurb Foundation im sold... I find it much better than boostrap
check out foundation... it's quite awesome, it's light and works great with Tablets and Mobiles devices, specially Android.
I've been pulling my hair to get bootstrap dropdowns and modals to work on android. besides it's slow.
Foundation works beautifully on android its more CSS based

test this on android
then test this
which one works best?


Good news +1


I don't give a shart if its bootstrap, I just want it to be responsive since the world is growing to expect it.
I was rather shocked today when I visited the gorgeous demo on my mobile device and it didn't budge.


+1 Have some issues because our client uses IE 8 (Buttons look strange an some more...)


+1 !


@gregbell any news on this?
Starting a new project and thinking to use bootstrap version of activeadmin :-)


+1 . Really looking forward for this


I'm going to be helping @gregbell out with the bootstrap migration, the branch mentioned above will be revived shortly to get development going on this again.


+1 Would be awesome!


+1 👍


+1 Absolutely!


Curious what the status of this ticket is?




It came to my notice that AA will target this issue in 0.8.0. So I guess there are a few weeks / months time for this. They will target Rails 4 first which is 0.7.0


so AA-bootstrap will require Rails 4 upgrade 😕


No, won't require Rails 4 - we will be adding support for Rails 4, and dropping support for Rails 3.0 & Ruby 1.8 by the time you get bootstrap integration however.


@macfanatic got it, thanks for clarifying


+1 👍




Im curious if everyone is still as sold on this change, considering that it started a year ago when bootstrap was the only game in town. As mentioned earlier, it is, in some cases slow and it's grid system, IME is finicky. Plus the "bootstrap" look and feel is very intrusive, There was a time when it was fresh and new, but it hasn't evolved much at all.

There are many alternatives out there, I personally really like Zurb Foundation right now, Ive been using it in an ActiveAdmin project for months now and It was basically drag and drop. If this project decides to couple tightly with CSS Framework, I vote that it should be one that won't force everyone into using it.. Just my humble opinion


I decided That I should clarify a bit. When I introduced the foundation framework into my ActiveAdmin project there were, as I recall, 2 specific css class collisions that needed resolving before the Zurb grid system could really shine. They were fairly obvious collisions over the class selectors "row" and "column" I wont waist anymore space on this thread, but if anyone decides to give this a whirl, just shoot me a line and I'll save you an hour of tedium with my patch to those two classes.

Active Admin member

I would also tend to agree that Zurb Foundation is a better choice.

As far as the progress made so far towards Bootstrap, I don't know... it looks different, in a bad way. A lot of things I liked about the look & feel seem to have been lost in translation.


I haven't studied the Bootstrap branch, but presumably the presentation layer should be decoupled from the choice of CSS classes, such that someone can write a Zurb adapter in the future. Some gems like SimpleForm do a good job of this (albeit smaller in scope).


First, I think it would be foolish to throw away the work already put in to integrate Bootstrap. But I agree with @johnnyshields, the frontend CSS framework should be decoupled to provide developers an easy path to build additional adapters later.

If I had to choose one, I'd choose Bootstrap, but mainly because I don't have much experience with Zurb and because I'm sure more developers are familiar with Bootstrap than Zurb. Further reduces learning curve.


I agree whole heartedly with the point about decoupling. It's one of the few, very frustrating parts of customizing ActiveAdmin. I'm all for the Bootstrap integration because at the moment, that's what I'm really interested in, but looking forward, and considering users who may have other frameworks in mind (or want to roll their own structure/classes), a bridge of some sort sounds be very nice.

A simple_form bridge would be awesome too, to decouple formtastic and aa but that's an entirely different topic.


+1 about simple_form. Man, wasted so much time with formtastic because it doesn't provide the same level of features or flexibility. It was nothing but a hindrance when I tried to customise AA.

Active Admin member

Most of the Formtastic-specific code we have is to get the filter form to build correctly without you having to pass tons of arguments on every filter call. If a similar set of overrides can be created for Simple Form, it wouldn't be too difficult to let you choose which one you want your AA installation to use.

Then again, perhaps a better option is to remove the Formtastic dependency and build the filter form from the ground up off of Rails' Form Builder.


Simple Form is easy to customize and plays nicely with Bootstrap.


I agree about the decoupling but would like to see the bootstrap implementation continue. I just merged the 0.6.0 version into my switch-to-bootstrap branch to try to keep up a bit but can't wait for it to be fully implemented into AA.


you keep the design?
i would start on active-admin on unicorn-bootstrap, but i worry that we get some licensing problems since its a payed(15$) layout






+1 for Bootstrap and sounds wise to consider decoupling look-and-feel to accommodate other frameworks.




@gregbell @macfanatic can you please give a status update on this?


Yes please, status on this would be great !!




First of all, thanks for the great job with this framework.
I have been following this feature for a while, could you please give some estimation for this task to be done?
Thanks in advance



Active Admin member

To clear the air, the effort by @gregbell and @macfanatic stalled months ago. The code is still available, but I don't see a future for it. Someone would be welcome to pick it back up, but IMO there's more important work to be done on AA.

Active Admin member

If you would like to see this continued, your time or money would be greatly appreciated.


Has anybody started with BS implementation yet? If yes we would like to help you. If not me and my friends are going to implement it. Your Help Would Be Appreciated.


Nice job. I'll check it. Thx


First of all, thanks for your great job.
I have been working with active admin in several projects over the last two years, and I think bootstrap integration would be the best new feature to be added, nowadays the responsiveness is almost mandatory with some projects, and this feature is the last one really needed to make active admin fit in any kind of projects.
Thanks for your effort


It seems to be a hell of a work to make it use bootstrap ?!




+1, make it responsive, make it more flexible, ... that would be awesome


I've just started using ActiveAdmin and would love to be able to use Boostrap to make the admin area match the site more closely.


nah, just keep it as it is.
not everyone uses bootstrap, why make it more bloated?
keep it simple as possible is the best.


@fred Bootstrap is very easy to customize, there are many available themes, and designers are generally familiar with it. For anyone using ActiveAdmin to make basic portals for clients, using BS can reduce time to market to deliver a custom UI. In the end it's all about speed, speed, speed!




-1 Foundation is much better and less intrusive. AA having a distinctive look of it's own is a plus.







@isaiah isaiah referenced this issue in gentoo/ Jul 3, 2014

Mobile layout #64


👍 would definitely enjoy being able to put a different look on top of AA with either bootstrap or foundation.






Gonna toss my vote for this one as well.




+1 :)

With Bootstrap, AA could to receive plugins like bootstrap-wysihtml5 as many others Bootstrap based.





@seanlinsley seanlinsley locked and limited conversation to collaborators Nov 4, 2014
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.