とほほのBootstrap 4入門

トップ > Bootstrap 4入門 > アラート

アラート

アラート

.alert, .alert-{value} はアラートメッセージの背景に色付けします。

Sample
Code
<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 は、アラートメッセージの背景に応じた色のリンクテキストを表示します。

Sample
Code
<div class="alert alert-primary" role="alert">
  Primary alert. (See the <a href="#" class="alert-link">details</a>)
</div>

アラートヘッダ

.alert-heading は、アラートメッセージの背景に応じた色のヘッダを表示します。

Sample
Code
<div class="alert alert-success" role="alert">
  <h4 class="alert-heading">Success!</h4>
  <p>Your operation is ...</p>
</div>

Copyright (C) 2015-2018 杜甫々
初版:2015年9月6日 最終更新:2018年6月17日
http://www.tohoho-web.com/bootstrap/alert.html