カード枚

カード枚

カードフォーマット

きほんこうぞう

カードに色を追加可能
(.bg-primary, . bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary,
.bg-dark , .bg-light)

 <div class="card my-3">
      <div class="card-header">Header</div>
      <div class="card-body">Content</div>
      <div class="card-footer">Footer</div>
  </div> 

bodyにtitleとtextを追加

  <!--  20rem : 20글자크기로 하겠다-->
 <div class="card my-3" style="width: 20rem;">
      <div class="card-body">
        <h4 class="card-title">Card Title</h4>
        <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto, officiis.</p>
        <a href="#" class="btn btn-primary">Read More</a>
      </div>
   </div>

カードの上部に画像を入れます

画像をカードの下部に入れる場合は、imgマーク位置を下部orimg class=「card-img-buttom」にします.

<div class="card my-3" style="width: 20rem;">
      <img class="card-img-top" src="https://source.unsplash.com/random/300x200" alt="">
      <div class="card-body">
        <h4 class="card-title">Card Title</h4>
        <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto, officiis.</p>
        <a href="#" class="btn btn-primary">Read More</a>
      </div>
    </div>

card-headの使用

<!--class="card text-center 사용시 카드안 내용들 중앙으로 정렬-->
  <div class="card text-center my-3">
      <div class="card-header">
        Featured
      </div>
      <div class="card-body">
        <h5 class="card-title">Special title treatment</h5>
        <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
      </div>
      <div class="card-footer text-muted">
        2 days ago
      </div>
    </div>

画像に内容を書き込む

 <div class="card bg-dark text-white my-3">
      <img src="https://source.unsplash.com/random/301x200" class="card-img" alt="...">
      <div class="card-img-overlay">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content.
          This content is a little bit longer.</p>
        <p class="card-text">Last updated 3 mins ago</p>
      </div>
    </div>