Displaying Flash Messages in Rails 4.2 using Twitter Bootstrap 3.2


To fix the layout issue and style flash messages.


We will work on the striped project to illustrate styling flash messages.


Step 1

In app/views/shared/_flash_messages.html.erb.

<% flash.each do |type, message| %>
  <div class="alert <%= bootstrap_class_for(type) %> fade in">
    <%= message %>
<% end %>

Step 2

Add the flash_messages partial to the app/views/layouts/application.html.erb file.

<%= render partial: "shared/flash_messages", flash: flash %> 

Delete the existing html that styles the flash messages in the layout file:

<p class="notice"><%= notice %></p>
<p class="alert"><%= alert %></p>

Step 3

In app/views/helpers/application_helper.rb.

def bootstrap_class_for(flash_type)
  case flash_type
  when "success"
    "alert-success"   # Green
  when "error"
    "alert-danger"    # Red
  when "alert"
    "alert-warning"   # Yellow
  when "notice"
    "alert-info"      # Blue

Let's fix the navigation bar hiding the forms in the page. Add:

body {
    padding-top: 90px;

to app/assets/stylesheets/application.css.scss. You can download the entire source code for this article using the commit hash 30c3afc from git@bitbucket.org:bparanj/striped.git.


In this article you learned how to style flash messages using Twitter Bootstrap 3.3 in a Rails 4.2 project. We also fixed the layout issue where the navigation bar was hiding part of the form.

Related Articles

Software Compatibility Best Practices

I spoke to some of the most talented and experienced software developers. I have created a guide that is filled with valuable insights and actionable ideas to boost developer productivity.

You will gain a better understanding of what's working well for other developers and how they address the software compatibility problems.

Get the Guide Now