Tutorials Tonight's Logo

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
Responsive Image
Bootstrap Rounded Image
Round Corner
Bootstrap Circle Image
Circular Image
Bootstrap Thumbnail Image
Image Thumbnail

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:

<img src="assets/lonely-tree.jpg" class="img-fluid" alt="Responsive Image">
▶ Run the code

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:

<img src="assets/lonely-tree.jpg" class="rounded img-fluid" alt="Rounded cornor Image">
▶ Run the code

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:

<img src="assets/lonely-tree.jpg" class="rounded-circle img-fluid" alt="circular image">
▶ Run the code

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:

<img src="assets/lonely-tree.jpg" class="img-thumbnail" alt="thumbnail image">
▶ Run the code


Bootstrap Align Image

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

image aligned left image aligned right
<img src="assets/lonely-tree.jpg" class="float-left" width="250" alt="Image floating left">
<!-- image float left -->
<img src="assets/lonely-tree.jpg" class="float-right" width="250" alt="Image floating left">
<!-- image float right -->
▶ Run the code

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:

<img src="../assets/lonely-tree.jpg" class="mx-auto d-block" width="250" alt="Image floating canter">
▶ Run the code

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

<div class="text-center">
  <img src="assets/lonely-tree.jpg" class="img-fluid rounded" width="250" alt="Image floating canter">
</div>
▶ Run the code

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.
Bootstrap 4 Colors

Follow Us

Copyright © Tutorials Tonight. All Rights Are Reserved.