adplus-dvertising
Bootstrap 4
Bootstrap 4 Images
Bootstrap provides classes that can be used when working with the img element and examples for opting images into responsive behavior and add lightweight styles to them all classes.

Responsive images

Responsive images automatically adjust to fit the size of the screen. Bootstrap are made responsive with .img-fluid class to the tag.  The .img-fluid class applies max-width: 100%; and height: auto; are applied to the image so that it scales with the parent element.

<img src="images/960x250.jpg" class="img-fluid" alt="Bootstrap 4 Image">
Output :
bootstrap 4
Thumbnail

The .img-thumbnail class shapes the image to a thumbnail (bordered):

<img src="images/200x170.jpg" class="img-thumbnail" alt="bootstrap 4 image" />	
Output :
bootstrap 4 image
Aligning Images

The Bootstrap 4 image alignments are mainly used two classes there are .float-left, .float-right .

<img src="images/200x170.jpg" class="rounded float-left" alt="bootstrap 4 img">
<img src="images/200x170.jpg" class="rounded float-right" alt="bootstrap 4 img">
Output :
bootstrap 4 image
bootstrap 4 image
<img src="images/200x170.jpg" class="rounded mx-auto d-block" alt="Bootstrap 4 Images">
Output :
bootstrap 4 image
<div class="text-center">
  <img src="images/200x170.jpg" class="rounded" alt="Bootstrap 4 Images">
</div>
Output :
bootstrap 4 image
Image Shapes & Corners

You can use Bootstrap to render images with rounded corners or as a circle. This is acheived with the .rounded-* utility classes.

<img src="images/logo.png" class="rounded" alt="Bootstrap 4 image">
<img src="images/logo.png" class="rounded-circle" alt="Bootstrap 4 image">
<img src="images/logo.png" class="img-thumbnail" alt="Bootstrap 4 image">
<img src="images/logo.png" class="rounded-top" alt="Bootstrap 4 image">
<img src="images/logo.png" class="rounded-bottom" alt="Bootstrap 4 image">
<img src="images/logo.png" class="rounded-0" alt="Bootstrap 4 image">
Output :
bootstrap 4 image
bootstrap 4 image
bootstrap 4 image

bootstrap 4 image
bootstrap 4 image
bootstrap 4 image