How to define Flash Notifications with Twitter Bootstrap Rails gem

Question

I am trying to set flash notifications in the controller but it seems like I can only define :notice. When I try to define :errors or flash[:errors] I've gotten a bunch of errors. I currently have this working but all the messages are obviously a notice type and not an error or warning. I want to know how to set a error or warning instead of a notice. I am using rails 3.2 and the twitter bootstrap rails gem

in application.html.erb

<%= bootstrap_flash %>

in manuals_controller.rb

class ManualsController < ApplicationController
  def create
    respond_to do |format|
      format.html { redirect_to root_url, notice:'MyManual was successfully created.' }
    end
  end
end

Directions

gist.github.com/suryart/7418454 – Shallow

Answer 1

You're using the flash helper from seyhunak's twitter-bootstrap-rails gem. Instead of using the helper, you can set up the code yourself and see how everything works.

Here's how I set up Rails flash messages with Twitter Boostrap.

Rails uses :notice and :alert as flash message keys. Twitter Bootstrap provides a base class .alert with additional classes .alert-success and .alert-error (see the Bootstrap documentation on alerts). A bit of parsing is required to get a Rails “notice” message to be styled with the Twitter Bootstrap “alert-success” style. Any other message, including a Rails “alert” message, will be styled with the Twitter Bootstrap “alert-error” style.

By default, Twitter Bootstrap applies a green background to .alert-success and a red background to .alert-error. Twitter Bootstrap provides a third class .alert-info with a blue background. With a little hacking, it’s possible to create a Rails flash message with a custom name, such as :info, that will display with the Bootstrap .alert-info class. However, it’s wise to stick with the Rails convention of using only “alert” and “notice.” Earlier versions of Rails used "error" but the current practice is to use "alert" instead of "error."

You can include code to display flash messages directly in your application layout file or you can create a partial. Here's an example with a partial.

First, what goes in the application layout:

# app/views/layouts/application.html.erb 
.
.
.
<%= render 'layouts/messages' %>
.
.
.

Next, the partial that gets included in the application layout:

# app/views/layouts/_messages.html.erb
# Rails flash messages styled for Bootstrap 3.0
# works with Rails 4.0 or Rails 4.1
<% flash.each do |name, msg| %>
  <% if msg.is_a?(String) %>
    <div class="alert alert-<%= name.to_s == 'notice' ? 'success' : 'danger' %>">
      <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
      <%= content_tag :div, msg, :id => "flash_#{name}" %>
    </div>
  <% end %>
<% end %>

And an example of setting two different flash messages in a controller:

class VisitorsController < ApplicationController

  def new
    flash[:notice] = 'Welcome!'
    flash[:alert] = 'My birthday is soon.'
  end

end

This example comes from an in-depth article I wrote:

Twitter Bootstrap and Rails

For an alternative that accommodates four different flash message types (success, error, alert, notice), see an example of Rails Flash Messages using Twitter Bootstrap.

Widely

when I made the changes above I received an error "Can't convert Symbol into String". Thank you for explaining your initial answer thoroughly. – Directions

Here's a link to my Rails Bootstrap example app on GitHub which contains the flash message code. It may help to clone the example and check it as a reference implementation. – Widely

Should probably be "danger" instead of "error" as alert-error is not a bootstrap class – Bethea

Doug, thanks for pointing that out. I've updated the code for Bootstrap 3.0 and it works with Rails 4.0 or Rails 4.1. – Widely