Bootstrap/Rails - Adding 'close' to flash notice

Question

i've been trying to work this out myself and not have to ask but I can't seem to find a solution.

I have a flash notice working perfectly in my app: application.html.erb excerpt:

<body>

  <div class="container">
    <% flash.each do |key, value| %>
      <%= content_tag :div, value, class: "alert alert-#{key}" %>
    <% end %>

    <%= yield %>
  </div>

</body>

..my question is, is there a way of adding the 'close' bootstrap feature within the above code?..

i.e:

<div class="alert alert-warning alert-dismissible" role="alert">
  <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
</div>

..but including it within my <%= %>

(it obviously doesn't need to be the 'warning' class as above, this was just copied from bootstrap as an example)

Thanks in advance!!

Justin

@MattBricston ..i'm struggling to grasp the key == :notice ? 'success' : 'danger' line, would it only work for 'success', and 'danger' bootstrap alerts?..is it just a matter or adding : 'warning' : 'info' etc??...

Thanks again, really appreciate it :)

Matt Brictson Matt Brictson · Accepted Answer · 2015-08-06T04:42:03

How about this:

<% flash.each do |key, value| %>
  <% alert_class = case key
                   when :notice then "success"
                   when :alert then "danger"
                   else key
                   end %>
  <%= content_tag :div, class: "alert alert-#{alert_class}" do %>
    <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
    <%= value %>
  <% end %>
<% end %>

Keep in mind that:

Rails flash keys are :notice and :alert, but Bootstrap's classes are success and danger, so you have to do some conversion.
Make sure to also include Bootstrap's JavaScript on the page so that the × button actually works.

Update for clarification:

The flash keys in Rails can be whatever you want. So you can use :success, :info, :warning in your controller and use those directly as Bootstrap classes in your markup without any conversion to get the desired style.

However, in my experience, some third-party gems for Rails (including Devise, I think) use :notice and :alert for their flash message keys. Therefore it is probably still a good idea to translate those two into the appropriate Bootstrap class names, as in my example.

Bootstrap/Rails - Adding 'close' to flash notice

3 Answers