To add images to your content, you need to add the following code:

  <img src="//lorempixel.com/32/32/abstract" alt="my image">

The image will be displayed at its original size by default, as below:

  <!-- 32 x 32 pixles -->
  <img src="//lorempixel.com/32/32/abstract" alt="my image">

  <!-- 64 x 64 pixles -->
  <img src="//lorempixel.com/64/64/abstract" alt="my image">

You can also specify the size of the image, using the width and height attributes:

  <!-- 64 x 64 pixles -->
  <img src="//lorempixel.com/128/128/abstract" alt="my image" width="64" height="64">

Bootstrap will take care of resizing the image if its width is larger than the content area, while keeping the aspect ratio intact. So if the content area has a width of 200 pixels, your image will be downsized to 200 pixels. Here is an example:

  <img src="//lorempixel.com/640/120/abstract" alt="my image">

Positioning imagesPositioning images

You can place the image to the left/right of your content using the following .left and .right CSS classes.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

  <img class="left" src="//lorempixel.com/64/64/abstract/1" alt="my image">
  <img class="right" src="//lorempixel.com/64/64/abstract/2" alt="my image">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

Images with a fixed proportionImages with a fixed proportion

If you want your image to have a width that is always a percentage of the content area, you can use the following code:

  <img src="//lorempixel.com/300/120/abstract" alt="my image" style="width: 50%;">

This will make sure your image is 50% of the content area width whether you are viewing the page on a desktop or on a mobile.

Images with a forced sizeImages with a forced size

If you need your image to have a specific size, and you do not want bootstrap to do any resizing, you just need to specify its size using an inline style attribute:

  <img src="//lorempixel.com/600/120/abstract" alt="my image" style="width:600px;height:120px;max-width:none;max-height:none">

Note that you will need your own CSS overrides if you want to do any resizing on such images.

Showing different images for different screen sizesShowing different images for different screen sizes

By default, when you add an image to your content, bootstrap will just resize it to make sure it is not cropped. But you will still have the same image for each screen size.

This is not always the optimal experience and you might want to serve a different image to mobile users than the one you show to desktop users.

There are several solutions to address this.

Using CSS classesUsing CSS classes

Bootstrap provides some CSS visibility helper classes that you can leverage for such a use case:

  <img class="hidden visible-xxs visible-xs" src="//lorempixel.com/800/120/abstract/1" alt="my image for feature phones">
  <img class="hidden visible-s" src="//lorempixel.com/800/120/abstract/2" alt="my image for smartphones and tablets">
  <img class="hidden visible-m visible-l visible-xl visible-xxl" src="//lorempixel.com/800/120/abstract/3" alt="my image for desktops">

Using the HTML5 picture elementUsing the HTML5 picture element

HTML5 provides a new element to address this particular issue. You can use it as follows:

  <picture>
    <source media="(max-width: 46em)" srcset="//lorempixel.com/800/120/abstract/1 1x, //lorempixel.com/1600/240/abstract/1 2x">
    <source media="(min-width: 61.25em)" srcset="//lorempixel.com/800/120/abstract/3 1x, //lorempixel.com/1600/240/abstract/3 2x">
    <source srcset="//lorempixel.com/800/120/abstract/2 1x, //lorempixel.com/1600/240/abstract/2 2x">
    <img src="//lorempixel.com/800/120/abstract/4" alt="my image">
  </picture>

You can read more on this approach in Responsive Images Done Right from the guys at Smashing Magazine, and also in Built-in Browser Support for Responsive Images from the HTML5 Rocks team.