Bootstrap 4 Images Tweet

Bootstrap 4 allows you to make your images responsive preventing them from overflowing from their parent container. It also allows you to add basic styles all simply through classes.

Responsive Image

Add class img-fluid to your images to make them responsive. It will simply add CSS properties max-width: 100% and height: auto.

<img src="" class="img-fluid">

Image Thumbnail

Add class img-thumbnail to your image to display it as thumbnail. This class will add a border with some border radius and some paddings.

<img src="" class="img-thumbnail">

Image Alignment

You can use float utilities to align the images to the left and right of your container or display utility d-block with margin utilities to diplay them in the center.

<img src="" class="img-fluid float-left">

Picture

Make sure that you add class to the image itself and not the <picture> element if you are using <picture> element to add images to your webpages.

<img src="" class="img-fluid img-thumbnail">

Image with caption - Figure

You can use <figure> to display images with caption in bootstrap easily with classes like figure, figure-img and figure-caption added for the same. You can align the figurecaption using text utilities.

<figure class="figure">
  <img src="..." class="figure-img img-fluid">
  <figcaption class="figure-caption">A caption...</figcaption>
</figure>

Media Object

Media object allows you to create complex layouts with image aligned on one side and text contents on the other side of a container. While other layout columns take up full width in smaller screens,media objects are displayed the same way in all viewports.

Add class media to the parent container and add class media-body to the text container. With spacing utilities, you can define the spacing between the media and the text content easily. You can also align the image vertically using classes like align-self-*.

<div class="media">
  <img src="" class="mr-3" width="100">
  <div class="media-body">
    <h4>Content Title</h4>
    <p class="text-justify">Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
  </div>	
</div>	

Result

Content Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

Nesting Media Object

Add class media inside the media-body if you need to nest media objects.

<div class="media">
  <img src="" class="mr-3 align-self-start" width="100">
  <div class="media-body">
    <h4>Content Title</h4>
    <p class="text-justify">Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
    <div class="media">
      <img src="" class="mr-3 align-self-start" width="100">
      <div class="media-body">
        <h4>Content Title</h4>
        <p class="text-justify">Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
      </div>	
    </div>
  </div>	
</div>	

Result

Content Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

Content Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.