title: Devise Flash Method Rails
body: <p>I am using Rails 4, Twitter Bootstrap 3.0, and Devise 3.0. I am trying to get identical looking flash messages for devise and the rest of my site. So far I have this:<br><br>
  Within <b>"app/views/layouts/application.html.erb"</b>:</p>
  
  <pre><code>&lt;%= render 'layouts/messages' %&gt;
  </code></pre>
  
  <p><b>"app/views/layouts/_messages.html.erb"</b>:</p>
  
  <pre><code>&lt;% devise_flash %&gt;
  &lt;% flash.each do |key, value| %&gt;
    &lt;div class="alert alert-&lt;%= key %&gt;"&gt;
      &lt;a href="#" data-dismiss="alert" class="close"&gt;×&lt;/a&gt;
      &lt;%= value %&gt;
    &lt;/div&gt;
  &lt;% end %&gt;
  </code></pre>
  
  <p>I have created a <b>"app/helpers/devise_helper.rb"</b> in order to override the default devise error messages:</p>
  
  <pre><code>module DeviseHelper
    def devise_error_messages!
    end
  end
  </code></pre>
  
  <p><b>"app/helpers/application_helper.rb"</b>:</p>
  
  <pre><code>def devise_flash
    if controller.devise_controller? &amp;&amp; resource.errors.any?
      flash.now[:error] = flash[:error].to_a.concat resource.errors.full_messages
      flash.now[:error].uniq!
    end
  end
  </code></pre>
  
  <p><b>"app/assets/stylesheets/custom.css.scss"</b>:</p>
  
  <pre><code>.alert-error {
      background-color: #f2dede;
      border-color: #eed3d7;
      color: #b94a48;
      text-align: center; }
  
  .alert-alert {
      background-color: #f2dede;
      border-color: #eed3d7;
      color: #b94a48;
      text-align: center; }
  
  .alert-success {
      background-color: #dff0d8;
      border-color: #d6e9c6;
      color: #468847;
      text-align: center; }
  
  .alert-notice {
      background-color: #dff0d8;
      border-color: #d6e9c6;
      color: #468847;
      text-align: center; }
  </code></pre>
  
  <p>It displays normal flash messages fine but the issue is when I have a devise error. It looks like this:
  <img src="https://i.stack.imgur.com/WrNmh.png" alt="enter image description here"></p>
  
  <p>I am trying to list the errors more like this:
  <img src="https://i.stack.imgur.com/dhXQc.png" alt="enter image description here"></p>
  
  <p>I don't want the errors to be surrounded by "". It does not need to have the bullets, but I want it to be listed vertically. I think I need to edit my devise_flash method in the <b>"app/helpers/application_helper.rb"</b> file.</p>
  
  <p>How can I do this?</p>