askvity

How to Change the Size of an Image in HTML Bootstrap?

Published in Bootstrap Images 2 mins read

The simplest way to change the size of an image in HTML using Bootstrap is to apply the img-fluid class to the <img> tag. This class automatically scales the image to fit its parent container.

Using the .img-fluid Class

The .img-fluid class from Bootstrap sets max-width: 100%; and height: auto; on the image. This makes the image responsive, scaling to fit the width of its parent container without exceeding its original size and while maintaining its aspect ratio.

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

Controlling Image Size with Container Width

The size of the image will then be determined by the width of its parent container. You can use Bootstrap's grid system or other styling techniques to control the width of the container, and thus indirectly control the size of the image.

For example, to make the image take up half the screen width on larger screens:

<div class="container">
  <div class="row">
    <div class="col-md-6">
      <img src="your-image.jpg" class="img-fluid" alt="Responsive Image">
    </div>
  </div>
</div>

In this example, the image is placed within a col-md-6 column, which will take up half the width of the container on medium-sized screens and larger. On smaller screens, Bootstrap's grid system will likely cause the column (and thus the image) to take up the full width.

Other Bootstrap Image Classes

Bootstrap also offers other image classes, though .img-fluid is the most common for responsive scaling:

  • .img-thumbnail: Gives the image a rounded 1px border appearance.

Custom CSS

While .img-fluid is usually sufficient, you can also use custom CSS for more specific control:

<img src="your-image.jpg" class="custom-image" alt="Custom Sized Image">

<style>
.custom-image {
  width: 300px; /* Example: Fixed width */
  height: auto; /* Maintain aspect ratio */
}
</style>

However, for responsive design, using .img-fluid and controlling the size through the parent container's width is generally the best approach. This way, your images will adapt to different screen sizes automatically.

Related Articles