• +91-9142290450

  • Hajipur, Bihar, 844101

☰
❮
❯

BS4 Images

← Previous Next →

What are Bootstrap 4 Images?

Bootstrap 4 Images refer to the built-in classes and utilities that allow developers to style images quickly and consistently across a website. Images play a crucial role in web design, whether for brand logos, profile pictures, product visuals, or gallery content. With Bootstrap 4, images can be made responsive, aligned, rounded, circular, or thumbnail-styled without writing custom CSS.

Using these utilities ensures that images adapt smoothly across all devices and screen sizes while maintaining visual balance and aesthetic consistency.

Responsive Images

Making images responsive is essential for mobile-first design. Bootstrap 4 provides the .img-fluid class to handle this automatically:

<img src="image.jpg" class="img-fluid" alt="Responsive image">

  • .img-fluid applies max-width: 100% and height: auto, ensuring images scale within their parent container.

  • This prevents images from overflowing on small screens and keeps the layout intact.

  • Using responsive images is especially important for product galleries and hero sections, where large images could break the design on mobile devices.

Rounded Images

Rounded corners soften the look of images, adding a modern, friendly touch:

<img src="image.jpg" class="img-fluid rounded" alt="Rounded image">

  • .rounded applies a slight border-radius to the image edges.

  • Ideal for profile pictures, team member cards, and content thumbnails.

  • Rounded images blend well with card components in Bootstrap 4, giving a polished and professional appearance.

Circle Images

Bootstrap 4 also makes it easy to create circular images using .rounded-circle:

<img src="profile.jpg" class="img-fluid rounded-circle" alt="Circular image">

  • Perfect for avatars, user profiles, and icons.

  • Works best with square images to maintain symmetry.

  • Circular images are often used in team sections or testimonial areas to visually distinguish individual profiles.

Thumbnail Images

Thumbnails are compact images that highlight content while maintaining structure:

<img src="image.jpg" class="img-fluid img-thumbnail" alt="Thumbnail image">

  • .img-thumbnail adds padding, borders, and rounded corners, giving a classic framed look.

  • Useful for image galleries, portfolio previews, and product listings.

  • Thumbnails are often combined with grid layouts to create uniform image displays.

Alignment and Display Utilities

Bootstrap 4 provides utility classes for aligning images:

<img src="image.jpg" class="float-left" alt="Left aligned">
<img src="image.jpg" class="float-right" alt="Right aligned">
<img src="image.jpg" class="mx-auto d-block" alt="Centered image">

  • .float-left and .float-right allow text to wrap around the image, ideal for blog posts or content sections.

  • .mx-auto d-block centers the image horizontally, often used for hero images or featured visuals.

  • These utilities work seamlessly with responsive images, keeping layouts intact on all screen sizes.

Images in Grid Layouts

Using images inside Bootstrap grid columns ensures they fit structured layouts:

<div class="row">
  <div class="col-md-4">
    <img src="image1.jpg" class="img-fluid rounded" alt="Image 1">
  </div>
  <div class="col-md-4">
    <img src="image2.jpg" class="img-fluid rounded-circle" alt="Image 2">
  </div>
  <div class="col-md-4">
    <img src="image3.jpg" class="img-fluid img-thumbnail" alt="Image 3">
  </div>
</div>

  • Columns automatically adjust to the screen size.

  • Each image scales to the width of its column while keeping aspect ratio.

  • This approach is particularly effective for responsive image galleries, product showcases, and team sections.

Image Thumbnails in Cards

Bootstrap 4 cards often integrate images for visual appeal:

<div class="card" style="width: 18rem;">
  <img src="product.jpg" class="card-img-top img-fluid" alt="Product image">
  <div class="card-body">
    <h5 class="card-title">Product Name</h5>
    <p class="card-text">Short description of the product.</p>
    <a href="#" class="btn btn-primary">Buy Now</a>
  </div>
</div>

  • .card-img-top positions the image at the top of the card.

  • Combining .img-fluid ensures the image scales with the card width, maintaining responsive design.

  • Cards with images are widely used for e-commerce, portfolios, and featured content sections.

Best Practices for Bootstrap 4 Images

  1. Always use .img-fluid to make images responsive.

  2. Apply .rounded, .rounded-circle, or .img-thumbnail for design-specific requirements.

  3. Use float classes for text wrapping and .mx-auto d-block for centering images.

  4. Place images in grid columns to maintain layout structure.

  5. Optimize images for fast loading by using compressed formats and proper dimensions.

  6. Always include alt attributes for accessibility and SEO benefits.

  7. Ensure contrast and visibility of images over backgrounds.

  8. Test images on multiple devices to verify scaling and alignment.

  9. Avoid oversized images that could slow down page load.

  10. Combine images with cards, media objects, and components for consistent design.

Summary of the Tutorial

This tutorial provided an in-depth guide on Bootstrap 4 Images, covering responsive scaling, rounded and circular styling, thumbnails, alignment utilities, grid integration, and cards. By mastering Bootstrap 4 image classes, you can create visually appealing, responsive, and accessible images across your website. Proper use of these utilities ensures modern design, consistent layouts, and seamless user experience on devices of all sizes.

Practice Questions

  1. Add a responsive image using .img-fluid and ensure it scales properly inside a container.

  2. Create an image with rounded corners using .rounded and display it next to a paragraph.

  3. Convert a square image into a circular avatar using .rounded-circle.

  4. Display an image as a thumbnail using .img-thumbnail with a border and padding.

  5. Align an image to the left using .float-left and wrap text around it.

  6. Align another image to the right using .float-right with surrounding text.

  7. Center an image horizontally inside a column using .mx-auto d-block.

  8. Place three images inside a Bootstrap grid row with .col-md-4, each using .img-fluid and different styles: rounded, circle, and thumbnail.

  9. Add an image to a Bootstrap card at the top using .card-img-top and make it responsive.

  10. Combine .img-fluid with .rounded-circle inside a card component to create a circular profile card.

← Previous Next →

Try a Short Quiz.

coding learning websites codepractice

No quizzes available.

Bootstrap 4

online coding class codepractice

Bootstrap Basics

Layout & Grid System

Content & Typography

Components

Forms

JavaScript Components

Utilities & Helpers

codepractice logo
Login
Go Back Top