Rails flash messages using Twitter Bootstrap

_flash_messages.html.erb

<% flash.each do |type, message| %>
  <div class="alert <%= bootstrap_class_for(type) %> fade in">
    <button class="close" data-dismiss="alert">×</button>
    <%= message %>
  </div>
<% end %>

application.html.erb

<%= render partial: "shared/flash_messages", flash: flash %> 

application_helper.rb

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

Why not just using Hash for #bootstrap_class_for ?

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

Why not just using Hash for #bootstrap_class_for ?

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

@icem +1

@icem +1

this worked well, thanks!

this worked well, thanks!

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

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

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

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

Nice , it worked for me Rails 4. Thanks

Nice , it worked for me Rails 4. Thanks

Great ! It worked with rails4.

Great ! It worked with rails4.

Great ! It worked with rails4.

Great ! It worked with rails4.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  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

  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

Thanks for the great tip @annieogrady, that worked!

Thanks for the great tip @annieogrady, that worked!

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

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

Thanks! This worked great for my Rails 4 app.

Thanks! This worked great for my Rails 4 app.

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

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

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

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

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.

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.

fantastic, thank you!

fantastic, thank you!

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.

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.

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

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

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

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