border-primary

bootstrap4.css

bootstrap4.css
.border-primary {
  border-color: #007bff !important;
}

html Sample

カードのデフォルトのボーダー色を変更する:border-primary


カードのヘッダー

カードのタイトル

カードの内容

カードのヘッダー

カードのタイトル

カードの内容

  <div class="card mb-3" style="max-width: 25rem;">
    <div class="card-header">カードのヘッダー</div>
    <div class="card-body">
      <h4 class="card-title">カードのタイトル</h4>
      <p class="card-text">カードの内容</p>
    </div>
  </div>
  <!-- カード枠のボーダー色:青 border-primary -->
  <div class="card border-primary mb-3" style="max-width: 25rem;">
    <!-- ヘッダーのボーダー色:青 border-primary -->
    <div class="card-header border-primary">カードのヘッダー</div>
    <div class="card-body">
      <h4 class="card-title">カードのタイトル</h4>
      <p class="card-text">カードの内容</p>
    </div>
  </div>

ボーダー色を設定する:border-*


border-primary border-secondary border-success border-danger border-warning border-info border-light border-dark border-white
  <span class="border border-primary">border-primary</span>
  <span class="border border-secondary">border-secondary</span>
  <span class="border border-success">border-success</span>
  <span class="border border-danger">border-danger</span>
  <span class="border border-warning">border-warning</span>
  <span class="border border-info">border-info</span>
  <span class="border border-light">border-light</span>
  <span class="border border-dark">border-dark</span>
  <span class="border border-white">border-white</span>