.alert
, .alert-{value}
はアラートメッセージの背景に色付けします。
<div class="alert alert-primary" role="alert">Primary alert</div> <div class="alert alert-secondary" role="alert">Secondary alert</div> <div class="alert alert-success" role="alert">Success alert</div> <div class="alert alert-danger" role="alert">Danger alert</div> <div class="alert alert-warning" role="alert">Warning alert;</div> <div class="alert alert-info" role="alert">Info alert</div> <div class="alert alert-light" role="alert">Light alert</div> <div class="alert alert-dark" role="alert">Dark alert</div>
.alert-link
は、アラートメッセージの背景に応じた色のリンクテキストを表示します。
<div class="alert alert-primary" role="alert"> Primary alert. (See the <a href="#" class="alert-link">details</a>) </div>
.alert-heading
は、アラートメッセージの背景に応じた色のヘッダを表示します。
Your operation is ...
<div class="alert alert-success" role="alert"> <h4 class="alert-heading">Success!</h4> <p>Your operation is ...</p> </div>