alert-link

bootstrap5.css

bootstrap5.css
.alert-link {
  font-weight: 700;
}
bootstrap5.css
.alert-primary .alert-link {
  color: #06357a;
}
bootstrap5.css
.alert-secondary .alert-link {
  color: #34383c;
}
bootstrap5.css
.alert-success .alert-link {
  color: #0c4128;
}
bootstrap5.css
.alert-info .alert-link {
  color: #04414d;
}
bootstrap5.css
.alert-warning .alert-link {
  color: #523e02;
}
bootstrap5.css
.alert-danger .alert-link {
  color: #6a1a21;
}
bootstrap5.css
.alert-light .alert-link {
  color: #4f5050;
}
bootstrap5.css
.alert-dark .alert-link {
  color: #101214;
}

html bootstrap5 Sample

アラート内にコンテンツを追加する:alert


  <div class="alert alert-success" role="alert">
    <h4 class="alert-heading">アラートのタイトル</h4>
    <p>アラートの内容</p>
    <p class="mb-0"><a href="#" class="alert-link">詳細内容へ</a></p>
    <p class="mb-0"><a href="#">問い合わせ</a></p>
  </div>