フラッシュメッセージにBootstrapのデザインを反映させる

Railsの標準ではflashのキーとして:notice, :alert, :flashが用意されています。

railsguides.jp

Bootstrapでは8種類のキーが用意されていますが、Railsのflashのキーと異なるためそのままだと上手く連携させるられません。

getbootstrap.jp

フラッシュのキーを追加定義する

Railsと連携させるためにはBootstrapで定義されているキー(primary, secondary, success, danger, warning, info, light, dark)をApplicationControllerに追加定義する必要があります。 もちろん8種類全てを定義する必要はなく使いたいもののみを定義すればよい。

# app/controllers/application_controller.rb
class ApplicationController < ActionController::Base
  add_flash_types %i[success info warning danger]
end

フラッシュメッセージを表示させる

フラッシュメッセージを表示させていきます。 まずはフラッシュメッセージ部のパーシャルを作成します。

# app/views/shared/_flash_messages.html.slim
- flash.each do |key, value|
  div class="alert alert-#{key}"
    = value

全てのページでフラッシュメッセージが表示されるようapplication.html.erbにパーシャルを読み込ませます。

# app/views/layouts/application.html.slim
DOCTYPE html
html
  <!-- 中略 -->
  body
    = render 'shared/flash_message'
    = yield

以上でbootstrapのデザインが適応されたフラッシュメッセージが表示されるようになりました。