alert-link

bootstrap5.css

bootstrap5.css
.alert-link {
  font-weight: 700;
}
bootstrap5.css
.alert-primary .alert-link {
  color: #002752;
}
bootstrap5.css
.alert-secondary .alert-link {
  color: #202326;
}
bootstrap5.css
.alert-success .alert-link {
  color: #0b2e13;
}
bootstrap5.css
.alert-info .alert-link {
  color: #062c33;
}
bootstrap5.css
.alert-warning .alert-link {
  color: #533f03;
}
bootstrap5.css
.alert-danger .alert-link {
  color: #491217;
}
bootstrap5.css
.alert-light .alert-link {
  color: #686868;
}
bootstrap5.css
.alert-dark .alert-link {
  color: #040505;
}

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>