Bootstrap different img size at lg, md sm and xs

There are multiple solutions to this, depending on the results you are looking for. Try the JSFiddle's behaviour by resizing the result's cell.

1. Using width percentage

You can set a percentage width to the image so it adapts depending on the size of the screen. This solution may increase the size of the image if the percentage is bigger than the original width, e.g., if the image is 250px wide, and you use width: 50%, and the screen width is 600px, the image will be scaled until it is 300px wide.

See JSFiddle.

1.1 Using width percentage, with fixed width parent

If you want to use the previous solution but don't want the image to scale larger than the original size, you can set a parent with max-width.

See JSFiddle.

2. Using breakpoints

Using CSS3 media queries to change the size of the image depending on the screen's width range.

See JSFiddle.

You can read more about media queries and responsive CSS here.

If you don't want to use custom media query sizes and you want to stick with the Bootstrap-specific breakpoints, your CSS should be:

/* xs */
img {
    width: 100px;
    height: auto;
}
/* sm */
@media (min-width: 768px) {
    img {
        width: 150px;
    }
}
/* md */
@media (min-width: 992px) {
    img {
        width: 200px;
    }
}
/* lg */
@media (min-width: 1200px) {
    img {
        width: 250px;
    }
}

See JSFiddle. These sizes are documented here. xs is the default because Bootstrap 3 uses a mobile-first approach.

img {
  width: 100%;
}

This will make the image 100 percent of its parent. This will change the image accordingly. So if the parent is col-md-4 it will take up the whole div. So you could do

<div class="col-md-4 col-sm-4 col-xs-4">

  <img src="where ever the image is" alt="what ever">

</div>

That image in this div will change relative to the col- classes if img is set to 100%. If you do not want the image to take up the whole div than just adjust accordingly 75%, 50% etc.