List group เป็นส่วนประกอบที่สำคัญใน Bootstrap ที่เราพบกันบ่อยในเว็บไซด์ ส่วนใหญ่เราจะใช้ทำพวกเมนูต่างๆ หรือข้อความที่แสดงในลักษณะที่เป็นแถวยาวๆ ซึ่ง List group ที่ Bootstrap สร้างไว้ให้นั้นมีลูกเล่นที่หลากหลายไว้ให้เราได้ใช้งาน
List group แบบพื้นฐาน
<ul class="list-group">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Morbi leo risus</li>
<li class="list-group-item">Porta ac consectetur ac</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>
จะสังเกตเห็นว่าการสร้าง List group นั้น จะต้องกำหนดคลาส "list-group" ในแท็กของ "<ul>" และข้อความที่แสดงในแต่ละรายการจะถูกสร้างในแท็ก "<li>" และต้องกำหนดด้วยคลาส "list-group-item"
List group แบบใส่ลิงค์
<div class="list-group">
<a href="#" class="list-group-item active">
Cras justo odio
</a>
<a href="#" class="list-group-item">Dapibus ac facilisis in</a>
<a href="#" class="list-group-item">Morbi leo risus</a>
<a href="#" class="list-group-item">Porta ac consectetur ac</a>
<a href="#" class="list-group-item">Vestibulum at eros</a>
</div>
จะเห็นว่าเราต้องเปลี่ยนแท็ก "<ul>" เป็นแท็ก "<div>" และใช้แท็ก "<a>" แทนที่แท็ก "<li>"
List group กำหนดสีพื้นหลัง List
<ul class="list-group">
<li class="list-group-item list-group-item-success">Dapibus ac facilisis in</li>
<li class="list-group-item list-group-item-info">Cras sit amet nibh libero</li>
<li class="list-group-item list-group-item-warning">Porta ac consectetur ac</li>
<li class="list-group-item list-group-item-danger">Vestibulum at eros</li>
</ul>
<div class="list-group">
<a href="#" class="list-group-item list-group-item-success">Dapibus ac facilisis in</a>
<a href="#" class="list-group-item list-group-item-info">Cras sit amet nibh libero</a>
<a href="#" class="list-group-item list-group-item-warning">Porta ac consectetur ac</a>
<a href="#" class="list-group-item list-group-item-danger">Vestibulum at eros</a>
</div>
- list-group-item-success สำหรับพื้นหลังสีเขียว
- list-group-item-info สำหรับพื้นหลังสีฟ้า
- list-group-item-warning สำหรับพื้นหลังสีเหลือง
- list-group-item-danger สำหรับพื้นหลังสีแดง