Bootstrap Card Component: คู่มือครบวงจร

Bootstrap Cards

Bootstrap card เป็นหนึ่งใน components ยอดนิยมที่สุด และมีเหตุผลที่ชัดเจน มันทำหน้าที่เป็น flexible media container พร้อม preset styling และ formatting ที่ดี

Card content สามารถเป็นอะไรก็ได้: text, images, links, buttons, lists และยังสามารถมี header และ footer ได้

พื้นฐาน Bootstrap Card

Bootstrap cards สร้างด้วย flexbox และขยายความกว้างเต็ม container โดย default หากต้องการกำหนดความกว้างเฉพาะ ใช้ Bootstrap width utility class บน card element เอง หรือ wrap card ใน container element และกำหนดขนาดด้วย column classes

มาดูตัวอย่าง:

<div class="container-fluid bg-light"> <div class="card p-4 m-4">card 1</div> <div class="card p-4 m-4">card 2</div> <div class="card p-4 m-4">card 3</div> <div class="card-group m-4"> <div class="card p-4">card 4</div> <div class="card p-4">card 5</div> <div class="card p-4">card 6</div> </div> <div class="card-deck m-4"> <div class="card p-4 m-4">card 7</div> <div class="card p-4 m-4">card 8</div> <div class="card p-4 m-4">card 9</div> </div> </div>

กฎข้อขมือของ Bootstrap คือ wrap ทุกอย่างภายใน ด้วย CONTAINER element ทำให้ทุกอย่าง responsive จะปรับขนาดและ layout ตาม screen size

ตัวอย่างใช้ CONTAINER-FLUID ทำให้ element กว้างเต็มหน้าจอ ต่างจาก CONTAINER ที่เพิ่ม horizontal margin และจัดกึ่งกลาง

ชุดแรก 3 cards ไม่มี parent element นอกจาก container จึงมี default behavior จัดเรียงจากบนลงล่าง:

p-4 และ m-4 ในโค้ดแทน padding ทุกด้าน 1.5 rem และ margin ทุกด้าน 1.5 rem ตามลำดับ

ค่า utility sizing ของ Bootstrap:

0 = 0 rem
1 = 0.25 rem
2 = 0.5 rem
3 = 1 rem
4 = 1.5 rem
5 = 3 rem

Cards 4, 5, 6 อยู่ใน

ที่มี class CARD-GROUP พฤติกรรมเหมือน BTN-GROUP รวมกันใน horizontal flexbox layout พร้อม rounded border รอบ group

Cards 7, 8, 9 อยู่ใน

class CARD-DECK รวมใน horizontal flexbox แต่คั่นแยกเป็น element แยกต่างหาก

การกำหนดขนาด Card เอง

ก่อนทำ manually sized cards เรียนรู้ layout และ breakpoint system ของ Bootstrap

Bootstrap Columns

Bootstrap แบ่งหน้าจอเป็น 12 columns สำหรับ layout development

Demo ระบาด visualization:

<div class="row"> <div class="col border p-5">column 1</div> <div class="col border p-5">column 2</div> <div class="col border p-5">column 3</div> <div class="col border p-5">column 4</div> <div class="col border p-5">column 5</div> <div class="col border p-5">column 6</div> <div class="col border p-5">column 7</div> <div class="col border p-5">column 8</div> <div class="col border p-5">column 9</div> <div class="col border p-5">column 10</div> <div class="col border p-5">column 11</div> <div class="col border p-5">column 12</div> </div>

ก่อนอื่นมี wrapper สำหรับ columns เรียกว่า ROW เป็น flexbox container สำหรับ columns ประกาศขนาด element ด้วย COL-SCREEN SIZE BREAKPOINT-NUMBER OF COLUMNS TO OCCUPY

ตัวอย่างข้างต้นไม่ได้ระบุ breakpoint เพราะต้องการขนาดนี้ทุก screen size และไม่ระบุจำนวน columns เพราะ default เป็น COL-1 ได้ 12 columns ตามธรรมชาติ:

Bootstrap Breakpoints:

Bootstrap เป็น mobile-first framework หมายถึงให้ priority mobile layouts ก่อน แล้วค่อยขยายขึ้นไป Classes ทั้งหมดมีผลจาก breakpoint ที่ระบุขึ้นไป

Extra small เป็น default การละเว้น breakpoint เช่น P-4 เทียบเท่า P-XS-4 ใช้ได้ตั้งแต่ XS ขึ้นไป

คำแปล: หากต้องการ rule ที่มีผลทุก screen ให้ละเว้น breakpoint

หากต้องการลด padding จากตัวอย่างเป็น 0.5 rem จาก medium screen ขึ้นไป ให้เพิ่ม class P-MD-2 บน element เดียวกัน

ค่า breakpoint ในพิกเซล:

xs – screen size ต่ำกว่า 576 pixels (default)
sm – screen size 576 pixels ขึ้นไป
md – screen size 768 pixels ขึ้นไป
lg – screen size 992 pixels ขึ้นไป
xl – screen size 1200 pixels ขึ้นไป

มาใช้สร้าง layout ที่เปลี่ยนตาม screen size:

<div class="row"> <div class="col-5 col-md-7"> <div class="card p-4">left column card</div> <div class="card p-4">left column card</div> <div class="card p-4">left column card</div> <div class="card p-4">left column card</div> </div> <div class="col-7 col-md-5"> <div class="card p-4">right column card</div> <div class="card p-4">right column card</div> <div class="card p-4">right column card</div> <div class="card p-4">right column card</div> </div> </div>

อีกครั้ง มี ROW wrapper และ

ตั้งค่า COL-5 COL-MD-7 หมายถึงใช้ 5 columns ตั้งแต่หน้าจอเล็กสุด แต่เมื่อถึง medium screen จะเปลี่ยนเป็น 7 columns ต่อมา

COL-7 COL-MD-5 เติม cards ไปด้วย สกรีนชอตแสดงการเปลี่ยนแปลง:

767 pixels width: left div กว้าง 5 columns, right 7 columns

เพิ่ม 1 pixel เป็น 768: สลับกันกลับกัน:

Card Subcomponents

มาใช้ subcomponents ของ cards ให้เต็มที่

Card พร้อม Header และ Footer

<div class="card"> <div class="card-header text-center p-4">I'm a header</div> <div class="card-body"> <p class="card-text"> first paragraph </p> <p class="card-text"> second paragraph </p> <a href="#" class="card-link">Link 1</a> <a href="#" class="card-link">Link 2</a> <a href="#" class="card-link">Link 3</a> </div> <div class="card-footer"> Footer of a Bootstrap card </div> </div>

สร้าง card พร้อม centered card header ที่มี border และพื้นหลังสีเทาอ่อน และ card body ใต้ header ให้ padding ใน body มี paragraphs พร้อม CARD-TEXT สำหรับ alignment และ links พร้อม CARD-LINK จัดเรียงติดกัน สุดท้าย card footer สไตล์เหมือน header แต่ไม่ได้ center text

Card พร้อม Image Cap

ครั้งนี้เพิ่ม image cap ที่ card, title และ subtitle ใน card body, และ list group พร้อม links เป็น list items:

<div class="card"> <img src="https://via.placeholder.com/100" alt="" class="card-img-top" /> <div class="card-body"> <h3 class="card-title">card title in the card's body</h3> <h4 class="card-subtitle mb-4">card subtitle</h4> <p>list group with links inside:</p> <ul class="list-group"> <li class="list-group-item"> <a href="#" class="card-link">List link 1</a> </li> <li class="list-group-item"> <a href="#" class="card-link">List link 2</a> </li> <li class="list-group-item"> <a href="#" class="card-link">List link 3</a> </li> </ul> </div> </div>

ใช้ placeholder.com สำหรับภาพ ตัวเลขท้ายคือ pixel width x height แต่ถูก ignore เพราะ CARD-IMG-TOP ยืด/หดภาพเต็มความกว้าง card Title และ subtitle ได้ formatting สวย ใช้ orientation utilities สำหรับ padding และ margin MB-4 คือ margin bottom

Bootstrap padding และ margin orientation:

pt/mt – padding/margin top
pb/mb – padding/margin bottom
pl/ml – padding/margin left
pr/mr – padding/margin right
py/my – padding/margin y axis (top และ bottom)
px/mx – padding/margin x axis (left และ right)

List group encapsulates list และ elements ด้วย light rounded border ผลลัพธ์:

Bottom Image Cap

Bootstrap ไม่มี CARD-IMG-BOTTOM แต่สามารถ "ปลอม" ได้โดยสร้าง div ท้าย card วาง Bootstrap Card Component: คู่มือครบวงจร ภายใน

<div class="card"> <div class="card-body"> <p class="card-text"> Lorem ipsum... </p> </div> <img src="https://via.placeholder.com/100" alt="" class="card-img-top" /> </div>

เพิ่ม lorem ipsum ด้วย

Side Image Cap

ทำ horizontal layout โดยเพิ่ม ROW wrapper ภายใน card ใช้ COL กำหนดขนาดภาพและส่วนอื่น:

<div class="card"> <div class="row"> <img src="https://via.placeholder.com/100" alt="" class="card-img-top col-6" /> <div class="card-body col-6"> <h3 class="card-title">card title in the card's body</h3> <h4 class="card-subtitle mb-4">card subtitle</h4> <p>list group with links inside:</p> <ul class="list-group"> <li class="list-group-item"> <a href="#" class="card-link">List link 1</a> </li> <li class="list-group-item"> <a href="#" class="card-link">List link 2</a> </li> <li class="list-group-item"> <a href="#" class="card-link">List link 3</a> </li> </ul> </div> </div> </div>

wrap เนื้อหา card ใน

เพิ่ม COL-6 ให้ภาพและ card body ทำให้ card แบ่ง 50-50

Card Image เป็น Background

ยืดภาพคลุมทั้ง card วาง text, lists, links ทับได้ โดยให้ class CARD-IMG เนื้อหาอื่นใน

class CARD-IMG-OVERLAY

<div class="card"> <img src="https://via.placeholder.com/100" alt="" class="card-img" /> <div class="card-img-overlay"> <h4 class="card-title">Overlay Title</h4> <p class="card-text"> Image text overlay </p> <p>second paragraph</p> <p>third paragraph</p> <p>fourth paragraph</p> <div class="btn-group w-100"> <button class="btn btn-primary">blue</button> <button class="btn btn-info">teal</button> <button class="btn btn-danger">red</button> <button class="btn btn-dark">black</button> <button class="btn btn-success">green</button> </div> </div> </div>

ใช้ width utility ครั้งแรก W-100 บน BTN-GROUP

Bootstrap Width และ Height Utilities:

w/h-25/50/75/100 – width/height 25%/50%/75%/100% ในกรณีนี้ 100% ลบ padding เดียวกับ CARD-BODY ที่ CARD-IMG-OVERLAY ใช้

Card Columns

จัด cards แบบ columns เรียงบนลงล่างก่อน จน column เต็มถึง column ใหม่:

<div class="card-columns"> <div class="card"> <h3 class="card-title text-center p-2">Title of card 1</h3> <div class="card-body"> <p class="card-text"> Lorem ipsum... </p> </div> </div> <div class="card"> <h3 class="card-title text-center p-2">Title of card 2</h3> <div class="card-body"> <p class="card-text"> Lorem ipsum... </p> </div> </div> <div class="card"> <h3 class="card-title text-center p-2">Title of card 3</h3> <div class="card-body"> <p class="card-text"> Lorem ipsum... </p> </div> </div> <div class="card"> <h3 class="card-title text-center p-2">Title of card 4</h3> <div class="card-body"> <p class="card-text"> Lorem ipsum... </p> </div> </div> </div>

wrap cards ใน

ได้ผลลัพธ์:

การจัดสไตล์ Bootstrap Cards

สามารถเปลี่ยน background, text color, border color และรูปแบบ ได้ สไตล์ใช้กับทั้ง card, subcomponents หรือทั้งคู่ ตัวอย่าง styled cards:

<div class="card bg-primary"> <div class="card-header"><h3>Header 1</h3></div> <div class="card-body"> <p>Body 1</p> </div> <div class="card-footer"><p>Footer 1</p></div> </div> <div class="card bg-success text-white"> <div class="card-header"><h3>Header 2</h3></div> <div class="card-body"> <p>Body 2</p> </div> <div class="card-footer text-danger"><p>Footer 2</p></div> </div> <div class="card bg-info text-dark border-danger"> <div class="card-header"><h3>Header 3</h3></div> <div class="card-body"> <p>Body 3</p> </div> <div class="card-footer"><p>Footer 3</p></div> </div> <div class="card border-primary bg-dark text-white"> <div class="card-header border-success"><h3>Header 4</h3></div> <div class="card-body text-danger"> <p>Body 4</p> </div> <div class="card-footer bg-warning text-info"><p>Footer 4</p></div> </div>

Card แรก: พื้นหลังสีฟ้า (BG-PRIMARY) บน card ทั้งใบ
Card ที่สอง: พื้นหลังสีเขียว (BG-SUCCESS) ข้อความสีขาว (TEXT-WHITE) ทั้งใบ แต่ footer ข้อความสีแดง (TEXT-DANGER) override parent
Card ที่สาม: พื้นหลังสีฟ้าอ่อน (BG-INFO) ข้อความสีดำ (TEXT-DARK) border สีแดง (BORDER-DANGER)
Card ที่สี่: Border สีฟ้า (BORDER-PRIMARY) พื้นหลังสีดำ (BG-DARK) ข้อความสีขาว (TEXT-WHITE) ทั้งใบ
Header: border สีเขียว (BORDER-SUCCESS) Body: ข้อความสีแดง (TEXT-DANGER) Footer: พื้นหลังสีเหลือง (BG-WARNING) ข้อความสีฟ้าอ่อน (TEXT-INFO)

Rainbow cards:

สรุป

Bootstrap card เป็น component อันทรงพลัง มี options มาก สามารถ group เป็น card-deck (แยกแยะแต่สอดคล้อง) หรือ card-group (รวมเป็น entity เดียว) จัดใน row หรือ card-column ได้ ใส่ images, lists, links ใน layouts ต่างๆ มี header, footer ของตัวเอง พร้อม preset styles แต่อยู่อีกสำหรับ customize ยืดหยุ่นมาก ตัวอย่างดีของสิ่งที่ Bootstrap ทำได้มากด้วย setup น้อยและเวลาน้อย