tutorialstonight logo
A Platform To Learn To Code

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:

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

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

  • border-radius: 0.25rem !important;

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

  • border-radius: 50% !important;

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

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

Exmple: Thumbnail

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

Exmple: Align Image

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:

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

Exmple: Align Image center

Run the code

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

Exmple: Align Image center

Run the code
points to remember 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