Skip to content

@roberto /_flash_messages.html.erb
Created

Embed URL

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
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

Why not just using Hash for #bootstrap_class_for ?

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

this worked well, thanks!

@piratebroadcast

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

@fertobar

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

@SteveVallay

Nice , it worked for me Rails 4. Thanks

@saikiranmothe

Great ! It worked with rails4.

@saikiranmothe

Great ! It worked with rails4.

@suryart

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

@omarzina

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

@JoshTGreenwood

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

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

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

@annieogrady

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

@annieogrady

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

@clarkbw

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

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

@rafaelfragosom
  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

Thanks for the great tip @annieogrady, that worked!

@manojlds

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 %>
@kcny

Thanks! This worked great for my Rails 4 app.

@daneelliotthamilton

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

@Yorkshireman

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

fantastic, thank you!

@benbristow
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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.