Skip to content

Instantly share code, notes, and snippets.

@suryart
Last active October 26, 2023 00:16
Show Gist options
  • Save suryart/7418454 to your computer and use it in GitHub Desktop.
Save suryart/7418454 to your computer and use it in GitHub Desktop.
Rails 4 flash messages using Twitter Bootstrap(bootstrap-sass: https://github.com/thomas-mcdonald/bootstrap-sass). An improved version of https://gist.github.com/roberto/3344628
// layout file
<body>
<div class="container">
<%= flash_messages %>
<%= yield %>
</div><!-- /container -->
</body>
module ApplicationHelper
def bootstrap_class_for flash_type
{ success: "alert-success", error: "alert-danger", alert: "alert-warning", notice: "alert-info" }[flash_type] || flash_type.to_s
end
def flash_messages(opts = {})
flash.each do |msg_type, message|
concat(content_tag(:div, message, class: "alert #{bootstrap_class_for(msg_type)} fade in") do
concat content_tag(:button, 'x', class: "close", data: { dismiss: 'alert' })
concat message
end)
end
nil
end
end
@irbux
Copy link

irbux commented Jan 9, 2016

Thanks suryart and melnikaite, all is works good for me. (Rails 4.1)

@eltonsantos
Copy link

It's work in rails 4.2.5 and ruby 2.3.0. Thanks!!

I used this way:

def message
    html_message = ''
    [:success, :info, :error, :notice].each { |tipo|
      if flash[tipo]
        html_message << "<div class='alert-message alert #{"alert-#{tipo}" if tipo != :alert} alert-block fade in'>"
        html_message << '<button type="button" class="close" data-dismiss="alert">&times;</button>'
        html_message << flash[tipo]
        html_message << '</div>'
      end
    }
    raw(html_message)
  end

Copy link

ghost commented Feb 18, 2016

Why "success" and "error" aren't show?

@elvynmejia
Copy link

How can I use <%= flash_messages %> inside an each loop?

@olenberg
Copy link

olenberg commented Mar 9, 2016

Thank's for gist! It eases my life)))

@yeahmx91
Copy link

yeahmx91 commented May 20, 2016

It took me a while to get this working because its my second day with ruby and rails.

I have rails 4.2.6 with bootstrap-sass 3.3.6 (thanks to Bandon Conway) and it worked with the melnikaite code.

Thank you guys! I'll commit asap.
So pretty

@romerobrjp
Copy link

It works perfectly! Thank you so much!

@twnaing
Copy link

twnaing commented Jun 28, 2016

@unknown, according to the following documentation

There are two special accessors for the commonly used flash names alert and notice as well as a general purpose flash bucket.

you have to use the following

redirect_to @resource, alert: 'message'
redirect_to @resource, notice: 'message'
redirect_to @resource, flash: { success: 'message' }
redirect_to @resource, flash: { error: 'message' }

@gunterja
Copy link

@AhmedNadar

Try extending the bootstrap classes in application.scss like this:

/* Extending the Bootrstrap classes to cover all possible Flash types */

.alert-alert {
  @extend .alert-danger;
}

.alert-notice {
  @extend .alert-warning;
}

@hendricius
Copy link

Apparently in Rails 5 the flash messages each have a string. I just stringified the hash:

  def bootstrap_class_for flash_type
    { success: "alert-success", error: "alert-danger", alert: "alert-warning", notice: "alert-info" }.stringify_keys[flash_type.to_s] || flash_type.to_s
  end

  def flash_messages(opts = {})
    flash.each do |msg_type, message|
      concat(content_tag(:div, message, class: "alert #{bootstrap_class_for(msg_type)} fade in") do 
              concat content_tag(:button, 'x', class: "close", data: { dismiss: 'alert' })
              concat message 
            end)
    end
    nil
  end

@trendwithin
Copy link

This has always worked like a charm for me and I habitually copied and pasted this in my projects, so perhaps I can save someone else a headache. Currently using 'bootstrap', '~> 4.0.0.alpha6' and fade in is now fade show.

@naterexw
Copy link

naterexw commented Aug 3, 2017

To add font-awesome icons in Rails 5, Bootstrap 4 beta 2:

  def flash_messages(opts = {})
    flash.each do |msg_type, message|
      concat(content_tag(:div, message, class: "alert #{bootstrap_class_for(msg_type)} alert-dismissible fade show", role: 'alert') do
        concat(content_tag(:button, class: 'close', data: { dismiss: 'alert' }, 'aria-label' => "Close" ) do
          concat content_tag(:span, '&times;'.html_safe, 'aria-hidden' => true)
        end)
        case
        when bootstrap_class_for(msg_type) == "alert-success"
          concat content_tag(:span, '<i class="fa fa-check-circle"></i>'.html_safe, 'aria-hidden' => true)
        when bootstrap_class_for(msg_type) == ("alert-danger" || "alert-warning")
          concat content_tag(:span, '<i class="fa fa-times-circle"></i>'.html_safe, 'aria-hidden' => true)
        else
          concat content_tag(:span, '<i class="fa fa-info-circle"></i>'.html_safe, 'aria-hidden' => true)
        end
        concat " " + message
        concat "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;".html_safe
      end)
    end
    nil
  end

@sasankjonna
Copy link

Is there a preview of how it works?

@ryanoff
Copy link

ryanoff commented Jan 25, 2018

@naterexw, this works great. How about having the error message fade out to close after 4 seconds?

@davegson
Copy link

davegson commented May 10, 2018

A very basic and simple solution for Bootstrap 4:

application_helper.rb

module ApplicationHelper
  def bootstrap_class_for(flash_type)
    {
      success: 'alert-success',
      error: 'alert-danger',
      alert: 'alert-warning',
      notice: 'alert-primary'
    }[flash_type.to_sym] || flash_type.to_s
  end
end

application.html.erb

<!DOCTYPE html>
<html>
  <head>
    <!-- . -->
    <!-- . -->
  </head>
  <body>
    <div class='container'>
      <% flash.each do |type, content| %>
        <%= render 'partials/flash', type: type, content: content %>
      <% end %>

      <%= yield %>
    </div>
  </body>
</html>

_app/views/partials/flash.html.erb

<div class="alert <%= bootstrap_class_for(type) %> alert-dismissible fade show" role="alert">
  <button type="button" class="close" data-dismiss="alert" data-aria-label="Close">
    <span aria-hidden="true">&times;</span>
  </button>
  <div class="text">
    <%= content %>
  </div>
</div>

@superbilk
Copy link

Small typo with https://gist.github.com/suryart/7418454#gistcomment-2584737
correct file name is app/views/partials/_flash.html.erb (mind the underscore)

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