Create a gist now

Instantly share code, notes, and snippets.

Embed
What would you like to do?
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

This comment has been minimized.

Show comment
Hide comment
@icem

icem Jun 14, 2013

Why not just using Hash for #bootstrap_class_for ?

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

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

This comment has been minimized.

Show comment
Hide comment
@RaceFPV

This comment has been minimized.

Show comment
Hide comment
@RaceFPV

RaceFPV Oct 2, 2013

this worked well, thanks!

RaceFPV commented Oct 2, 2013

this worked well, thanks!

@piratebroadcast

This comment has been minimized.

Show comment
Hide comment
@piratebroadcast

piratebroadcast Oct 9, 2013

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.

@fertobar

This comment has been minimized.

Show comment
Hide comment
@fertobar

fertobar Oct 15, 2013

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?

@SteveVallay

This comment has been minimized.

Show comment
Hide comment
@SteveVallay

SteveVallay Oct 28, 2013

Nice , it worked for me Rails 4. Thanks

Nice , it worked for me Rails 4. Thanks

@saikiranmothe

This comment has been minimized.

Show comment
Hide comment
@saikiranmothe

saikiranmothe Oct 31, 2013

Great ! It worked with rails4.

Great ! It worked with rails4.

@saikiranmothe

This comment has been minimized.

Show comment
Hide comment
@saikiranmothe

saikiranmothe Oct 31, 2013

Great ! It worked with rails4.

Great ! It worked with rails4.

@suryart

This comment has been minimized.

Show comment
Hide comment
@suryart

suryart Nov 11, 2013

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

suryart commented Nov 11, 2013

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

@omarzina

This comment has been minimized.

Show comment
Hide comment
@omarzina

omarzina Dec 11, 2013

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.

@JoshTGreenwood

This comment has been minimized.

Show comment
Hide comment
@JoshTGreenwood

JoshTGreenwood Dec 24, 2013

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

This comment has been minimized.

Show comment
Hide comment
@iloveip

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

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

This comment has been minimized.

Show comment
Hide comment
@annieogrady

annieogrady Mar 25, 2014

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?

@annieogrady

This comment has been minimized.

Show comment
Hide comment
@annieogrady

annieogrady Mar 25, 2014

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.

@annieogrady

This comment has been minimized.

Show comment
Hide comment
@annieogrady

annieogrady Mar 27, 2014

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.

@clarkbw

This comment has been minimized.

Show comment
Hide comment
@clarkbw

clarkbw 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

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

This comment has been minimized.

Show comment
Hide comment
@seoyoochan

seoyoochan Jul 20, 2014

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

@rafaelfragosom

This comment has been minimized.

Show comment
Hide comment
@rafaelfragosom

rafaelfragosom Aug 9, 2014

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

This comment has been minimized.

Show comment
Hide comment
@danwagnerco

danwagnerco Aug 28, 2014

Thanks for the great tip @annieogrady, that worked!

Thanks for the great tip @annieogrady, that worked!

@manojlds

This comment has been minimized.

Show comment
Hide comment
@manojlds

manojlds Aug 30, 2014

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

This comment has been minimized.

Show comment
Hide comment
@kcny

kcny Sep 6, 2014

Thanks! This worked great for my Rails 4 app.

kcny commented Sep 6, 2014

Thanks! This worked great for my Rails 4 app.

@eduardopoleo

This comment has been minimized.

Show comment
Hide comment
@daneelliotthamilton

This comment has been minimized.

Show comment
Hide comment
@daneelliotthamilton

daneelliotthamilton Dec 17, 2014

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.

@Yorkshireman

This comment has been minimized.

Show comment
Hide comment
@Yorkshireman

Yorkshireman Apr 26, 2015

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.

@elliotwesoff

This comment has been minimized.

Show comment
Hide comment
@elliotwesoff

elliotwesoff May 13, 2015

fantastic, thank you!

fantastic, thank you!

@benbristow

This comment has been minimized.

Show comment
Hide comment
@benbristow

benbristow Jul 10, 2015

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.

@equivalent

This comment has been minimized.

Show comment
Hide comment
@equivalent

equivalent Oct 22, 2016

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

This comment has been minimized.

Show comment
Hide comment
@vesh95

vesh95 Jun 17, 2018

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

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