การ์ด

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

ในหน้านี้

เกี่ยวกับ

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

ตัวอย่าง

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

Below is an example of a basic card with mixed content and a fixed width. Cards have no fixed width to start, so they’ll naturally fill the full width of its parent element. This is easily customized with our various sizing options.

Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere

html

<div class="card" style="width: 18rem;">
  <img src="..." class="card-img-top" alt="...">
  <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>

Content types

Cards support a wide variety of content, including images, text, list groups, links, and more. Below are examples of what’s supported.

Body

The building block of a card is the .card-body. Use it whenever you need a padded section within a card.

This is some text within a card body.

html

<div class="card">
  <div class="card-body">
    This is some text within a card body.
  </div>
</div>

Titles, text, and links

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

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

ชื่อการ์ด

คำบรรยายการ์ด

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

ลิงค์การ์ด ลิงค์ อื่น

html

<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 มาตรฐานได้

html

<div class="card" style="width: 18rem;">
  <img src="..." class="card-img-top" alt="...">
  <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>

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

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

รายการ
รายการที่สอง
รายการที่สาม

html

<div class="card" style="width: 18rem;">
  <ul class="list-group list-group-flush">
    <li class="list-group-item">An item</li>
    <li class="list-group-item">A second item</li>
    <li class="list-group-item">A third item</li>
  </ul>
</div>

จุดเด่น

รายการ
รายการที่สอง
รายการที่สาม

html

<div class="card" style="width: 18rem;">
  <div class="card-header">
    Featured
  </div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item">An item</li>
    <li class="list-group-item">A second item</li>
    <li class="list-group-item">A third item</li>
  </ul>
</div>

รายการ
รายการที่สอง
รายการที่สาม

ส่วนท้ายของการ์ด

html

<div class="card" style="width: 18rem;">
  <ul class="list-group list-group-flush">
    <li class="list-group-item">An item</li>
    <li class="list-group-item">A second item</li>
    <li class="list-group-item">A third item</li>
  </ul>
  <div class="card-footer">
    Card footer
  </div>
</div>

อ่างล้างจาน

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

ชื่อการ์ด

รายการ
รายการที่สอง
รายการที่สาม

ลิงค์การ์ด ลิงค์ อื่น

html

<div class="card" style="width: 18rem;">
  <img src="..." class="card-img-top" alt="...">
  <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">An item</li>
    <li class="list-group-item">A second item</li>
    <li class="list-group-item">A third item</li>
  </ul>
  <div class="card-body">
    <a href="#" class="card-link">Card link</a>
    <a href="#" class="card-link">Another link</a>
  </div>
</div>

หัวกระดาษและท้ายกระดาษ

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

จุดเด่น

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

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

ไปที่ไหนสักแห่ง

html

<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*>องค์ประกอบ

จุดเด่น

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

ไปที่ไหนสักแห่ง

html

<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>

อ้าง

ใบเสนอราคาที่รู้จักกันดี ซึ่งมีอยู่ในองค์ประกอบ blockquote

คนที่มีชื่อเสียงใน Source Title

html

<div class="card">
  <div class="card-header">
    Quote
  </div>
  <div class="card-body">
    <blockquote class="blockquote mb-0">
      <p>A well-known quote, contained in a blockquote element.</p>
      <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
    </blockquote>
  </div>
</div>

จุดเด่น

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

ไปที่ไหนสักแห่ง

2 วันที่ผ่านมา

html

<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 ของกริด หรือยูทิลิตี้

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

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

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

ไปที่ไหนสักแห่ง

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

ไปที่ไหนสักแห่ง

html

<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>

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

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

ชื่อการ์ด

ปุ่ม

ชื่อการ์ด

ปุ่ม

html

<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 ที่กำหนดเองในสไตล์ชีตของคุณหรือเป็นสไตล์อินไลน์เพื่อกำหนดความกว้าง

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

ไปที่ไหนสักแห่ง

html

<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>

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

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

html

<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-end" 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

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

ไปที่ไหนสักแห่ง

html

<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" aria-current="true" 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">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>

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

ไปที่ไหนสักแห่ง

html

<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">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>

รูปภาพ

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

แคปรูปภาพ

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

ชื่อการ์ด

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

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

ชื่อการ์ด

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

html

<div class="card mb-3">
  <img src="..." class="card-img-top" alt="...">
  <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 src="..." class="card-img-bottom" alt="...">
</div>

ภาพซ้อนทับ

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

ชื่อการ์ด

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

html

<div class="card text-bg-dark">
  <img src="..." 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"><small>Last updated 3 mins ago</small></p>
  </div>
</div>

โปรดทราบว่าเนื้อหาไม่ควรเกินความสูงของภาพ หากเนื้อหามีขนาดใหญ่กว่ารูปภาพ เนื้อหาจะแสดงนอกรูปภาพ

แนวนอน

ด้วยการใช้คลาสกริดและยูทิลิตี้ร่วมกัน คุณสามารถสร้างการ์ดในแนวนอนในลักษณะที่เหมาะกับอุปกรณ์พกพาและตอบสนองได้ ในตัวอย่างด้านล่าง เราเอารางน้ำกริดออก.g-0และใช้.col-md-*คลาสเพื่อทำให้การ์ดอยู่ในแนวนอนที่mdจุดพัก อาจจำเป็นต้องปรับเปลี่ยนเพิ่มเติมขึ้นอยู่กับเนื้อหาในบัตรของคุณ

ชื่อการ์ด

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

html

<div class="card mb-3" style="max-width: 540px;">
  <div class="row g-0">
    <div class="col-md-4">
      <img src="..." class="img-fluid rounded-start" alt="...">
    </div>
    <div class="col-md-8">
      <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>
</div>

รูปแบบการ์ด

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

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

เพิ่มใน v5.2.0

ตั้งค่า a background-colorด้วยพื้นหน้าตัดกันcolorกับผู้ช่วยของเรา .text-bg-{color}ก่อนหน้านี้จำเป็นต้องจับคู่ตัวเลือกของคุณ.text-{color}และ.bg-{color}ยูทิลิตี้สำหรับการจัดสไตล์ด้วยตนเอง ซึ่งคุณยังอาจใช้หากต้องการ

หัวข้อ

ชื่อบัตรหลัก

หัวข้อ

ชื่อบัตรรอง

หัวข้อ

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

หัวข้อ

ชื่อการ์ดอันตราย

หัวข้อ

ชื่อการ์ดคำเตือน

หัวข้อ

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

หัวข้อ

ชื่อการ์ดไฟ

หัวข้อ

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

html

<div class="card text-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-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-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-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-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-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 text-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-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>

ถ่ายทอดความหมายสู่เทคโนโลยีอำนวยความสะดวก

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

ชายแดน

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

หัวข้อ

ชื่อบัตรหลัก

หัวข้อ

ชื่อบัตรรอง

หัวข้อ

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

หัวข้อ

ชื่อการ์ดอันตราย

หัวข้อ

ชื่อการ์ดคำเตือน

หัวข้อ

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

หัวข้อ

ชื่��การ์ดไฟ

หัวข้อ

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

html

<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">
    <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">
    <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.

หัวข้อ

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

ส่วนท้าย

html

<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;เพื่อติดให้มีขนาดเท่ากันโดยเริ่มจากsmจุดพัก

ชื่อการ์ด

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

ชื่อการ์ด

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

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

ชื่อการ์ด

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

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

html

<div class="card-group">
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <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 src="..." class="card-img-top" alt="...">
    <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 src="..." class="card-img-top" alt="...">
    <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>

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

ชื่อการ์ด

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

ชื่อการ์ด

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

ชื่อการ์ด

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

html

<div class="card-group">
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <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 src="..." class="card-img-top" alt="...">
    <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 src="..." class="card-img-top" alt="...">
    <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>

การ์ดกริด

ใช้ระบบกริด Bootstrap และ.row-colsคลาสเพื่อควบคุมจำนวนคอลัมน์กริด (ล้อมรอบการ์ดของคุณ) ที่คุณแสดงต่อแถว ตัวอย่างเช่น นี่คือ.row-cols-1การจัดวางไพ่ในคอลัมน์เดียว และ.row-cols-md-2แยกไพ่สี่ใบให้มีความกว้างเท่ากันในหลายแถว จากเบรกพอยต์ขนาดกลางขึ้นไป

ชื่อการ์ด

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

ชื่อการ์ด

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

ชื่อการ์ด

html

<div class="row row-cols-1 row-cols-md-2 g-4">
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <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>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <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>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <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.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <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>
      </div>
    </div>
  </div>
</div>

เปลี่ยนเป็น.row-cols-3และคุณจะเห็นการห่อไพ่ใบที่สี่

ชื่อการ์ด

html

<div class="row row-cols-1 row-cols-md-3 g-4">
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <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>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <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>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <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.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <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>
      </div>
    </div>
  </div>
</div>

เมื่อต้องการความสูงเท่ากัน ให้เพิ่มลง.h-100ในการ์ด หากคุณต้องการความสูงเท่ากันโดยค่าเริ่มต้น คุณสามารถตั้งค่า$card-height: 100%ใน Sass

ชื่อการ์ด

นี่คือการ์ดสั้น

ชื่อการ์ด

html

<div class="row row-cols-1 row-cols-md-3 g-4">
  <div class="col">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <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>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a short card.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <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.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <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>
      </div>
    </div>
  </div>
</div>

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

ชื่อการ์ด

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

ชื่อการ์ด

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

ชื่อการ์ด

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.

Last updated 3 mins ago

html

<div class="row row-cols-1 row-cols-md-3 g-4">
  <div class="col">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <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>
  <div class="col">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <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>
  <div class="col">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <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>
</div>

Masonry

In v4 we used a CSS-only technique to mimic the behavior of Masonry-like columns, but this technique came with lots of unpleasant side effects. If you want to have this type of layout in v5, you can just make use of Masonry plugin. Masonry is not included in Bootstrap, but we’ve made a demo example to help you get started.

CSS

Variables

Added in v5.2.0

As part of Bootstrap’s evolving CSS variables approach, cards now use local CSS variables on .card for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.

  --#{$prefix}card-spacer-y: #{$card-spacer-y};
  --#{$prefix}card-spacer-x: #{$card-spacer-x};
  --#{$prefix}card-title-spacer-y: #{$card-title-spacer-y};
  --#{$prefix}card-border-width: #{$card-border-width};
  --#{$prefix}card-border-color: #{$card-border-color};
  --#{$prefix}card-border-radius: #{$card-border-radius};
  --#{$prefix}card-box-shadow: #{$card-box-shadow};
  --#{$prefix}card-inner-border-radius: #{$card-inner-border-radius};
  --#{$prefix}card-cap-padding-y: #{$card-cap-padding-y};
  --#{$prefix}card-cap-padding-x: #{$card-cap-padding-x};
  --#{$prefix}card-cap-bg: #{$card-cap-bg};
  --#{$prefix}card-cap-color: #{$card-cap-color};
  --#{$prefix}card-height: #{$card-height};
  --#{$prefix}card-color: #{$card-color};
  --#{$prefix}card-bg: #{$card-bg};
  --#{$prefix}card-img-overlay-padding: #{$card-img-overlay-padding};
  --#{$prefix}card-group-margin: #{$card-group-margin};

Sass variables

$card-spacer-y:                     $spacer;
$card-spacer-x:                     $spacer;
$card-title-spacer-y:               $spacer * .5;
$card-border-width:                 $border-width;
$card-border-color:                 var(--#{$prefix}border-color-translucent);
$card-border-radius:                $border-radius;
$card-box-shadow:                   null;
$card-inner-border-radius:          subtract($card-border-radius, $card-border-width);
$card-cap-padding-y:                $card-spacer-y * .5;
$card-cap-padding-x:                $card-spacer-x;
$card-cap-bg:                       rgba($black, .03);
$card-cap-color:                    null;
$card-height:                       null;
$card-color:                        null;
$card-bg:                           $white;
$card-img-overlay-padding:          $spacer;
$card-group-margin:                 $grid-gutter-width * .5;

การ์ด

เกี่ยวกับ

ตัวอย่าง

Card title

Content types

Body

Titles, text, and links

ชื่อการ์ด

คำบรรยายการ์ด

รูปภาพ

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

อ่างล้างจาน

ชื่อการ์ด

หัวกระดาษและท้ายกระดาษ

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

จุดเด่น

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

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

ขนาด

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

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

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

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

ชื่อการ์ด

ชื่อการ์ด

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

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

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

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

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

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

การนำทาง

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

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

รูปภาพ

แคปรูปภาพ

ชื่อการ์ด

ชื่อการ์ด

ภาพซ้อนทับ

ชื่อการ์ด

แนวนอน

ชื่อการ์ด

รูปแบบการ์ด

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

ชื่อบัตรหลัก

ชื่อบัตรรอง

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

ชื่อการ์ดอันตราย

ชื่อการ์ดคำเตือน

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

ชื่อการ์ดไฟ

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

ถ่ายทอดความหมายสู่เทคโนโลยีอำนวยความสะดวก

ชายแดน

ชื่อบัตรหลัก

ชื่อบัตรรอง

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

ชื่อการ์ดอันตราย

ชื่อการ์ดคำเตือน

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

ชื่���การ์ดไฟ

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

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

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

แบบการ์ด

กลุ่มบัตร

ชื่อการ์ด

ชื่อการ์ด

ชื่อการ์ด

ชื่อการ์ด

ชื่อการ์ด

ชื่อการ์ด

การ์ดกริด

ชื่อการ์ด

ชื่อการ์ด

ชื่อการ์ด

ชื่อการ์ด

ชื่อการ์ด

ชื่อการ์ด

ชื่อการ์ด

ชื่��การ์ดไฟ