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:

 

  • Scott

    Nice!

  • http://zigzo.com/ admin

    Thanks Scott! If you do something similar but different i’d love to see your implementation.

  • http://www.kbedell.com Kevin Bedell

    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.

  • http://zigzo.com/ admin

    No problem Kevin! I’m glad it could help.

    PS. Nice site — i’ve been browsing it for about 10 minutes.

  • http://alexbcoles.com/ Alex Coles

    Great! I’ve needed to do exactly the same thing.

    I find using a Hash, rather than a case statement, slightly more elegant (but it does come with a performance-penalty – coming in around 8x slower in this simple benchmark: https://gist.github.com/96ef75f481008a139f8f).

  • http://zigzo.com/ admin

    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.

  • Ankur

    Thanks for this. I tried the hash but it is not that slow if you only define it once.

    https://gist.github.com/02c8f8ca0cd4c9d9ceb2

    Anyway I am just using the function as is since it is faster.

  • Ankur

    What is the easy way to get these to fade out?

  • Ankur

    I am going to add a ‘hide’ to the class and use this:

    http://stackoverflow.com/questions/4801561/flash-message-fade-effect-in-rails

  • http://zigzo.com/ admin

    Very nice.

  • Justin

    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

  • Travis

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

    • Anonymous

      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.

  • http://www.thejspr.com Jesper Kjeldgaard

    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.

  • http://taylorbrooks.org/ Taylor Brooks

    This was super helpful. Although the class names are outdated for Bootstrap v.2.

    Here is a link for what the updated helper method should look like:
    https://gist.github.com/3107549

    • Admin

      Thanks a lot! i have updated the post!

  • http://fernandoguillen.info Fernando Guillen

    nice!

  • Carlos Amorim

    Not Worked, why?

  • Carlos Amorim

    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