Flash Messages & Twitter’s Bootstrap CSS Framework

I’m using Twitter’s Bootstrap CSS framework and it’s pretty nice.  One of the cool bundled features of the framework is that they provide classes for displaying what rails hackers know as Flash messages.  The problem here is that Twitter has named them different from what Rails people traditionally use so you cannot just drop in Bootstrap and expect your flash messages to appear properly.

I did NOT want to modify the original bootstrap css and tack on extra classes so I got around this with an application helper method that does some translating for me.

Here is the code:

 

19 thoughts on “Flash Messages & Twitter’s Bootstrap CSS Framework”

  1. Thanks for this — I grabbed the code and it’s working perfectly.

    I really appreciate you making this available. Very nice!

    I’m redoing the views in devise to use bootstrap styling and this fits right in.

  2. Alex thank you for posting this gist!!

    I used `case` because it made sense but i really hate the way it looks. The hash you created looks so much better but that 8x slower performance… i don’t think it’s worth it.

    If you come back, i’d like to know what you ultimately decided to go with.

  3. Should this work for error messages? Here is the method to override in devise_helper.rb.

    I suppose that one could override the controller to set the flash and not call this method in the form.

    module DeviseHelper
    # A simple way to show error messages for the current devise resource. If you need
    # to customize this method, you can either overwrite it in your application helpers or
    # copy the views to your application.
    #
    # This method is intended to stay simple and it is unlikely that we are going to change
    # it to add more behavior or options.
    def devise_error_messages!
    return “” if resource.errors.empty?

    messages = resource.errors.full_messages.map { |msg| content_tag(:li, msg) }.join
    sentence = I18n.t(“errors.messages.not_saved”,
    :count => resource.errors.count,
    :resource => resource.class.model_name.human.downcase)

    html = <<-HTML

    #{sentence}
    #{messages}

    HTML

    html.html_safe
    end
    end

  4. I used about the same setup, but removed the error and success statements as they’ll fall through to the default behavior.

    1. Yeah that’s probably a good call.  While what i have is a redundant, i like the fact that I mirror the exact set of classes Bootstrap — it gives me a bit of clarity for some reason.

  5. Nice flash message partial!

    Given you twitterized_type method always returns a string representation of the input, you could use `type.to_s` instead. This allows you remove the `twitterized_type` method all together.

  6. I do not have a Shared folder, and put the folder _flash aplicatio and did render (: partial => “layouts / flash_messages”,: locals => {: flash => flash}), but it did not work, why … . help me, please

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>