BOOTSTRAP 4 IMAGES

In this tutorial, you will learn about working with images in bootstrap. You will learn to create responsive images, thumbnail images, circle images, image galleries, etc.

Images play an important role in any website, they hold users for long and also provide valuable information. So your images on your website must be responsive and could fit all kinds of devices easily.

With bootstrap, you can easily make your images responsive, and style in easily.

Bootstrap Responsive Image

Images make websites more attractive and informative, so you must make your image responsive.

All mages have some fixed width and height. If it is not styled properly then it overflows the screen of the device.

Bootstrap contains many predefined classes using which we can get any desired results. Use .img-fluid class on the image itself to make images responsive. After using this class image adjust its size according to different devices

The CSS property used in class .img-fluid are:

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

<img 
  class="img-fluid"
  src="lonely-tree.jpg"
  alt="Responsive Image"
>

The max-width CSS property restricts the image to overflow from the screen and the height of the image adjusts automatically which makes the image responsive.

Bootstrap Rounded Image

Using bootstrap you can also create a rounded image whose corners are round in shape. To make images have rounded corners use .rounded class on the image.

If you also want the image to be responsive, you must use the .img-fluid class explicitly with it.

The Bootstrap's .rounded class CSS property is:

• border-radius: 0.25rem !important;

<img
  class="rounded" 
  src="lonely-tree.jpg"
  alt="Rounded cornor Image"
>

<!-- To make image responsive also use .img-fluid class with it -->
<img
  class="rounded img-fluid" 
  src="lonely-tree.jpg"
  alt="Rounded cornor Image"
>

Bootstrap Circle Image

To make images circular use .rounded-circle class on the image.

If you want to make your image responsive also then you must use the .img-fluid class explicitly with it.

The Bootstrap's rounded-circle class property is:

• border-radius: 50% !important;

<!-- Rounded but non-responsive -->
<img
  class="rounded-circle"
  src="lonely-tree.jpg"
  alt="circular image non responsive"
>

<!-- Rounded and responsive -->
<img
  class="rounded-circle img-fluid"
  src="lonely-tree.jpg"
  alt="circular image and responsive"
>

Bootstrap Thumbnail Class

To make your image look like a thumbnail using the .img-thumbnail class on the image. It creates a border, adds padding, rounds the image, and makes it responsive.

With the .img-thumbnail class, you need not add the .img-fluid class to make an image responsive.

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

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

<img
  class="img-thumbnail"
  src="lonely-tree.jpg"
  alt="thumbnail image"
>

Output:

Bootstrap Align Image Left/Right

In an article, you need some time to align your images, with bootstrap you can do it easily.

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

<!-- image float left -->
<img 
  class="float-left"
  src="lonely-tree.jpg" 
  alt="Image floating left"
>

<!-- image float right -->
<img 
  class="float-right" 
  src="lonely-tree.jpg" 
  alt="Image floating left"
>

Output:

Bootstrap Center Image

To align the image center use class .mx-auto and .d-block together on your image.

.mx-auto sets margin-left and margin-right to auto, while the .d-block class makes an 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;

<img 
  class="mx-auto d-block"
  src="lonely-tree.jpg"
  alt="Image floating canter"
>

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

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

Output:

Bootstrap image and text side by side

On most websites, you would have seen image and text side by side where text and image explain each other and looks very cool.

To create image and text side by side use the grid system property of bootstrap and create 2 columns of span 6-6.

Put your image in one column and your text in another. On smaller devices, it will automatically align vertically. See the example below.

<div class="container-fluid">
  <div class="row">
    <div class="col-xl-6 col-lg-6 col-md-6" style="border:1px solid #ddd">
      <img src="./assets/bootstrap/responsive-website-with-bootstrap.png" alt="responsive webite" class="img-fluid">
    </div>
    <div class="col-xl-6 col-lg-6 col-md-6" style="border:1px solid #ddd">
      <h2>Bootstrap Responsive Website</h2>
      <p>Bootstrap is a famous front-end framework used to create mobile-first responsive websites. The latest release
        version of bootstrap has removed JQuery dependency not fully work on vanilla javascript.</p>
      <p>Using bootstrap it becomes very easy to build a responsive website.</p>
    </div>
  </div>
</div>

Output:

Bootstrap Image Link

To create an image link put your image in an anchor tag and set URL as href value. You can also set .img-fluid or .img-thumbnail to the image.

<a href="/" title="Go To Home Page">
  <img src="./assets/logo.webp" alt="logo" class="img-thumbnail">
</a>

Frequently asked questions

1. What is responsive Image in bootstrap?

   Responsive images are those which adjust their size automatically according to device-width and never overflows out of screen size.

2. how to make image rounded in bootstrap?

   Add .rounded class to your image.

3. How do I circle an image in bootstrap?

   Add a .rounded-circle class to your image.