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