Skip to content

Instantly share code, notes, and snippets.

@roberto
Created August 13, 2012 22:47
Show Gist options
  • Save roberto/3344628 to your computer and use it in GitHub Desktop.
Save roberto/3344628 to your computer and use it in GitHub Desktop.
Rails flash messages using Twitter Bootstrap
<% flash.each do |type, message| %>
<div class="alert <%= bootstrap_class_for(type) %> fade in">
<button class="close" data-dismiss="alert">×</button>
<%= message %>
</div>
<% end %>
<%= render partial: "shared/flash_messages", flash: flash %>
module ApplicationHelper
def bootstrap_class_for flash_type
case flash_type
when :success
"alert-success"
when :error
"alert-error"
when :alert
"alert-block"
when :notice
"alert-info"
else
flash_type.to_s
end
end
end
@icem
Copy link

icem commented Jun 14, 2013

Why not just using Hash for #bootstrap_class_for ?

{success: 'alert-success',...}[flash_type] || flash_type.to_s

@the-teacher
Copy link

@icem +1

@RaceFPV
Copy link

RaceFPV commented Oct 2, 2013

this worked well, thanks!

@jessewaites
Copy link

Which version of Bootstrap is this for? I installed it on BS3 and it won't clear when the "X" is clicked.

@fertobar
Copy link

Hi, I think there is an issue with Rails 4. May be caused for Turbolinks use?

@SteveVallay
Copy link

Nice , it worked for me Rails 4. Thanks

@saikiranmothe
Copy link

Great ! It worked with rails4.

@saikiranmothe
Copy link

Great ! It worked with rails4.

@suryart
Copy link

suryart commented Nov 11, 2013

Nice one, I've created another version of this here: https://gist.github.com/suryart/7418454

@omarzina
Copy link

Great, fixed some problems with flash messages in ruby.railstutorial.org (with Rails 4 and las bootstrap). Thank you.

@JoshTGreenwood
Copy link

If you are using Bootstrap 3, the class names have been changed. Here is the new mapping:

module ApplicationHelper

  def bootstrap_class_for flash_type
    case flash_type
      when :success
        "alert-success" # Green
      when :error
        "alert-danger" # Red
      when :alert
        "alert-warning" # Yellow
      when :notice
        "alert-info" # Blue
      else
        flash_type.to_s
    end
  end

end

@iloveip
Copy link

iloveip commented Feb 13, 2014

In file _messages.html.erb you can simply put

<% flash.each do |type, message| %>
  <div class="alert <%= bootstrap_class_for(type) %> alert-dismissable fade in">
    <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
    <%= message %>
  </div>
<% end %>

@annieogrady
Copy link

does this work with GEM --- https://github.com/seyhunak/twitter-bootstrap-rails . I can't get success error message to show. any ideas?

@annieogrady
Copy link

RE: success message not working.... what is strange is the other 3 do work.

@annieogrady
Copy link

FYI - to get this to work, i also needed to add: add_flash_types :success, :info, :warning, :danger
to the applications controller.

@clarkbw
Copy link

clarkbw commented Apr 22, 2014

As of 4.1 this code needs to be updated due to the :symbol to String change in flash messages.

  def bootstrap_class_for(flash_type)
    case flash_type
      when "success"
        "alert-success"   # Green
      when "error"
        "alert-danger"    # Red
      when "alert"
        "alert-warning"   # Yellow
      when "notice"
        "alert-info"      # Blue
      else
        flash_type.to_s
    end
  end

@seoyoochan
Copy link

👍 @clarkbw, Thanks!! My flash helper method finally got working, because it did not work by :symbol to String issue.

@orafaelfragoso
Copy link

  def alert_class_for(flash_type)
    {
      :success => 'alert-success',
      :error => 'alert-danger',
      :alert => 'alert-warning',
      :notice => 'alert-info'
    }[flash_type.to_sym] || flash_type.to_s
  end

@danwagnerco
Copy link

Thanks for the great tip @annieogrady, that worked!

@manojlds
Copy link

For Bootstrap 3:

<% flash.each do |type, message| %>
  <div class="alert <%= alert_class_for(type) %> alert-dismissible fade in">
    <button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
    <%= message %>
  </div>
<% end %>

Copy link

ghost commented Sep 6, 2014

Thanks! This worked great for my Rails 4 app.

@eduardopoleo
Copy link

@icem +1, @JoshTGreenwood +1, @rafaelfragosom +1

@daneelliotthamilton
Copy link

The code with the correct message shows up in the source but does not display on the screen.

@Yorkshireman
Copy link

Rails 4.1 my partial is always rendering with classes 'alert alert'. My testimonials_controller:
def update
respond_to do |format|
if @testimonial.update(testimonial_params)
format.html { redirect_to @Testimonial, success: 'Testimonial was successfully updated.' }
format.json { render :show, status: :ok, location: @Testimonial }
else
format.html { render :edit }
format.json { render json: @testimonial.errors, status: :unprocessable_entity }
end
end
end

Everything works fine with :alert, but not with any of the other names. The symbol doesn't seem to be getting recognised by the helper method.

@elliotwesoff
Copy link

fantastic, thank you!

@benbristow
Copy link

def bootstrap_class_for flash_type
    case flash_type
      when "success"
        "alert-success"
      when "error"
        "alert-danger"
      when "alert"
        "alert-warning"
      when "notice"
        "alert-info"
      else
        flash_type.to_s
    end
  end

This works better in Bootstrap 3 IMHO.

@equivalent
Copy link

for those that just need 2 colours for simplicity flash[:notice] and flash[:error] :

app/views/layouts/_flash_messages.html.haml Haml template

- flash.each do |name, msg|
  %div{:class => "alert alert-#{name.to_s == 'notice' ? "success" : "warning"}"}
    %a.close{"data-dismiss" => "alert"} ×
    %div{:id => "flash_#{name}"}= msg
module FlashHelper
  def flash_messages
    render partial: "layouts/flash_messages", flash: flash
  end
end

@vesh95
Copy link

vesh95 commented Jun 17, 2018

Easy!
<% flash.each do |name, message| %> <p class="alert alert-<%= name %> fade-in"><%= message %></p> <% end %>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment