การจัดการรูปภาพด้วย Bootstrap มีหลายแบบให้เราเลือกใช้ทั้งปรับเปลี่ยนขนาดได้เองอัตโนมัติตามการเปลี่ยนแปลงของขนาดหน้าจอ หรือแต่งกรอบรูปภาพเป็นวงกลม วงรี สี่เหลี่ยม ซึ่งการใช้งานก็ง่ายๆ แค่เพิ่มคลาสเข้าไปเล็กน้อย
การสร้าง Thumbnail บน Bootstrap
<a href="#" class="thumbnail">
<img src="xxxxx" />
</a>
การทำ Responsive ให้กับรูปภาพ
การทำให้ภาพสามารถปรับเปลี่ยนขนาดได้เองอัตโนมัติตามการเปลี่ยนแปลงของขนาดหน้าจอ สามารถทำได้โดยการใส่คลาส .img-responsive เข้าไป
การใส่ข้อความอธิบาย (caption) ในแต่ละภาพ
<a href="#" class="thumbnail">
<img src="xxxxx" />
</a>
<div class="caption">
<h3>ข้อความอธิบาย</h3>
</div>
การแต่งกรอบรูปภาพ
มี 3 รูปแบบด้วยกัน คือ .img-rounded, .img-circle และ .img-thumbnail ตัวอย่างการใช้งาน
โครสร้างของคลาสสำหรับรูปภาพ
1. <img src="..." class="img-rounded">
2. <img src="..." class="img-circle">
3. <img src="..." class="img-thumbnail">