Angular Bootstrap Images

Angular Images - Bootstrap 4 & Material Design

Note: This documentation is for an older version of Bootstrap (v.4). A newer version is available for Bootstrap 5. We recommend migrating to the latest version of our product - Material Design for Bootstrap 5.
Go to docs v.5

Documentation and examples for opting images into responsive behavior (so they never become larger than their parent elements) and add lightweight styles to them—all via classes..

Responsive images

Responsive image

Responsive image

Responsive image

HTML

        
            
          <img src="..." class="img-fluid" alt="Responsive image">

SVG images and IE 10

In Internet Explorer 10, SVG images with .img-fluid are disproportionately sized. To fix this, add width: 100% \9; where necessary. This fix improperly sizes other image formats, so Bootstrap doesn’t apply it automatically.

Image thumbnails

In addition to our border-radius utilities, you can use .img-thumbnail to give an image a rounded 1px border appearance.

HTML

        
            
          <img 
            src="https://mdbootstrap.com/img/Others/documentation/img%20(75)-mini.webp" 
            alt="thumbnail" 
            class="img-thumbnail"
            style="width: 200px"
          >

Aligning Images

Align images with the helper float classes or text alignment classes . block-level images can be centered using the .mx-auto margin utility class.

HTML

        
            
            <img src="..." class="rounded float-left" alt="...">
            <img src="..." class="rounded float-right" alt="...">

HTML

        
            
            <img src="..." class="rounded mx-auto d-block" alt="...">

HTML

        
            
          <img src="..." class="rounded" alt="...">

Picture

If you are using the <picture> element to specify multiple <source> elements for a specific , make sure to add the .img-* classes to the <img> and not to the <picture> tag.

HTML

        
            
          <picture>
            <source srcset="..." type="image/svg+xml">
            <img src="..." class="img-fluid img-thumbnail" alt="...">
          </picture>

Images with shadows

HTML

        
            
          <img src="https://mdbootstrap.com/img/Photos/Slides/img%20(54).webp" class="img-fluid z-depth-1" alt="1">

Images with overlays

super light overlay

light overlay

strong overlay

HTML

        
            
          <div class="view">
            <img src="https://mdbootstrap.com/img/Photos/Others/forest-sm.webp" class="img-fluid" alt="placeholder">
            <div class="mask flex-center waves-effect waves-light rgba-teal-strong">
              <p class="white-text">strong overlay</p>
            </div>
          </div>

Info notification

Take a look at our masks section to know all the colors possibilities.

Images with patterns

Image of ballons flying over canyons with mask pattern one.

.pattern-1

.pattern-2

Image of ballons flying over canyons with mask pattern one.

.pattern-3

Image of ballons flying over canyons with mask pattern one.

.pattern-4

.pattern-5

Image of ballons flying over canyons with mask pattern one.

.pattern-6

Image of ballons flying over canyons with mask pattern one.

.pattern-7

.pattern-8

Image of ballons flying over canyons with mask pattern one.

.pattern-9

Add one of the following classes:

.pattern-1
.pattern-2
.pattern-3
.pattern-4
.pattern-5
.pattern-6
.pattern-7
.pattern-8
.pattern-9

HTML

        
            
          <div class="view">
            <img 
              src="https://mdbootstrap.com/img/Photos/Others/nature-sm.webp"
              class="img-fluid"
              alt="Image of ballons flying over canyons with mask pattern one."
            >
            <div class="mask pattern-1 flex-center waves-effect waves-light">
              <p class="white-text">.pattern-1</p>
            </div>
          </div>

Images with hover effects

Strong overlay

Light overlay

Super light overlay

zoom

Zoom effect

Shadow effect

Add one of the following classes:

.rgba-red-light
.rgba-red-slight
.rgba-red-strong
.zoom
.hoverable

HTML

        
            
          <!--Zoom effect-->
          <div class="view overlay zoom">
            <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/6-col/img%20(131).webp" class="img-fluid " alt="zoom">
            <div class="mask flex-center waves-effect waves-light">
              <p class="white-text">Zoom effect</p>
            </div>
          </div>

          <!-- Hoverable -->
          <img
            src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/6-col/img%20(132).webp"
            class="img-fluid rounded-circle hoverable"
            alt="hoverable"
          >

Images with waves effects

Click on the images to see the effect

Sample image with waves effect.

Sample image with waves effect.

HTML

        
            
          <!--Mask with wave-->
          <div class="view overlay">
            <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/6-col/img%20(1).webp" class="img-fluid" alt="Sample image with waves effect.">
            <a>
              <div class="mask waves-effect waves-light rgba-white-slight" mdbWavesEffect></div>
            </a>
          </div>
          <!--Mask with wave-->
          <div class="view overlay">
            <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/6-col/img%20(7).webp" class="img-fluid" alt="Sample image with waves effect.">
            <a>
              <div class="mask waves-effect rgba-white-slight" mdbWavesEffect></div>
            </a>
          </div>

Images within lightbox MDB Pro component

HTML
TypeScript

        
            
          <div class="row">
            <mdb-image-modal [modalImages]="images" type="margin"></mdb-image-modal>
          </div>

        
            
          import { Component } from '@angular/core';

          @Component({
            selector: 'margin-lightbox',
            templateUrl: './margin-lightbox.component.html',
            styleUrls: ['./margin-lightbox.component.scss'],
          })
          export class MarginLightboxComponent {
            images = [
              { 
                img: "https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(145).webp",
                thumb: "https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(145).webp", 
                description: "Image 1" 
              },
              { 
                img: "https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(150).webp",
                thumb: "https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(150).webp", 
                description: "Image 2" 
              },
              { 
                img: "https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(152).webp",
                thumb: "https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(152).webp", 
                description: "Image 3" 
              },
              { 
                img: "https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(42).webp", 
                thumb: "https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(42).webp", 
                description: "Image 4" 
              },
              { 
                img: "https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(151).webp",
                thumb: "https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(151).webp", 
                description: "Image 5" 
              },
              { 
                img: "https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(40).webp", 
                thumb: "https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(40).webp", 
                description: "Image 6" 
              },
              { 
                img: "https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(148).webp",
                thumb: "https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(148).webp", 
                description: "Image 7" 
              },
              { 
                img: "https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(147).webp",
                thumb: "https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(147).webp", 
                description: "Image 8" 
              },
              { 
                img: "https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(149).webp",
                thumb: "https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(149).webp",
                description: "Image 9"
              }
            ];
          }

Images within cards MDB Pro component

wider

Alice Mayer

Photographer

Sed ut perspiciatis unde omnis iste natus sit voluptatem accusantium doloremque laudantium, totam rem aperiam.

narrower

Culinary

Cheat day inspirations

Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi.

Button

normal

Billy Cullen

Web developer

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus, ex, recusandae. Facere modi sunt, quod quibusdam.

HTML

        
            
          <div class="row">
            <div class="col-md-4">
              <!--Card-->
              <mdb-card cascade="true" wider="true">

                <!--Card image-->
                <div class="view view-cascade overlay waves-light" mdbWavesEffect>
                  <mdb-card-img src="https://mdbootstrap.com/img/Photos/Horizontal/People/6-col/img%20%283%29.webp"></mdb-card-img>
                  <a>
                    <div class="mask rgba-white-slight"></div>
                  </a>
                </div>
                <!--/Card image-->

                <mdb-card-body cascade="true" class="text-center">
                  <!--Card content-->
                  <!--Title-->
                  <h4 class="card-title">
                    <strong>Alice Mayer</strong>
                  </h4>
                  <h5 class="indigo-text">
                    <strong>Photographer</strong>
                  </h5>

                  <mdb-card-text>
                    Sed ut perspiciatis unde omnis iste natus sit voluptatem accusantium doloremque laudantium, totam rem
                    aperiam.
                  </mdb-card-text>

                  <!--Linkedin-->
                  <a class="icons-sm li-ic"><mdb-icon fab icon="linkedin-in"> </mdb-icon></a>
                  <!--Twitter-->
                  <a class="icons-sm tw-ic"><mdb-icon fab icon="twitter"> </mdb-icon></a>
                  <!--Dribbble-->
                  <a class="icons-sm fb-ic"><mdb-icon fab icon="facebook-f"> </mdb-icon></a>

                </mdb-card-body>
                <!--/.Card content-->

              </mdb-card>
              <!--/.Card-->
            </div>

            <div class="col-md-4">
              <!--Card-->
              <mdb-card cascade="true" narrower="true">

                <!--Card image-->
                <div class="view view-cascade overlay waves-light" mdbWavesEffect>
                  <mdb-card-img src="https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(147).webp"></mdb-card-img>
                  <a>
                    <div class="mask rgba-white-slight"></div>
                  </a>
                </div>
                <!--/Card image-->

                <!--Card content-->
                <div class="card-body card-body-cascade">
                  <h5 class="pink-text"><mdb-icon fas icon="utensils"></mdb-icon> Culinary</h5>
                  <!--Title-->
                  <h4 class="card-title">Cheat day inspirations</h4>
                  <!--Text-->

                  <mdb-card-text>
                    Sed ut perspiciatis unde omnis iste natus sit voluptatem accusantium doloremque laudantium, totam rem
                    aperiam.
                  </mdb-card-text>

                  <a mdbBtn color="unique" class="waves-light" mdbWavesEffect>Button</a>

                </mdb-card-body>
                <!--/.Card content-->

              </mdb-card>
              <!--/.Card-->
            </div>

            <div class="col-md-4">
              <!--Card-->
              <mdb-card cascade="true">

                <!--Card image-->
                <div class="view view-cascade overlay waves-light" mdbWavesEffect>
                  <mdb-card-img src="https://mdbootstrap.com/img/Photos/Others/men.webp"></mdb-card-img>
                  <a>
                    <div class="mask rgba-white-slight"></div>
                  </a>
                </div>
                <!--/Card image-->

                <mdb-card-body cascade="true" class="text-center">
                  <!--Card content-->
                  <h4 class="card-title">
                    <strong>Billy Cullen</strong>
                  </h4>
                  <h5>Web developer</h5>

                  <mdb-card-text>
                    Sed ut perspiciatis unde omnis iste natus sit voluptatem accusantium doloremque laudantium, totam rem
                    aperiam.
                  </mdb-card-text>

                  <!--Facebook-->
                  <a type="button" floating="true" size="sm" color="fb"><mdb-icon fab icon="facebook-f"></mdb-icon></a>
                  <!--Twitter-->
                  <a type="button" floating="true" size="sm" color="tw"><mdb-icon fab icon="twitter"></mdb-icon></a>
                  <!--Google +-->
                  <a type="button" floating="true" size="sm" color="dribbble"><mdb-icon fab icon="dribbble"></mdb-icon></a>

                </mdb-card-body>
                <!--/.Card content-->

              </mdb-card>
              <!--/.Card-->
            </div>
          </div>

Images within magazine section MDB Pro component

Section title

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit id laborum.

Sample image

Adventure

This is title of the news

24 Food Swaps That Slash Calories.

How to Make a Beet Cocktail?

8 Sneaky Reasons You're Always Hungry.

5 Pressure Cooker Recipes You Need to Try.

Sample image

Travel

This is title of the news

Trends in the blogosphere for 2016.

Where you eat the best lunch in Warsaw?

What camera take for holidays?

Why you should visit Lisbon?

Sample image

Nature

This is title of the news

How to recognize the footsteps of wild animals?

National Parks in Poland.

Traveling without littering the planet.

How to protect rainforests?

HTML

        
            
          <!--Section: Magazine v.3-->
          <section class="magazine-section my-5">

            <!-- Section heading -->
            <h2 class="h1-responsive font-weight-bold text-center my-5">Section title</h2>
            <!-- Section description -->
            <p class="text-center w-responsive mx-auto mb-5">Duis aute irure dolor in reprehenderit in voluptate velit
              esse
              cillum dolore eu fugiat nulla pariatur. Excepteur sint
              occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit id laborum.</p>

            <!-- Grid row -->
            <div class="row">

              <!-- Grid column -->
              <div class="col-lg-4 col-md-12 mb-lg-0 mb-5">

                <!-- Featured news -->
                <div class="single-news mb-3">

                  <!-- Image -->
                  <div class="view overlay rounded z-depth-2 mb-4">
                    <img class="img-fluid" src="https://mdbootstrap.com/img/Photos/Others/images/86.webp" alt="Sample image">
                    <a>
                      <div class="mask rgba-white-slight waves-light" mdbWavesEffect></div>
                    </a>
                  </div>

                  <!-- Grid row -->
                  <div class="row mb-3">
                    <!-- Grid column -->
                    <div class="col-12">
                      <!-- Badge -->
                      <a href="#!"><mdb-badge color="pink"><mdb-icon fas icon="camera" class="pr-2" aria-hidden="true"></mdb-icon>Adventure</mdb-badge></a>
                    </div>
                    <!-- Grid column -->
                  </div>
                  <!-- Grid row -->
                  <!-- Title -->
                  <div class="d-flex justify-content-between">
                    <div class="col-11 text-truncate pl-0 mb-3">
                      <a class="font-weight-bold">This is title of the news</a>
                    </div>
                    <a><mdb-icon fas icon="angle-double-right"></mdb-icon></a>
                  </div>
                </div>
                <!-- Featured news -->

                <!-- Small news -->
                <div class="single-news mb-3">
                  <!-- Title -->
                  <div class="d-flex justify-content-between">
                    <div class="col-11 text-truncate pl-0 mb-3">
                      <a>24 Food Swaps That Slash Calories.</a>
                    </div>
                    <a><mdb-icon fas icon="angle-double-right"></mdb-icon></a>
                  </div>
                </div>
                <!-- Small news -->

                <!-- Small news -->
                <div class="single-news mb-3">
                  <!-- Title -->
                  <div class="d-flex justify-content-between">
                    <div class="col-11 text-truncate pl-0 mb-3">
                      <a>How to Make a Beet Cocktail?</a>
                    </div>
                    <a><mdb-icon fas icon="angle-double-right"></mdb-icon></a>
                  </div>
                </div>
                <!-- Small news -->

                <!-- Small news -->
                <div class="single-news mb-3">
                  <!-- Title -->
                  <div class="d-flex justify-content-between">
                    <div class="col-11 text-truncate pl-0 mb-3">
                      <a>8 Sneaky Reasons You're Always Hungry.</a>
                    </div>
                    <a><mdb-icon fas icon="angle-double-right"></mdb-icon></a>
                  </div>
                </div>
                <!-- Small news -->

                <!-- Small news -->
                <div class="single-news">
                  <!-- Title -->
                  <div class="d-flex justify-content-between">
                    <div class="col-11 text-truncate pl-0">
                      <a>5 Pressure Cooker Recipes You Need to Try.</a>
                    </div>
                    <a><mdb-icon fas icon="angle-double-right"></mdb-icon></a>
                  </div>
                </div>
                <!-- Small news -->
              </div>
              <!-- Grid column -->

              <!-- Grid column -->
              <div class="col-lg-4 col-md-6 mb-md-0 mb-5">

                <!-- Featured news -->
                <div class="single-news mb-3">

                  <!-- Image -->
                  <div class="view overlay rounded z-depth-2 mb-4">
                    <img class="img-fluid" src="https://mdbootstrap.com/img/Photos/Others/images/31.webp" alt="Sample image">
                    <a>
                      <div class="mask rgba-white-slight waves-light" mdbWavesEffect></div>
                    </a>
                  </div>

                  <!-- Grid row -->
                  <div class="row mb-3">
                    <!-- Grid column -->
                    <div class="col-12">
                      <!-- Badge -->
                      <a href="#!"><mdb-badge color="deep-orange"><mdb-icon fas icon="plane" class="pr-2" aria-hidden="true"></mdb-icon>Travel</mdb-badge></a>
                    </div>
                    <!-- Grid column -->
                  </div>
                  <!-- Grid row -->
                  <!-- Title -->
                  <div class="d-flex justify-content-between">
                    <div class="col-11 text-truncate pl-0 mb-3">
                      <a class="font-weight-bold">This is title of the news</a>
                    </div>
                    <a><mdb-icon fas icon="angle-double-right"></mdb-icon></a>
                  </div>
                </div>
                <!-- Featured news -->

                <!-- Small news -->
                <div class="single-news mb-3">
                  <!-- Title -->
                  <div class="d-flex justify-content-between">
                    <div class="col-11 text-truncate pl-0 mb-3">
                      <a>Trends in the blogosphere for 2016.</a>
                    </div>
                    <a><mdb-icon fas icon="angle-double-right"></mdb-icon></a>
                  </div>
                </div>
                <!-- Small news -->

                <!-- Small news -->
                <div class="single-news mb-3">
                  <!-- Title -->
                  <div class="d-flex justify-content-between">
                    <div class="col-11 text-truncate pl-0 mb-3">
                      <a>Where you eat the best lunch in Warsaw?</a>
                    </div>
                    <a><mdb-icon fas icon="angle-double-right"></mdb-icon></a>
                  </div>
                </div>
                <!-- Small news -->

                <!-- Small news -->
                <div class="single-news mb-3">
                  <!-- Title -->
                  <div class="d-flex justify-content-between">
                    <div class="col-11 text-truncate pl-0 mb-3">
                      <a>What camera take for holidays?</a>
                    </div>
                    <a><mdb-icon fas icon="angle-double-right"></mdb-icon></a>
                  </div>
                </div>
                <!-- Small news -->

                <!-- Small news -->
                <div class="single-news">
                  <!-- Title -->
                  <div class="d-flex justify-content-between">
                    <div class="col-11 text-truncate pl-0">
                      <a>Why you should visit Lisbon?</a>
                    </div>
                    <a><mdb-icon fas icon="angle-double-right" class="fas fa-angle-double-right"></mdb-icon></a>
                  </div>
                </div>
                <!-- Small news -->

              </div>
              <!-- Grid column -->

              <!-- Grid column -->
              <div class="col-lg-4 col-md-6 mb-0">

                <!-- Featured news -->
                <div class="single-news mb-3">

                  <!-- Image -->
                  <div class="view overlay rounded z-depth-2 mb-4">
                    <img class="img-fluid" src="https://mdbootstrap.com/img/Photos/Others/images/52.webp" alt="Sample image">
                    <a>
                      <div class="mask rgba-white-slight waves-light" mdbWavesEffect></div>
                    </a>
                  </div>

                  <!-- Grid row -->
                  <div class="row mb-3">
                    <!-- Grid column -->
                    <div class="col-12">
                      <!-- Badge -->
                      <a href="#!"><mdb-badge color="success-color"><mdb-icon fas icon="plane" class="pr-2" aria-hidden="true"></mdb-icon>Nature</mdb-badge></a>
                    </div>
                    <!-- Grid column -->
                  </div>
                  <!-- Grid row -->
                  <!-- Title -->
                  <div class="d-flex justify-content-between">
                    <div class="col-11 text-truncate pl-0 mb-3">
                      <a class="font-weight-bold">This is title of the news</a>
                    </div>
                    <a><mdb-icon fas icon="angle-double-right"></mdb-icon></a>
                  </div>
                </div>
                <!-- Featured news -->

                <!-- Small news -->
                <div class="single-news mb-3">
                  <!-- Title -->
                  <div class="d-flex justify-content-between">
                    <div class="col-11 text-truncate pl-0 mb-3">
                      <a>How to recognize the footsteps of wild animals?</a>
                    </div>
                    <a><mdb-icon fas icon="angle-double-right"></mdb-icon></a>
                  </div>
                </div>
                <!-- Small news -->

                <!-- Small news -->
                <div class="single-news mb-3">
                  <!-- Title -->
                  <div class="d-flex justify-content-between">
                    <div class="col-11 text-truncate pl-0 mb-3">
                      <a>National Parks in Poland.</a>
                    </div>
                    <a><mdb-icon fas icon="angle-double-right"></mdb-icon></a>
                  </div>
                </div>
                <!-- Small news -->

                <!-- Small news -->
                <div class="single-news mb-3">
                  <!-- Title -->
                  <div class="d-flex justify-content-between">
                    <div class="col-11 text-truncate pl-0 mb-3">
                      <a>Traveling without littering the planet.</a>
                    </div>
                    <a><mdb-icon fas icon="angle-double-right"></mdb-icon></a>
                  </div>
                </div>
                <!-- Small news -->

                <!-- Small news -->
                <div class="single-news">
                  <!-- Title -->
                  <div class="d-flex justify-content-between">
                    <div class="col-11 text-truncate pl-0">
                      <a>How to protect rainforests?</a>
                    </div>
                    <a><mdb-icon fas icon="angle-double-right"></mdb-icon></a>
                  </div>
                </div>
                <!-- Small news -->

              </div>
              <!-- Grid column -->

            </div>
            <!-- Grid row -->

          </section>
          <!--Section: Magazine v.3-->

Images as the avatars within testimonials MDB Pro component

Testimonials

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, error amet numquam iure provident voluptate esse quasi, veritatis totam voluptas nostrum quisquam eum porro a pariatur accusamus veniam.

John Doe

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos, adipisci.

Anna Aston

Neque cupiditate assumenda in maiores repudiandae mollitia architecto.

Maria Kate

Delectus impedit saepe officiis ab aliquam repellat, rem totam unde ducimus.

HTML

        
            
          <!--Section: Testimonials v.1-->
          <section class="section pb-3 text-center">

            <!--Section heading-->
            <h1 class="section-heading h1 pt-4">Testimonials</h1>
            <!--Section description-->
            <p class="section-description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, error amet
              numquam iure provident voluptate esse quasi, veritatis totam voluptas nostrum quisquam eum porro a pariatur
              accusamus veniam.</p>

            <div class="row">
              <!--Grid column-->
              <div class="col-lg-4 col-md-12 mb-4">
                <!--Card-->
                <div class="card testimonial-card">
                  <!--Background color-->
                  <div class="card-up teal lighten-2">
                  </div>
                  <!--Avatar-->
                  <div class="avatar mx-auto white">
                    <img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(27).webp" alt="avatar mx-auto white" class="rounded-circle img-fluid">
                  </div>

                  <div class="card-body">
                    <!--Name-->
                    <h4 class="card-title mt-1">John Doe</h4>
                    <hr>
                    <!--Quotation-->
                    <p><mdb-icon fas icon="quote-left"></mdb-icon> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos,
                      adipisci.</p>
                  </div>
                </div>
                <!--Card-->
              </div>
              <!--Grid column-->

              <!--Grid column-->
              <div class="col-lg-4 col-md-12 mb-4">
                <!--Card-->
                <div class="card testimonial-card">
                  <!--Background color-->
                  <div class="card-up blue lighten-2">
                  </div>
                  <!--Avatar-->
                  <div class="avatar mx-auto white">
                    <img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(20).webp" alt="avatar mx-auto white" class="rounded-circle img-fluid">
                  </div>
                  <div class="card-body">
                    <!--Name-->
                    <h4 class="card-title mt-1">Anna Aston</h4>
                    <hr>
                    <!--Quotation-->
                    <p><mdb-icon fas icon="quote-left"></mdb-icon> Neque cupiditate assumenda in maiores repudiandae mollitia
                      architecto.</p>
                  </div>
                </div>
                <!--Card-->
              </div>
              <!--Grid column-->

              <!--Grid column-->
              <div class="col-lg-4 col-md-12 mb-4">
                <!--Card-->
                <div class="card testimonial-card">
                  <!--Background color-->
                  <div class="card-up deep-purple lighten-2"></div>
                  <!-- Section heading -->
                  <h2 class="h1-responsive font-weight-bold my-5">Testimonials</h2>
                  <!-- Section description -->
                  <p class="dark-grey-text w-responsive mx-auto mb-5">Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                    Fugit,
                    error amet numquam iure provident voluptate esse quasi,
                    veritatis totam voluptas nostrum quisquam eum porro a pariatur veniam.</p>
                  <!-- Grid row -->
                  <div class="row">
                    <!--Grid column-->
                    <div class="col-lg-4 col-md-12 mb-lg-0 mb-4">
                      <!--Card-->
                      <mdb-card class="testimonial-card">
                        <!--Background color-->
                        <div class="card-up info-color"></div>
                        <!--Avatar-->
                        <div class="avatar mx-auto white">
                          <mdb-card-img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(9).webp" class="rounded-circle"></mdb-card-img>
                        </div>
                        <mdb-card-body>
                          <!--Name-->
                          <h4 class="font-weight-bold mb-4">John Doe</h4>
                          <hr>
                          <!--Quotation-->
                          <p class="dark-grey-text mt-4">
                            <i class="fas fa-quote-left pr-2"></i>Lorem ipsum dolor sit amet eos adipisci, consectetur
                            adipisicing elit.</p>
                        </mdb-card-body>
                      </mdb-card>
                      <!--Card-->
                    </div>
                    <!--Grid column-->

                    <!--Grid column-->
                    <div class="col-lg-4 col-md-6 mb-md-0 mb-4">
                      <!--Card-->
                      <mdb-card class="testimonial-card">
                        <!--Background color-->
                        <div class="card-up blue-gradient">
                        </div>
                        <!--Avatar-->
                        <div class="avatar mx-auto white">
                          <img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(20).webp" class="rounded-circle img-fluid">
                        </div>
                        <mdb-card-body>
                          <!--Name-->
                          <h4 class="font-weight-bold mb-4">Anna Aston</h4>
                          <hr>
                          <!--Quotation-->
                          <p class="dark-grey-text mt-4">
                            <i class="fas fa-quote-left pr-2"></i>Neque cupiditate assumenda in maiores repudiandae mollitia
                            architecto.</p>
                        </mdb-card-body>
                      </mdb-card>
                      <!--Card-->
                    </div>
                    <!--Grid column-->

                    <!--Grid column-->
                    <div class="col-lg-4 col-md-6">
                      <!--Card-->
                      <mdb-card class="testimonial-card">
                        <!--Background color-->
                        <div class="card-up indigo"></div>
                        <!--Avatar-->
                        <div class="avatar mx-auto white">
                          <img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(10).webp" class="rounded-circle img-fluid">
                        </div>
                        <mdb-card-body>
                          <!--Name-->
                          <h4 class="font-weight-bold mb-4">Maria Kate</h4>
                          <hr>
                          <!--Quotation-->
                          <p class="dark-grey-text mt-4">
                            <i class="fas fa-quote-left pr-2"></i>Delectus impedit saepe officiis ab aliquam repellat rem unde
                            ducimus.</p>
                        </mdb-card-body>
                      </mdb-card>
                      <!--Card-->
                    </div>
                    <!--Grid column-->
                  </div>
                  <!-- Grid row -->
                </div>
              </div>
            </div>
          </section>
          <!-- Section: Testimonials v.1 -->

Images within grid

Responsive image

Responsive image

Responsive image

Responsive image

Responsive image

Responsive image

HTML

        
            
          <!-- Grid row -->
          <div class="row">

            <!-- Grid column -->
            <div class="col-md-12 mb-3">

              <img src="https://mdbootstrap.com/img/Photos/Slides/img%20(137).webp" class="img-fluid z-depth-1" alt="Responsive image">

            </div>
            <!-- Grid column -->

          </div>
          <!-- Grid row -->

          <!-- Grid row -->
          <div class="row">

            <!-- Grid column -->
            <div class="col-lg-4 col-md-12 mb-3">

              <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/6-col/img(115).webp" class="img-fluid z-depth-1"
                alt="Responsive image">

            </div>
            <!-- Grid column -->

            <!-- Grid column -->
            <div class="col-lg-4 col-md-6 mb-3">

              <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/6-col/img(116).webp" class="img-fluid z-depth-1"
                alt="Responsive image">

            </div>
            <!-- Grid column -->

            <!-- Grid column -->
            <div class="col-lg-4 col-md-6 mb-3">

              <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/6-col/img(117).webp" class="img-fluid z-depth-1"
                alt="Responsive image">

            </div>
            <!-- Grid column -->

          </div>
          <!-- Grid row -->

          <!-- Grid row -->
          <div class="row">

            <!-- Grid column -->
            <div class="col-md-6 mb-3">

              <img src="https://mdbootstrap.com/img/Photos/Horizontal/People/6-col/img(117).webp" class="img-fluid z-depth-1"
                alt="Responsive image">

            </div>
            <!-- Grid column -->

            <!-- Grid column -->
            <div class="col-md-6 mb-3">

              <img src="https://mdbootstrap.com/img/Photos/Horizontal/People/6-col/img(129).webp" class="img-fluid z-depth-1"
                alt="Responsive image">

            </div>
            <!-- Grid column -->

          </div>
          <!-- Grid row -->

Shapes of images

Responsive image

Responsive image

Responsive image

HTML

        
            
          <!-- Grid row -->
          <div class="row">
            <!-- Grid column -->
            <div class="col-xl-4 col-md-4 mb-3">
              <img src="https://mdbootstrap.com/img/Photos/Horizontal/People/6-col/img(119).webp" class="img-fluid z-depth-1" alt="Responsive image">
            </div>
            <!-- Grid column -->

            <!-- Grid column -->
            <div class="col-xl-5 col-md-4 mb-3 text-center">
              <img src="https://mdbootstrap.com/img/Photos/Avatars/img(31).webp" class="img-fluid z-depth-1 rounded-circle" alt="Responsive image">
            </div>
            <!-- Grid column -->

            <!-- Grid column -->
            <div class="col-xl-3 col-md-4 mb-3 text-right">
              <img src="https://mdbootstrap.com/img/Photos/Avatars/img(30).webp" class="img-fluid z-depth-1" alt="Responsive image">
            </div>
            <!-- Grid column -->
          </div>
          <!-- Grid row -->

Images within carousel

HTML

        
            
          <mdb-carousel [animation]="'slide'">
            <mdb-carousel-item>
              <img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(130).webp" alt="First slide">
            </mdb-carousel-item>
            <mdb-carousel-item>
              <img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(129).webp" alt="Second slide">
            </mdb-carousel-item>
            <mdb-carousel-item>
              <img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(70).webp" alt="Third slide">
            </mdb-carousel-item>
          </mdb-carousel>