BOOTSTRAP 4 IMAGES

Bootstrap can make images responsive, so that when device size varies images adjust its size to best fit in the device. Bootstrap makes sure that the image could never become larger than their parent element.

Bootstrap Responsive Image

Images make websites more attractive and informative, so you need to place images properly on the page.

Images have some fixed width and height and overflow when not styled properly. Bootstrap contains many predefined classes using which we can get any desired results.

Use img-fluid class to make images responsive. After using this class image adjust its size according to different devices

The Bootstrap's img-fluid class properties are:

• max-width: 100%;
• height: auto;

Bootstrap Rounded Corners Image

To make images have rounded cornors use rounded class. If you want to make an image responsive, you must use img-fluid class explicitly with it.

The Bootstrap's rounded class property is:

• border-radius: 0.25rem !important;

Bootstrap Circle Image

To make images circular use rounded-circle class. If you want to make image responsive, you must use img-fluid class explicitly with it.

The Bootstrap's rounded-circle class property is:

• border-radius: 50% !important;

Bootstrap Thumbnail Image

The .img-thumbnail class makes the image look like thumbnail by creating a border around the image.

The Bootstrap's .img-thumbnail class properties are:

• padding: 0.25rem;
• background-color: #fff; (white)
• border: 1px solid #dee2e6;
• border-radius: 0.25rem;
• max-width: 100%;
• height: auto;

Bootstrap Align Image

To align image left use .float-left class and to align image right use .float-right class.

Bootstrap Align Image Center

To align image centre use mx-auto with d-block together.

mx-auto sets margin-left and margin-right to auto, while d-block class makes image element to a block element (by default image is an inline element).

CSS properties of used classes are as follows:

• mx-auto :
  • margin-left: auto !important;
  • margin-right: auto !important;
• d-block :
  • display: block !important;

Another way to align image center is using image inside a 'div' element with class text-center.

Points to remember:

1. To make image responsive use .img-fluid class on image.
2. To make image rounded use .rounded class.
3. For circular image use .rounded-circle class.
4. To make an image look like thumbnail use .img-thumbnail class.
5. To align image centre use .mx-auto and .d-block together.
6. To align image center you can also put an image in a div element with class .text-center.