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

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

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

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:

Positioning images

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

Images 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:

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 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:

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 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 classes

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

Using the HTML5 picture element

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

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.