色bolor:bg-primary

文字に色をつける:text-primary



  <div class="text-center">
    <p><a href="#" class="text-primary">text-primary</a></p>
    <p><a href="#" class="text-secondary">text-secondary</a></p>
    <p><a href="#" class="text-success">text-success</a></p>
    <p><a href="#" class="text-danger">text-danger</a></p>
    <p><a href="#" class="text-warning">text-warning</a></p>
    <p><a href="#" class="text-info">text-info</a></p>
    <p><a href="#" class="text-light bg-dark">text-light</a></p>
    <p><a href="#" class="text-dark">text-dark</a></p>
    <p><a href="#" class="text-body">text-body</a></p>
    <p><a href="#" class="text-muted">text-muted</a></p>
    <p><a href="#" class="text-white bg-dark">text-white</a></p>
    <p><a href="#" class="text-black-50">text-black-50</a></p>
    <p><a href="#" class="text-white-50 bg-dark">text-white-50</a></p>
  </div>

背景に色を付ける:bg-primary



  <div class="text-center">
    <p><a href="#" class="bg-primary text-white d-block py-2">bg-primary</a></p>
    <p><a href="#" class="bg-secondary text-white d-block py-2">bg-secondary</a></p>
    <p><a href="#" class="bg-success text-white d-block py-2">bg-success</a></p>
    <p><a href="#" class="bg-danger text-white d-block py-2">bg-danger</a></p>
    <p><a href="#" class="bg-warning text-dark d-block py-2">bg-warning</a></p>
    <p><a href="#" class="bg-info text-white d-block py-2">bg-info</a></p>
    <p><a href="#" class="bg-light text-dark d-block py-2">bg-light</a></p>
    <p><a href="#" class="bg-dark text-white d-block py-2">bg-dark</a></p>
    <p><a href="#" class="bg-white text-dark d-block py-2">bg-white</a></p>
    <p><a href="#" class="bg-transparent d-block py-2">bg-transparent</a></p>
  </div>

背景にグラデーション:bg-gradient


.bg-primary.bg-gradient
.bg-secondary.bg-gradient
.bg-success.bg-gradient
.bg-danger.bg-gradient
.bg-warning.bg-gradient
.bg-info.bg-gradient
.bg-light.bg-gradient
.bg-dark.bg-gradient

  <div class="p-3 mb-2 bg-primary bg-gradient text-white">.bg-primary.bg-gradient</div>
  <div class="p-3 mb-2 bg-secondary bg-gradient text-white">.bg-secondary.bg-gradient</div>
  <div class="p-3 mb-2 bg-success bg-gradient text-white">.bg-success.bg-gradient</div>
  <div class="p-3 mb-2 bg-danger bg-gradient text-white">.bg-danger.bg-gradient</div>
  <div class="p-3 mb-2 bg-warning bg-gradient text-dark">.bg-warning.bg-gradient</div>
  <div class="p-3 mb-2 bg-info bg-gradient text-dark">.bg-info.bg-gradient</div>
  <div class="p-3 mb-2 bg-light bg-gradient text-dark">.bg-light.bg-gradient</div>
  <div class="p-3 mb-2 bg-dark bg-gradient text-white">.bg-dark.bg-gradient</div>

リンクに色をつける:link-primary



  <div class="text-center">
    <a href="#" class="link-primary">Primary link</a><br>
    <a href="#" class="link-secondary">Secondary link</a><br>
    <a href="#" class="link-success">Success link</a><br>
    <a href="#" class="link-danger">Danger link</a><br>
    <a href="#" class="link-warning">Warning link</a><br>
    <a href="#" class="link-info">Info link</a><br>
    <a href="#" class="link-light">Light link</a><br>
    <a href="#" class="link-dark">Dark link</a>
  </div>