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

Ace the Technical Interview

  • Easily find the gaps in your knowledge
  • Get customized lessons based on where you are
  • Take consistent action everyday
  • Builtin accountability to keep you on track
  • You will solve bigger problems over time
  • Get the job of your dreams

Take the 30 Day Coding Skills Challenge

Gain confidence to attend the interview

No spam ever. Unsubscribe anytime.