แต่ยังใช้หลัการเหมือนเดิม ที่มีส่วน header , ส่วน body และ ส่วน footer
ตัวอย่าง
โค้ด: เลือกทั้งหมด
<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>
</div>
</div>
โค้ด: เลือกทั้งหมด
<div class="card" style="width: 18rem;">
<img class="card-img-top" src="img1.jpg" alt="railway">
<div class="card-body">
<p class="card-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard
dummy text ever since the 1500s.</p>
</div>
</div>
เช่น เพิ่ม Navigation หรือ ลิงค์ ได้
โค้ด: เลือกทั้งหมด
<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>
".success" เพื่อให้เป็นสีเขียว
".primary" เพื่อให้เป็นน้ำเงิน
".danger" เพื่อให้เป็นสีแดง
".warning" เพื่อให้เป็นสีเหลือง
ตัวอย่างโค้ดให้เป็นสีน้ำเงิน
โค้ด: เลือกทั้งหมด
<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>
ช่องทางการศึกษาเพิ่มเติมข่าวที่น่าสนใจเกี่ยวกับ : bootstrap
-รูปแบบของ Buttons
-รูปแบบของ Dropdowns