前提条件

すでにbootstrap4を導入していてる人。

bootstrap3でもできますが少し記述が変わるので以下参考

やりたい事

flashメッセージの横に✖️を出してメッセージを消せるようにしたい
(参考画像）http://drive.google.com/uc?export=view&id=1ckdEvoEdn79roPkAsarFpTbnf-pq_Ejl

実装

以下のコードを部分テンプレートファイルに記載

<% flash.each do |key, value| %>
  <div class="alert alert-<%= bootstrap_alert(key) %> alert-dismissible fade show" role="alert">
  <button type="button" class="close" data-dismiss="alert" aria-label="閉じる">
    <span aria-hidden="true">&times;</span>
  </button>
    <strong>
      <%= value %>
    </strong>
  </div>
<% end %>

コードの説明

<% flash.each do |key, value| %>はコントローラなどでflashメッセージを記載したときにeachで毎回出るように回しています。
<span aria-hidden="true">&times;</span>の×は✖️のエスケープ文字です。正直これは直接✖️と書いても良いらしい。
エスケープ処理について理解したい方は下記のURLを参考に
https://qiita.com/n_hirai/items/df0a21d2409ee47973e5

追記2020 11/9

違うアプリで導入するとbootstrap_alertにエラーが出たので<%= key %> だけにして,

add_flash_types :success, :info, :warning, :danger

application_controller.rbに上記を記載して、コントローラでこのようにするとうまく行きました。

 redirect_to @event, flash: {success: "イベントが追加されました"}

最後に

さすがbootstrap と言ったところでしょうか。少しの記述で簡単に実装できます。
エスケープ処理についても少し理解できたので良かったです。