Bootstrap 5 Tutorial
v5.3.0Bootstrap 5 Tutorial
Images & Media in Bootstrap 5
Introduction to Media Handling
Bootstrap 5 provides a comprehensive set of classes for handling images and media content responsively. These utilities help you create visually appealing layouts that work across all device sizes.
What You'll Learn
- Responsive image techniques
- Image styling and thumbnails
- Rounded corners and shapes
- Figure with captions
- Video embedding
- Media alignment
- Responsive iframes
Key Features
- Automatic Responsiveness: Images scale with parent elements
- Built-in Styling: Borders, shadows, and shapes
- Flexbox Alignment: Easy media alignment
- Accessibility: Alt text and ARIA support
- Performance: Optimized loading techniques
Quick Navigation
Media Gallery
Complete media handling solutions
Basic Image Example
Basic Image Implementation
Basic responsive image with .img-fluid class
<!-- Basic responsive image -->
<img
src="image.jpg"
alt="Descriptive alt text"
class="img-fluid"
/>
<!-- With additional styling -->
<img
src="image.jpg"
alt="Descriptive text"
class="img-fluid rounded shadow"
width="400"
height="300"
/>img-fluid class makes images responsive.Image Alignment Examples
Left Aligned
Center Aligned
Right Aligned
<!-- Center aligned image -->
<img
src="image.jpg"
class="img-fluid mx-auto d-block"
alt="Center"
/>
<!-- Right aligned image -->
<img
src="image.jpg"
class="img-fluid float-end"
alt="Right"
/>
<!-- Left aligned image -->
<img
src="image.jpg"
class="img-fluid float-start"
alt="Left"
/>Media with Text
Media Object Pattern
Media Heading
This is a media object example. The image is aligned to the left with text flowing around it. Perfect for comments, testimonials, or any content where you need an image beside text.
Media Heading Right
This example shows text on the left with image on the right. Useful for alternating layouts in comment sections or product features.
<!-- Media object with image left -->
<div class="d-flex align-items-start">
<img
src="avatar.jpg"
class="img-fluid rounded-circle me-3"
alt="User avatar"
width="100"
height="100"
/>
<div>
<h5>Media Heading</h5>
<p>Content goes here...</p>
</div>
</div>
<!-- Media object with image right -->
<div class="d-flex align-items-start">
<div class="flex-grow-1 me-3">
<h5>Media Heading</h5>
<p>Content goes here...</p>
</div>
<img
src="avatar.jpg"
class="img-fluid rounded-circle"
alt="User avatar"
/>
</div>Image Grid Gallery
Image 1 description
Image 2 description
Image 3 description
Image 4 description
Image 5 description
Image 6 description
<!-- Image Grid Gallery -->
<div class="row g-3">
<div class="col-md-4 col-sm-6">
<div class="card">
<img
src="image1.jpg"
class="card-img-top"
alt="Gallery image 1"
/>
<div class="card-body">
<p class="card-text">Description</p>
</div>
</div>
</div>
<!-- Repeat for other images -->
</div>Common Image Issues & Solutions
| Problem | Solution | Bootstrap Class |
|---|---|---|
| Image overflowing container | Make image responsive | .img-fluid |
| Images not aligned properly | Use alignment utilities | .float-start, .mx-auto |
| Images loading slowly | Optimize and use lazy loading | loading="lazy" |
| Poor quality on high DPI | Use high-resolution images | srcset attribute |
| Accessibility issues | Always add alt text | alt="description" |
Best Practices
Image & Media Best Practices
- Always use alt text: Essential for accessibility and SEO
- Optimize images: Compress images for faster loading
- Use responsive classes: Ensure images work on all devices
- Consider aspect ratio: Maintain consistent proportions
- Lazy load off-screen images: Improve performance
- Use modern formats: WebP, AVIF for better compression
- Provide multiple resolutions: Use srcset for different screens
Next Steps
Continue Learning
Now that you understand the basics of images and media in Bootstrap, explore each topic in detail:
Quick Reference
.img-fluid- Responsive images.rounded- Rounded corners.float-start- Float left.mx-auto- Center alignment.shadow- Add shadow.figure- Figure with caption
