
こんにちは、yutaです。
今日はBootstrapのAlertsを使って、「閉じるボタンを押したら消えるダイアログ」作ってみます!
Bootstrapの導入方法についてはこちらの記事で解説しています。

記事を読んで頂くついでにクリックもして頂けると嬉しいです笑
※別タブで開きますので記事の邪魔にはなりません。
1.まずはシンプルなalertから
もっともシンプルなalertは以下のコードだけで実装できます。
<div class="alert alert-success">アラート</div>

alert-successの部分で文字色、背景色、ボーダーの色を設定していますが以下の通りバリエーションがあるので好きなものを選んでください。

2.閉じるボタン付きのalert
本題のボタン付きダイアログを作ってみます。コードは以下の通り。
【HTML】
<div class="alert alert-success mx-auto alert-dismissible fade show" id="alert1" role="alert">
<h4 class="alert-heading">メンバー募集!</h4>
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<p>私たちと一緒に会社を盛り上げてくれるメンバーを募集しています。スタッフ全員で面白いと思うアイデアを出し合い、世界に発信していきましょう!</p>
<hr>
<p>詳細は<a href="#">こちら</a>から</p>
</div>
【CSS】
#alert1{
width: 40%;
}
各要素は以下のように配置されていますね。

各要素のクラスなどの意味は以下の通り。




上記コードを実行してみると以下のようになります。