Source

การ์ด

การ์ดของ Bootstrap มีคอนเทนเนอร์เนื้อหาที่ยืดหยุ่นและขยายได้พร้อมตัวเลือกและตัวเลือกที่หลากหลาย

เกี่ยวกับ

การ์ดเป็นคอนเทนเนอร์เนื้อหาที่ยืดหยุ่นและขยายได้ ประกอบด้วยตัวเลือกสำหรับส่วนหัวและส่วนท้าย เนื้อหาที่หลากหลาย สีพื้นหลังตามบริบท และตัวเลือกการแสดงผลที่มีประสิทธิภาพ หากคุณคุ้นเคยกับ Bootstrap 3 การ์ดจะเข้ามาแทนที่แผง บ่อน้ำ และภาพขนาดย่อแบบเก่าของเรา ฟังก์ชันที่คล้ายคลึงกันกับส่วนประกอบเหล่านั้นมีให้เป็นคลาสตัวปรับแต่งสำหรับการ์ด

ตัวอย่าง

การ์ดถูกสร้างขึ้นด้วยมาร์กอัปและรูปแบบที่น้อยที่สุดเท่าที่จะเป็นไปได้ แต่ยังคงสามารถควบคุมและปรับแต่งได้มากมาย สร้างขึ้นด้วย flexbox ทำให้จัดตำแหน่งได้ง่ายและผสมผสานกับส่วนประกอบ Bootstrap อื่นๆ ได้ดี ไม่มีmarginโดยค่าเริ่มต้น ดังนั้นให้ใช้ยูทิลิตี้การเว้นวรรคตามต้องการ

ด้านล่างนี้คือตัวอย่างการ์ดพื้นฐานที่มีเนื้อหาผสมและความกว้างคงที่ การ์ดไม่มีความกว้างตายตัวในการเริ่มต้น ดังนั้นการ์ดจะเติมความกว้างเต็มขององค์ประกอบหลักโดยธรรมชาติ ปรับแต่งได้ง่ายด้วยตัวเลือกขนาดต่างๆ ของเรา

100%x180
ชื่อการ์ด

ตัวอย่างข้อความสั้นๆ เพื่อสร้างจากชื่อการ์ดและประกอบขึ้นเป็นเนื้อหาในการ์ดจำนวนมาก

ไปที่ไหนสักแห่ง
<div class="card" style="width: 18rem;">
  <img class="card-img-top" src=".../100px180/" alt="Card image cap">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

ประเภทเนื้อหา

การ์ดรองรับเนื้อหาที่หลากหลาย รวมถึงรูปภาพ ข้อความ กลุ่มรายการ ลิงก์ และอื่นๆ ด้านล่างนี้เป็นตัวอย่างของสิ่งที่ได้รับการสนับสนุน

ร่างกาย

การสร้างบล็อคของการ์ดคือ.card-body. ใช้เมื่อใดก็ตามที่คุณต้องการส่วนบุนวมภายในการ์ด

นี่คือข้อความบางส่วนภายในเนื้อหาของการ์ด
<div class="card">
  <div class="card-body">
    This is some text within a card body.
  </div>
</div>

ชื่อการ์ดถูกใช้โดยการเพิ่ม.card-titleแท็<h*>ก ในทำนองเดียวกัน ลิงก์จะถูกเพิ่มและวางติดกันโดยการเพิ่ม.card-linkลงใน<a>แท็ก

คำบรรยายถูกใช้โดยการเพิ่ม a .card-subtitleลงใน<h*>แท็ก หาก วางรายการ .card-titleและ.card-subtitleรายการไว้ใน.card-bodyรายการ ชื่อการ์ดและคำบรรยายจะจัดตำแหน่งอย่างสวยงาม

ชื่อการ์ด
คำบรรยายการ์ด

ตัวอย่างข้อความสั้นๆ เพื่อสร้างจากชื่อการ์ดและประกอบขึ้นเป็นเนื้อหาในการ์ดจำนวนมาก

ลิงค์การ์ด ลิงค์ อื่น
<div class="card" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="card-link">Card link</a>
    <a href="#" class="card-link">Another link</a>
  </div>
</div>

รูปภาพ

.card-img-topวางรูปภาพไว้บนสุดของการ์ด ด้วย.card-textคุณสามารถเพิ่มข้อความลงในการ์ดได้ ข้อความภายใน.card-textสามารถกำหนดสไตล์ด้วยแท็ก HTML มาตรฐานได้

ฝาครอบรูปภาพ [100%x180]

ตัวอย่างข้อความสั้นๆ เพื่อสร้างจากชื่อการ์ดและประกอบขึ้นเป็นเนื้อหาในการ์ดจำนวนมาก

<div class="card" style="width: 18rem;">
  <img class="card-img-top" src=".../100px180/?text=Image cap" alt="Card image cap">
  <div class="card-body">
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>

รายชื่อกลุ่ม

สร้างรายการเนื้อหาในการ์ดที่มีกลุ่มรายการล้าง

  • Cras justo odio
  • Dapibus ac สิ่งอำนวยความสะดวกใน
  • ขนถ่ายที่ eros
<div class="card" style="width: 18rem;">
  <ul class="list-group list-group-flush">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
</div>
จุดเด่น
  • Cras justo odio
  • Dapibus ac สิ่งอำนวยความสะดวกใน
  • ขนถ่ายที่ eros
<div class="card" style="width: 18rem;">
  <div class="card-header">
    Featured
  </div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
</div>

อ่างล้างจาน

ผสมผสานและจับคู่เนื้อหาหลายประเภทเพื่อสร้างการ์ดที่คุณต้องการ หรือใส่ทุกอย่างลงไป ด้านล่างนี้คือสไตล์รูปภาพ บล็อก สไตล์ข้อความ และกลุ่มรายการ ทั้งหมดนี้รวมอยู่ในการ์ดความกว้างคงที่

ฝาครอบรูปภาพ [100%x180]
ชื่อการ์ด

ตัวอย่างข้อความสั้นๆ เพื่อสร้างจากชื่อการ์ดและประกอบขึ้นเป็นเนื้อหาในการ์ดจำนวนมาก

  • Cras justo odio
  • Dapibus ac สิ่งอำนวยความสะดวกใน
  • ขนถ่ายที่ eros
<div class="card" style="width: 18rem;">
  <img class="card-img-top" src=".../100px180/?text=Image cap" alt="Card image cap">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
  <div class="card-body">
    <a href="#" class="card-link">Card link</a>
    <a href="#" class="card-link">Another link</a>
  </div>
</div>

เพิ่มส่วนหัวและ/หรือส่วนท้ายที่ไม่บังคับภายในการ์ด

จุดเด่น
การรักษาชื่อพิเศษ

พร้อมข้อความสนับสนุนด้านล่างเพื่อเป็นการนำไปสู่เนื้อหาเพิ่มเติมอย่างเป็นธรรมชาติ

ไปที่ไหนสักแห่ง
<div class="card">
  <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>

ส่วนหัวของการ์ดสามารถจัดสไตล์ได้โดยการ.card-headerเพิ่ม<h*>องค์ประกอบ

จุดเด่น
การรักษาชื่อพิเศษ

พร้อมข้อความสนับสนุนด้านล่างเพื่อเป็นการนำไปสู่เนื้อหาเพิ่มเติมอย่างเป็นธรรมชาติ

ไปที่ไหนสักแห่ง
<div class="card">
  <h5 class="card-header">Featured</h5>
  <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>
อ้าง

Lorem ipsum dolor sit amet, consectetur adipiscing elit. โลเรม อิปซัม โดลอร์ จำนวนเต็ม posuere erat ante

คนที่มีชื่อเสียงใน Source Title
<div class="card">
  <div class="card-header">
    Quote
  </div>
  <div class="card-body">
    <blockquote class="blockquote mb-0">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
      <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
    </blockquote>
  </div>
</div>
จุดเด่น
การรักษาชื่อพิเศษ

พร้อมข้อความสนับสนุนด้านล่างเพื่อเป็นการนำไปสู่เนื้อหาเพิ่มเติมอย่างเป็นธรรมชาติ

ไปที่ไหนสักแห่ง
<div class="card text-center">
  <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>

ขนาด

การ์ดไม่มีความเฉพาะเจาะจงwidthในการเริ่ม ดังนั้นการ์ดจะมีความกว้าง 100% เว้นแต่จะระบุไว้เป็นอย่างอื่น คุณสามารถเปลี่ยนแปลงสิ่งนี้ได้ตามต้องการด้วย CSS แบบกำหนดเอง คลาสกริด มิกซ์อิน Sass ของกริด หรือยูทิลิตี้

การใช้มาร์กอัปกริด

ใช้กริด ห่อการ์ดในคอลัมน์และแถวตามต้องการ

การรักษาชื่อพิเศษ

พร้อมข้อความสนับสนุนด้านล่างเพื่อเป็นการนำไปสู่เนื้อหาเพิ่มเติมอย่างเป็นธรรมชาติ

ไปที่ไหนสักแห่ง
การรักษาชื่อพิเศษ

พร้อมข้อความสนับสนุนด้านล่างเพื่อเป็นการนำไปสู่เนื้อหาเพิ่มเติมอย่างเป็นธรรมชาติ

ไปที่ไหนสักแห่ง
<div class="row">
  <div class="col-sm-6">
    <div class="card">
      <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>
  </div>
  <div class="col-sm-6">
    <div class="card">
      <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>
  </div>
</div>

การใช้สาธารณูปโภค

ใช้ยูทิลิตี้การปรับขนาดที่มีอยู่ จำนวนหนึ่ง เพื่อกำหนดความกว้างของการ์ดอย่างรวดเร็ว

ชื่อการ์ด

พร้อมข้อความสนับสนุนด้านล่างเพื่อเป็นการนำไปสู่เนื้อหาเพิ่มเติมอย่างเป็นธรรมชาติ

ปุ่ม
ชื่อการ์ด

พร้อมข้อความสนับสนุนด้านล่างเพื่อเป็นการนำไปสู่เนื้อหาเพิ่มเติมอย่างเป็นธรรมชาติ

ปุ่ม
<div class="card w-75">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Button</a>
  </div>
</div>

<div class="card w-50">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Button</a>
  </div>
</div>

การใช้ CSS . ที่กำหนดเอง

ใช้ CSS ที่กำหนดเองในสไตล์ชีตของคุณหรือเป็นสไตล์อินไลน์เพื่อกำหนดความกว้าง

การรักษาชื่อพิเศษ

พร้อมข้อความสนับสนุนด้านล่างเพื่อเป็นการนำไปสู่เนื้อหาเพิ่มเติมอย่างเป็นธรรมชาติ

ไปที่ไหนสักแห่ง
<div class="card" style="width: 18rem;">
  <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>

การจัดตำแหน่งข้อความ

คุณสามารถเปลี่ยนการจัดแนวข้อความของการ์ดใดก็ได้—ในทั้งหมดหรือบางส่วน—ด้วยคลาสการจัดข้อความของ เรา

การรักษาชื่อพิเศษ

พร้อมข้อความสนับสนุนด้านล่างเพื่อเป็นการนำไปสู่เนื้อหาเพิ่มเติมอย่างเป็นธรรมชาติ

ไปที่ไหนสักแห่ง
การรักษาชื่อพิเศษ

พร้อมข้อความสนับสนุนด้านล่างเพื่อเป็นการนำไปสู่เนื้อหาเพิ่มเติมอย่างเป็นธรรมชาติ

ไปที่ไหนสักแห่ง
การรักษาชื่อพิเศษ

พร้อมข้อความสนับสนุนด้านล่างเพื่อเป็นการนำไปสู่เนื้อหาเพิ่มเติมอย่างเป็นธรรมชาติ

ไปที่ไหนสักแห่ง
<div class="card" style="width: 18rem;">
  <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>

<div class="card text-center" style="width: 18rem;">
  <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>

<div class="card text-right" style="width: 18rem;">
  <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>

เพิ่มการนำทางไปยังส่วนหัวของการ์ด (หรือบล็อก) ด้วยส่วนประกอบการนำ ทาง ของ Bootstrap

การรักษาชื่อพิเศษ

พร้อมข้อความสนับสนุนด้านล่างเพื่อเป็นการนำไปสู่เนื้อหาเพิ่มเติมอย่างเป็นธรรมชาติ

ไปที่ไหนสักแห่ง
<div class="card text-center">
  <div class="card-header">
    <ul class="nav nav-tabs card-header-tabs">
      <li class="nav-item">
        <a class="nav-link active" href="#">Active</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
  </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>
การรักษาชื่อพิเศษ

พร้อมข้อความสนับสนุนด้านล่างเพื่อเป็นการนำไปสู่เนื้อหาเพิ่มเติมอย่างเป็นธรรมชาติ

ไปที่ไหนสักแห่ง
<div class="card text-center">
  <div class="card-header">
    <ul class="nav nav-pills card-header-pills">
      <li class="nav-item">
        <a class="nav-link active" href="#">Active</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
  </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>

รูปภาพ

การ์ดมีตัวเลือกสองสามอย่างสำหรับการทำงานกับรูปภาพ เลือกจากการเพิ่ม "ตัวพิมพ์ใหญ่รูปภาพ" ที่ปลายด้านใดด้านหนึ่งของการ์ด การวางรูปภาพที่มีเนื้อหาในการ์ด หรือเพียงแค่ฝังรูปภาพลงในการ์ด

แคปรูปภาพ

เช่นเดียวกับส่วนหัวและส่วนท้าย การ์ดสามารถรวม "ตัวพิมพ์ใหญ่รูปภาพ" ด้านบนและด้านล่าง—ภาพที่ด้านบนหรือด้านล่างของการ์ด

100%x180
ชื่อการ์ด

นี่คือการ์ดที่กว้างขึ้นพร้อมข้อความสนับสนุนด้านล่างเพื่อนำไปสู่เนื้อหาเพิ่มเติมโดยธรรมชาติ เนื้อหานี้ยาวไปหน่อย

อัพเดทล่าสุดเมื่อ 3 นาทีที่แล้ว

ชื่อการ์ด

นี่คือการ์ดที่กว้างขึ้นพร้อมข้อความสนับสนุนด้านล่างเพื่อนำไปสู่เนื้อหาเพิ่มเติมโดยธรรมชาติ เนื้อหานี้ยาวไปหน่อย

อัพเดทล่าสุดเมื่อ 3 นาทีที่แล้ว

100%x180
<div class="card mb-3">
  <img class="card-img-top" src=".../100px180/" alt="Card image cap">
  <div class="card-body">
    <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"><small class="text-muted">Last updated 3 mins ago</small></p>
  </div>
</div>
<div class="card">
  <div class="card-body">
    <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"><small class="text-muted">Last updated 3 mins ago</small></p>
  </div>
  <img class="card-img-bottom" src=".../100px180/" alt="Card image cap">
</div>

ภาพซ้อนทับ

เปลี่ยนรูปภาพเป็นพื้นหลังของการ์ดและซ้อนทับข้อความในการ์ดของคุณ คุณอาจต้องการหรือไม่ต้องการสไตล์หรือยูทิลิตี้เพิ่มเติม ทั้งนี้ขึ้นอยู่กับรูปภาพ

100%x270
ชื่อการ์ด

นี่คือการ์ดที่กว้างขึ้นพร้อมข้อความสนับสนุนด้านล่างเพื่อนำไปสู่เนื้อหาเพิ่มเติมโดยธรรมชาติ เนื้อหานี้ยาวไปหน่อย

อัพเดทล่าสุดเมื่อ 3 นาทีที่แล้ว

<div class="card bg-dark text-white">
  <img class="card-img" src=".../100px270/#55595c:#373a3c/text:Card image" alt="Card image">
  <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>

รูปแบบการ์ด

การ์ดมีตัวเลือกมากมายสำหรับปรับแต่งพื้นหลัง เส้นขอบ และสี

พื้นหลังและสี

ใช้ยูทิลิตี้ข้อความและพื้นหลังเพื่อเปลี่ยนรูปลักษณ์ของการ์ด

หัวข้อ
ชื่อบัตรหลัก

ตัวอย่างข้อความสั้นๆ เพื่อสร้างจากชื่อการ์ดและประกอบขึ้นเป็นเนื้อหาในการ์ดจำนวนมาก

หัวข้อ
ชื่อบัตรรอง

ตัวอย่างข้อความสั้นๆ เพื่อสร้างจากชื่อการ์ดและประกอบขึ้นเป็นเนื้อหาในการ์ดจำนวนมาก

หัวข้อ
ชื่อการ์ดความสำเร็จ

ตัวอย่างข้อความสั้นๆ เพื่อสร้างจากชื่อการ์ดและประกอบขึ้นเป็นเนื้อหาในการ์ดจำนวนมาก

หัวข้อ
ชื่อการ์ดอันตราย

ตัวอย่างข้อความสั้นๆ เพื่อสร้างจากชื่อการ์ดและประกอบขึ้นเป็นเนื้อหาในการ์ดจำนวนมาก

หัวข้อ
ชื่อการ์ดคำเตือน

ตัวอย่างข้อความสั้นๆ เพื่อสร้างจากชื่อการ์ดและประกอบขึ้นเป็นเนื้อหาในการ์ดจำนวนมาก

หัวข้อ
ชื่อการ์ดข้อมูล

ตัวอย่างข้อความสั้นๆ เพื่อสร้างจากชื่อการ์ดและประกอบขึ้นเป็นเนื้อหาในการ์ดจำนวนมาก

หัวข้อ
ชื่อการ์ดไฟ

ตัวอย่างข้อความสั้นๆ เพื่อสร้างจากชื่อการ์ดและประกอบขึ้นเป็นเนื้อหาในการ์ดจำนวนมาก

หัวข้อ
ชื่อการ์ดมืด

ตัวอย่างข้อความสั้นๆ เพื่อสร้างจากชื่อการ์ดและประกอบขึ้นเป็นเนื้อหาในการ์ดจำนวนมาก

<div class="card text-white bg-primary mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Primary card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-white bg-secondary mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Secondary card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-white bg-success mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Success card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-white bg-danger mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Danger card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-white bg-warning mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Warning card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-white bg-info mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Info card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card bg-light mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Light card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-white bg-dark mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Dark card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
ถ่ายทอดความหมายสู่เทคโนโลยีอำนวยความสะดวก

การใช้สีเพื่อเพิ่มความหมายเป็นเพียงการแสดงภาพเท่านั้น ซึ่งจะไม่ถูกถ่ายทอดไปยังผู้ใช้เทคโนโลยีอำนวยความสะดวก เช่น โปรแกรมอ่านหน้าจอ ตรวจสอบให้แน่ใจว่าข้อมูลที่แสดงด้วยสีนั้นชัดเจนจากเนื้อหา (เช่น ข้อความที่มองเห็นได้) หรือรวมไว้ด้วยวิธีการอื่น เช่น ข้อความเพิ่มเติมที่ซ่อนอยู่ใน.sr-onlyชั้นเรียน

ชายแดน

ใช้ยูทิลิตี้เส้นขอบเพื่อเปลี่ยนเฉพาะborder-colorการ์ด โปรดทราบว่าคุณสามารถใส่.text-{color}คลาสบนพาเรน.cardต์หรือส่วนย่อยของเนื้อหาของการ์ดดังที่แสดงด้านล่าง

หัวข้อ
ชื่อบัตรหลัก

ตัวอย่างข้อความสั้นๆ เพื่อสร้างจากชื่อการ์ดและประกอบขึ้นเป็นเนื้อหาในการ์ดจำนวนมาก

หัวข้อ
ชื่อบัตรรอง

ตัวอย่างข้อความสั้นๆ เพื่อสร้างจากชื่อการ์ดและประกอบขึ้นเป็นเนื้อหาในการ์ดจำนวนมาก

หัวข้อ
ชื่อการ์ดความสำเร็จ

ตัวอย่างข้อความสั้นๆ เพื่อสร้างจากชื่อการ์ดและประกอบขึ้นเป็นเนื้อหาในการ์ดจำนวนมาก

หัวข้อ
ชื่อการ์ดอันตราย

ตัวอย่างข้อความสั้นๆ เพื่อสร้างจากชื่อการ์ดและประกอบขึ้นเป็นเนื้อหาในการ์ดจำนวนมาก

หัวข้อ
ชื่อการ์ดคำเตือน

ตัวอย่างข้อความสั้นๆ เพื่อสร้างจากชื่อการ์ดและประกอบขึ้นเป็นเนื้อหาในการ์ดจำนวนมาก

หัวข้อ
ชื่อการ์ดข้อมูล

ตัวอย่างข้อความสั้นๆ เพื่อสร้างจากชื่อการ์ดและประกอบขึ้นเป็นเนื้อหาในการ์ดจำนวนมาก

หัวข้อ
ชื่อการ์ดไฟ

ตัวอย่างข้อความสั้นๆ เพื่อสร้างจากชื่อการ์ดและประกอบขึ้นเป็นเนื้อหาในการ์ดจำนวนมาก

หัวข้อ
ชื่อการ์ดมืด

ตัวอย่างข้อความสั้นๆ เพื่อสร้างจากชื่อการ์ดและประกอบขึ้นเป็นเนื้อหาในการ์ดจำนวนมาก

<div class="card border-primary mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body text-primary">
    <h5 class="card-title">Primary card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-secondary mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body text-secondary">
    <h5 class="card-title">Secondary card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-success mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body text-success">
    <h5 class="card-title">Success card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-danger mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body text-danger">
    <h5 class="card-title">Danger card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-warning mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body text-warning">
    <h5 class="card-title">Warning card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-info mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body text-info">
    <h5 class="card-title">Info card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-light mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Light card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-dark mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body text-dark">
    <h5 class="card-title">Dark card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>

ยูทิลิตี้ผสม

คุณยังสามารถเปลี่ยนเส้นขอบบนส่วนหัวและส่วนท้ายของการ์ดได้ตามต้องการ หรือแม้แต่ลบออกbackground-colorด้วย.bg-transparent.

หัวข้อ
ชื่อการ์ดความสำเร็จ

ตัวอย่างข้อความสั้นๆ เพื่อสร้างจากชื่อการ์ดและประกอบขึ้นเป็นเนื้อหาในการ์ดจำนวนมาก

<div class="card border-success mb-3" style="max-width: 18rem;">
  <div class="card-header bg-transparent border-success">Header</div>
  <div class="card-body text-success">
    <h5 class="card-title">Success card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
  <div class="card-footer bg-transparent border-success">Footer</div>
</div>

แบบการ์ด

นอกเหนือจากการจัดรูปแบบเนื้อหาภายในการ์ด Bootstrap ยังมีตัวเลือกสองสามตัวสำหรับการจัดวางชุดการ์ด ในขณะนี้ ตัวเลือกการออกแบบเหล่านี้ยังไม่ตอบสนอง

กลุ่มบัตร

ใช้กลุ่มการ์ดเพื่อแสดงการ์ดเป็นองค์ประกอบเดียวที่แนบด้วยคอลัมน์ที่มีความกว้างและความสูงเท่ากัน กลุ่มบัตรใช้display: flex;เพื่อให้ได้ขนาดที่เท่ากัน

100%x180
ชื่อการ์ด

นี่คือการ์ดที่กว้างขึ้นพร้อมข้อความสนับสนุนด้านล่างเพื่อนำไปสู่เนื้อหาเพิ่มเติมโดยธรรมชาติ เนื้อหานี้ยาวไปหน่อย

อัพเดทล่าสุดเมื่อ 3 นาทีที่แล้ว

100%x180
ชื่อการ์ด

การ์ดใบนี้มีข้อความสนับสนุนด้านล่างเพื่อนำไปสู่เนื้อหาเพิ่มเติมโดยธรรมชาติ

อัพเดทล่าสุดเมื่อ 3 นาทีที่แล้ว

100%x180
ชื่อการ์ด

นี่คือการ์ดที่กว้างขึ้นพร้อมข้อความสนับสนุนด้านล่างเพื่อนำไปสู่เนื้อหาเพิ่มเติมโดยธรรมชาติ การ์ดใบนี้มีเนื้อหาที่ยาวกว่าการ์ดใบแรกที่แสดงให้เห็นว่ามีความสูงเท่ากัน

อัพเดทล่าสุดเมื่อ 3 นาทีที่แล้ว

<div class="card-group">
  <div class="card">
    <img class="card-img-top" src=".../100px180/" alt="Card image cap">
    <div class="card-body">
      <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"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card">
    <img class="card-img-top" src=".../100px180/" alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card">
    <img class="card-img-top" src=".../100px180/" alt="Card image cap">
    <div class="card-body">
      <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 card has even longer content than the first to show that equal height action.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
</div>

เมื่อใช้กลุ่มการ์ดที่มีส่วนท้าย เนื้อหาจะเรียงกันโดยอัตโนมัติ

100%x180
ชื่อการ์ด

นี่คือการ์ดที่กว้างขึ้นพร้อมข้อความสนับสนุนด้านล่างเพื่อนำไปสู่เนื้อหาเพิ่มเติมโดยธรรมชาติ เนื้อหานี้ยาวไปหน่อย

100%x180
ชื่อการ์ด

การ์ดใบนี้มีข้อความสนับสนุนด้านล่างเพื่อนำไปสู่เนื้อหาเพิ่มเติมโดยธรรมชาติ

100%x180
ชื่อการ์ด

นี่คือการ์ดที่กว้างขึ้นพร้อมข้อความสนับสนุนด้านล่างเพื่อนำไปสู่เนื้อหาเพิ่มเติมโดยธรรมชาติ การ์ดใบนี้มีเนื้อหาที่ยาวกว่าการ์ดใบแรกที่แสดงให้เห็นว่ามีความสูงเท่ากัน

<div class="card-group">
  <div class="card">
    <img class="card-img-top" src=".../100px180/" alt="Card image cap">
    <div class="card-body">
      <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>
    </div>
    <div class="card-footer">
      <small class="text-muted">Last updated 3 mins ago</small>
    </div>
  </div>
  <div class="card">
    <img class="card-img-top" src=".../100px180/" alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Last updated 3 mins ago</small>
    </div>
  </div>
  <div class="card">
    <img class="card-img-top" src=".../100px180/" alt="Card image cap">
    <div class="card-body">
      <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 card has even longer content than the first to show that equal height action.</p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Last updated 3 mins ago</small>
    </div>
  </div>
</div>

สำรับไพ่

ต้องการชุดการ์ดความกว้างและความสูงที่เท่ากันซึ่งไม่ได้ต่อกันหรือไม่? ใช้สำรับไพ่

100%x200
ชื่อการ์ด

การ์ดนี้เป็นการ์ดที่ยาวกว่าพร้อมข้อความสนับสนุนด้านล่างซึ่งนำไปสู่เนื้อหาเพิ่มเติมโดยธรรมชาติ เนื้อหานี้ยาวไปหน่อย

อัพเดทล่าสุดเมื่อ 3 นาทีที่แล้ว

100%x200
ชื่อการ์ด

การ์ดใบนี้มีข้อความสนับสนุนด้านล่างเพื่อนำไปสู่เนื้อหาเพิ่มเติมโดยธรรมชาติ

อัพเดทล่าสุดเมื่อ 3 นาทีที่แล้ว

100%x200
ชื่อการ์ด

นี่คือการ์ดที่กว้างขึ้นพร้อมข้อความสนับสนุนด้านล่างเพื่อนำไปสู่เนื้อหาเพิ่มเติมโดยธรรมชาติ การ์ดใบนี้มีเนื้อหาที่ยาวกว่าการ์ดใบแรกที่แสดงให้เห็นว่ามีความสูงเท่ากัน

อัพเดทล่าสุดเมื่อ 3 นาทีที่แล้ว

<div class="card-deck">
  <div class="card">
    <img class="card-img-top" src=".../100px200/" alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a longer 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"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card">
    <img class="card-img-top" src=".../100px200/" alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card">
    <img class="card-img-top" src=".../100px200/" alt="Card image cap">
    <div class="card-body">
      <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 card has even longer content than the first to show that equal height action.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
</div>

เช่นเดียวกับกลุ่มไพ่ ส่วนท้ายของไพ่ในสำรับจะเรียงกันโดยอัตโนมัติ

100%x180
ชื่อการ์ด

นี่คือการ์ดที่กว้างขึ้นพร้อมข้อความสนับสนุนด้านล่างเพื่อนำไปสู่เนื้อหาเพิ่มเติมโดยธรรมชาติ เนื้อหานี้ยาวไปหน่อย

100%x180
ชื่อการ์ด

การ์ดใบนี้มีข้อความสนับสนุนด้านล่างเพื่อนำไปสู่เนื้อหาเพิ่มเติมโดยธรรมชาติ

100%x180
ชื่อการ์ด

นี่คือการ์ดที่กว้างขึ้นพร้อมข้อความสนับสนุนด้านล่างเพื่อนำไปสู่เนื้อหาเพิ่มเติมโดยธรรมชาติ การ์ดใบนี้มีเนื้อหาที่ยาวกว่าการ์ดใบแรกที่แสดงให้เห็นว่ามีความสูงเท่ากัน

<div class="card-deck">
  <div class="card">
    <img class="card-img-top" src=".../100px180/" alt="Card image cap">
    <div class="card-body">
      <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>
    </div>
    <div class="card-footer">
      <small class="text-muted">Last updated 3 mins ago</small>
    </div>
  </div>
  <div class="card">
    <img class="card-img-top" src=".../100px180/" alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Last updated 3 mins ago</small>
    </div>
  </div>
  <div class="card">
    <img class="card-img-top" src=".../100px180/" alt="Card image cap">
    <div class="card-body">
      <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 card has even longer content than the first to show that equal height action.</p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Last updated 3 mins ago</small>
    </div>
  </div>
</div>

คอลัมน์การ์ด

การ์ดสามารถจัดเป็น คอลัมน์แบบ Masonryด้วย CSS ได้โดยการใส่ไว้ใน.card-columns. การ์ดสร้างขึ้นด้วยcolumnคุณสมบัติ CSS แทน flexbox เพื่อให้จัดตำแหน่งได้ง่ายขึ้น ไพ่เรียงจากบนลงล่างและซ้ายไปขวา

หัวขึ้น! ไมล์สะสมของคุณกับคอลัมน์การ์ดอาจแตกต่างกันไป เพื่อป้องกันไม่ให้ไพ่แตกในคอลัมน์ เราต้องตั้งค่าให้display: inline-blockเป็น การ์ดที่ column-break-inside: avoidยังไม่สามารถกันกระสุนได้

100%x160
ชื่อการ์ดที่ขึ้นบรรทัดใหม่

การ์ดนี้เป็นการ์ดที่ยาวกว่าพร้อมข้อความสนับสนุนด้านล่างซึ่งนำไปสู่เนื้อหาเพิ่มเติมโดยธรรมชาติ เนื้อหานี้ยาวไปหน่อย

Lorem ipsum dolor sit amet, consectetur adipiscing elit. โลเรม อิปซัม โดลอร์ จำนวนเต็ม posuere erat ante

คนที่มีชื่อเสียงในSource Title
100%x160
ชื่อการ์ด

การ์ดใบนี้มีข้อความสนับสนุนด้านล่างเพื่อนำไปสู่เนื้อหาเพิ่มเติมโดยธรรมชาติ

อัพเดทล่าสุดเมื่อ 3 นาทีที่แล้ว

Lorem ipsum dolor sit amet, consectetur adipiscing elit. โลเรม อิปซัม โดลอร์ จำนวนเต็ม posuere erat

คนที่มีชื่อเสียงในSource Title
ชื่อการ์ด

การ์ดใบนี้มีชื่อเรื่องปกติและข้อความย่อหน้าด้านล่าง

อัพเดทล่าสุดเมื่อ 3 นาทีที่แล้ว

100%x260

Lorem ipsum dolor sit amet, consectetur adipiscing elit. โลเรม อิปซัม โดลอร์ จำนวนเต็ม posuere erat ante

คนที่มีชื่อเสียงในSource Title
ชื่อการ์ด

นี่คือการ์ดอีกใบที่มีชื่อและข้อความสนับสนุนด้านล่าง การ์ดใบนี้มีเนื้อหาเพิ่มเติมเพื่อทำให้โดยรวมสูงขึ้นเล็กน้อย

อัพเดทล่าสุดเมื่อ 3 นาทีที่แล้ว

<div class="card-columns">
  <div class="card">
    <img class="card-img-top" src=".../100px160/" alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title that wraps to a new line</h5>
      <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    </div>
  </div>
  <div class="card p-3">
    <blockquote class="blockquote mb-0 card-body">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
      <footer class="blockquote-footer">
        <small class="text-muted">
          Someone famous in <cite title="Source Title">Source Title</cite>
        </small>
      </footer>
    </blockquote>
  </div>
  <div class="card">
    <img class="card-img-top" src=".../100px160/" alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card bg-primary text-white text-center p-3">
    <blockquote class="blockquote mb-0">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.</p>
      <footer class="blockquote-footer">
        <small>
          Someone famous in <cite title="Source Title">Source Title</cite>
        </small>
      </footer>
    </blockquote>
  </div>
  <div class="card text-center">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This card has a regular title and short paragraphy of text below it.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card">
    <img class="card-img" src=".../100px260/" alt="Card image">
  </div>
  <div class="card p-3 text-right">
    <blockquote class="blockquote mb-0">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
      <footer class="blockquote-footer">
        <small class="text-muted">
          Someone famous in <cite title="Source Title">Source Title</cite>
        </small>
      </footer>
    </blockquote>
  </div>
  <div class="card">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is another card with title and supporting text below. This card has some additional content to make it slightly taller overall.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
</div>

คอลัมน์การ์ดสามารถขยายและปรับแต่งได้ด้วยรหัสเพิ่มเติม ด้านล่างนี้คือส่วนขยายของ.card-columnsคลาสที่ใช้ CSS เดียวกันกับที่เราใช้—คอลัมน์ CSS— เพื่อสร้างชุดของระดับที่ตอบสนองสำหรับการเปลี่ยนจำนวนคอลัมน์

.card-columns {
  @include media-breakpoint-only(lg) {
    column-count: 4;
  }
  @include media-breakpoint-only(xl) {
    column-count: 5;
  }
}