Rate this docs

Vue Bootstrap Images

Vue Images - Bootstrap 4 & Material Design

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


        <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.

thumbnail


        <img src="https://mdbootstrap.com/img/Others/documentation/img%20(75)-mini.jpg" 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.

aligment aligment


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

      
aligment


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

      
aligment


        <div class="text-center">
          <img src="..." class="rounded" alt="...">
        </div>
      

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.



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

      

Images with shadows

1
2
3
4
5
6


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

      

Images with overlays

placeholder

super light overlay

placeholder

light overlay

placeholder

strong overlay

Info notification

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



        <mdb-view>
          <img src="https://mdbootstrap.com/img/Photos/Others/forest-sm.jpg" class="img-fluid" alt="placeholder">
          <mdb-mask flex-center overlay="teal-strong" text="strong overlay" />
        </mdb-view>

      

Images with patterns

Image of ballons flying over canyons with mask pattern one.

.pattern-1

placeholder

.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

placeholder

.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

placeholder

.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


        <mdb-view src="https://mdbootstrap.com/img/Photos/Others/nature-sm.jpg" alt="">
          <mdb-mask pattern="1" flex-center text="pattern = 1" />
        </mdb-view>

      

Images with hover effects

placeholder

Strong overlay

placeholder

Light overlay

placeholder

Super light overlay

zoom

Zoom effect

Shadow effect


placeholder

Add one of the following classes:

  • .zoom
  • .hoverable


        <!--Zoom effect-->
        <mdb-view class="zoom overlay" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/6-col/img%20(131).jpg" alt="zoom">
          <mdb-mask flex-center text="Zoom effect" />
        </mdb-view>

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

      

Images with waves effects

Click on the images to see the effect



        <!--Mask with wave-->
        <mdb-view src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/6-col/img%20(1).jpg" alt="Sample image with waves effect">
          <a>
            <mdb-mask overlay="white-slight"></mdb-mask>
          </a>
        </mdb-view>

        <!--Mask with wave-->
        <mdb-view src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/6-col/img%20(7).jpg" alt="Sample image with waves effect">
          <a>
            <mdb-mask overlay="white-slight"></mdb-mask>
          </a>
        </mdb-view>

      


Images within cards MDB Pro component

Alice Mayer

Photographer

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

Culinary

Cheat day inspirations

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

Button

Billy Cullen

Web developer

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



        <template>
          <mdb-container>
            <h4 class="pb-2">Cascading cards</h4>
            <mdb-row>
              <mdb-col sm="4">
                <mdb-card wide>
                  <mdb-view hover cascade>
                    <mdb-card-image src="https://mdbootstrap.com/img/Photos/Horizontal/People/6-col/img%20%283%29.jpg" alt="Card image cap"></mdb-card-image>
                    <mdb-mask flex-center waves overlay="white-slight"></mdb-mask>
                  </mdb-view>
                  <mdb-card-body class="text-center" cascade>
                    <mdb-card-title><strong>Alice Mayer</strong></mdb-card-title>
                    <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>
                    <a class="fa-lg li-ic px-2">
                      <mdb-icon icon="linkedin" /></a>
                    <a class="fa-lg tw-ic px-2">
                      <mdb-icon icon="twitter" /></a>
                    <a class="fa-lg fb-ic px-2">
                      <mdb-icon icon="facebook" /></a>
                  </mdb-card-body>
                </mdb-card>
              </mdb-col>
              <mdb-col sm="4">
                <mdb-card narrow>
                  <mdb-view hover cascade>
                    <mdb-card-image src="https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(147).jpg" alt="Card image cap"></mdb-card-image>
                    <mdb-mask flex-center waves overlay="white-slight"></mdb-mask>
                  </mdb-view>
                  <mdb-card-body cascade>
                    <h5 class="pink-text pb-2 pt-1">
                      <mdb-icon icon="cutlery" /> Culinary</h5>
                    <mdb-card-title>Cheat day inspirations</mdb-card-title>
                    <mdb-card-text>Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit
                      laboriosam, nisi ut aliquid ex ea commodi.</mdb-card-text>
                    <mdb-btn color="unique">Button</mdb-btn>
                  </mdb-card-body>
                </mdb-card>
              </mdb-col>
              <mdb-col sm="4">
                <mdb-card cascade>
                  <mdb-view hover cascade>
                    <mdb-card-image src="https://mdbootstrap.com/img/Photos/Others/men.jpg" alt="Card image cap"></mdb-card-image>
                    <mdb-mask flex-center waves overlay="white-slight"></mdb-mask>
                  </mdb-view>
                  <mdb-card-body class="text-center" cascade>
                    <mdb-card-title><strong>Billy Cullen</strong></mdb-card-title>
                    <h5>Web developer</h5>
                    <mdb-card-text>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus, ex,
                      recusandae. Facere modi sunt, quod quibusdam.</mdb-card-text>
                    <mdb-btn tag="a" floating small class="btn-fb">
                      <mdb-icon icon="facebook" />
                    </mdb-btn>
                    <mdb-btn tag="a" floating small class="btn-tw">
                      <mdb-icon icon="twitter" />
                    </mdb-btn>
                    <mdb-btn tag="a" floating small class="btn-dribbble">
                      <mdb-icon icon="dribbble" />
                    </mdb-btn>
                  </mdb-card-body>
                </mdb-card>
              </mdb-col>
            </mdb-row>
          </mdb-container>
        </template>

        <script>
          import { mdbContainer, mdbRow, mdbCol, mdbCard, mdbCardImage, mdbCardHeader, mdbCardBody, mdbCardTitle, mdbCardText, mdbCardFooter, mdbCardUp, mdbCardAvatar, mdbCardGroup, mdbBtn, mdbView, mdbMask, mdbIcon } from 'mdbvue';

          export default {
            name: 'CardProPage',
            components: {
              mdbContainer,
              mdbRow,
              mdbCol,
              mdbCard,
              mdbCardImage,
              mdbCardHeader,
              mdbCardBody,
              mdbCardTitle,
              mdbCardText,
              mdbCardFooter,
              mdbCardUp,
              mdbCardAvatar,
              mdbCardGroup,
              mdbBtn,
              mdbView,
              mdbMask,
              mdbIcon
            }
          };
        </script>

      

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.



        <template>
          <mdb-container>
            <h2 class="h1-responsive font-weight-bold my-5 text-center">Section title</h2>
            <p class="dark-grey-text mx-auto mb-5 w-75 text-center">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>
            <mdb-row>

              <mdb-col md="12" lg="4" class="mb-lg-0 mb-5">
                <mdb-view hover rounded class="z-depth-1-half mb-4">
                  <img class="img-fluid" src="https://mdbootstrap.com/img/Photos/Others/images/86.jpg" alt="Sample image"/>
                  <a>
                    <mdb-mask overlay="white-slight" class="waves-light"/>
                  </a>
                </mdb-view>
                <mdb-row class="mb-3">
                  <mdb-col col="12">
                    <a><mdb-badge color="pink"><mdb-icon icon="camera" class="pr-2" aria-hidden="true"/>Adventure</mdb-badge></a>
                  </mdb-col>
                </mdb-row>
                <div class="d-flex justify-content-between news">
                  <mdb-col col="11" class="text-truncate pl-0 mb-3">
                    <a class="font-weight-bold">This is title of the news</a>
                  </mdb-col>
                  <a><mdb-icon icon="angle-double-right"/></a>
                </div>
                <div class="d-flex justify-content-between news">
                  <mdb-col col="11" class="text-truncate pl-0 mb-3">
                    <a>24 Food Swaps That Slash Calories.</a>
                  </mdb-col>
                  <a><mdb-icon icon="angle-double-right"/></a>
                </div>
                <div class="d-flex justify-content-between news">
                  <mdb-col col="11" class="text-truncate pl-0 mb-3">
                    <a>How to Make a Beet Cocktail?</a>
                  </mdb-col>
                  <a><mdb-icon icon="angle-double-right"/></a>
                </div>
                <div class="d-flex justify-content-between news">
                  <mdb-col col="11" class="text-truncate pl-0 mb-3">
                    <a>8 Sneaky Reasons You're Always Hungry.</a>
                  </mdb-col>
                  <a><mdb-icon icon="angle-double-right"/></a>
                </div>
                <div class="d-flex justify-content-between mb-4">
                  <mdb-col col="11" class="text-truncate pl-0 mb-3">
                    <a>5 Pressure Cooker Recipes You Need to Try.</a>
                  </mdb-col>
                  <a><mdb-icon icon="angle-double-right"/></a>
                </div>
              </mdb-col>

              <mdb-col md="12" lg="4" class="mb-lg-0 mb-5">
                <mdb-view hover rounded class="z-depth-1-half mb-4">
                  <img class="img-fluid" src="https://mdbootstrap.com/img/Photos/Others/images/31.jpg" alt="Sample image"/>
                  <a>
                    <mdb-mask overlay="white-slight" class="waves-light"/>
                  </a>
                </mdb-view>
                <mdb-row class="mb-3">
                  <mdb-col col="12">
                    <a><mdb-badge color="deep-orange"><mdb-icon icon="plane" class="pr-2" aria-hidden="true"/>Travel</mdb-badge></a>
                  </mdb-col>
                </mdb-row>
                <div class="d-flex justify-content-between news">
                  <mdb-col col="11" class="text-truncate pl-0 mb-3">
                    <a class="font-weight-bold">This is title of the news</a>
                  </mdb-col>
                  <a><mdb-icon icon="angle-double-right"/></a>
                </div>
                <div class="d-flex justify-content-between news">
                  <mdb-col col="11" class="text-truncate pl-0 mb-3">
                    <a>Trends in the blogosphere for 2018.</a>
                  </mdb-col>
                  <a><mdb-icon icon="angle-double-right"/></a>
                </div>
                <div class="d-flex justify-content-between news">
                  <mdb-col col="11" class="text-truncate pl-0 mb-3">
                    <a>Where can you eat the best lunch in Warsaw?</a>
                  </mdb-col>
                  <a><mdb-icon icon="angle-double-right"/></a>
                </div>
                <div class="d-flex justify-content-between news">
                  <mdb-col col="11" class="text-truncate pl-0 mb-3">
                    <a>What camera is worth taking for holidays?</a>
                  </mdb-col>
                  <a><mdb-icon icon="angle-double-right"/></a>
                </div>
                <div class="d-flex justify-content-between mb-4">
                  <mdb-col col="11" class="text-truncate pl-0 mb-3">
                    <a>Why should you visit Lisbon?</a>
                  </mdb-col>
                  <a><mdb-icon icon="angle-double-right"/></a>
                </div>
              </mdb-col>

              <mdb-col md="12" lg="4" class="mb-lg-0 mb-5">
                <mdb-view hover rounded class="z-depth-1-half mb-4">
                  <img class="img-fluid" src="https://mdbootstrap.com/img/Photos/Others/images/52.jpg" alt="Sample image"/>
                  <a>
                    <mdb-mask overlay="white-slight" class="waves-light"/>
                  </a>
                </mdb-view>
                <mdb-row class="mb-3">
                  <mdb-col col="12">
                    <a><mdb-badge color="success-color"><mdb-icon icon="leaf" class="pr-2" aria-hidden="true"/>Nature</mdb-badge></a>
                  </mdb-col>
                </mdb-row>
                <div class="d-flex justify-content-between news">
                  <mdb-col col="11" class="text-truncate pl-0 mb-3">
                    <a class="font-weight-bold">This is title of the news</a>
                  </mdb-col>
                  <a><mdb-icon icon="angle-double-right"/></a>
                </div>
                <div class="d-flex justify-content-between news">
                  <mdb-col col="11" class="text-truncate pl-0 mb-3">
                    <a>How to recognize the footsteps of wild animals?</a>
                  </mdb-col>
                  <a><mdb-icon icon="angle-double-right"/></a>
                </div>
                <div class="d-flex justify-content-between news">
                  <mdb-col col="11" class="text-truncate pl-0 mb-3">
                    <a>National Parks in Poland.</a>
                  </mdb-col>
                  <a><mdb-icon icon="angle-double-right"/></a>
                </div>
                <div class="d-flex justify-content-between news">
                  <mdb-col col="11" class="text-truncate pl-0 mb-3">
                    <a>Traveling without littering the planet.</a>
                  </mdb-col>
                  <a><mdb-icon icon="angle-double-right"/></a>
                </div>
                <div class="d-flex justify-content-between mb-4">
                  <mdb-col col="11" class="text-truncate pl-0 mb-3">
                    <a>How to protect rainforests?</a>
                  </mdb-col>
                  <a><mdb-icon icon="angle-double-right"/></a>
                </div>
              </mdb-col>
            </mdb-row>

          </mdb-container>
        </template>

        <script>
        import { mdbContainer, mdbRow, mdbCol, mdbView, mdbIcon, mdbMask, mdbBadge } from 'mdbvue';

        export default {
          name: 'MagazinePage',
          components: {
            mdbContainer,
            mdbRow,
            mdbCol,
            mdbView,
            mdbIcon,
            mdbMask,
            mdbBadge
          },

        };
        </script>

        <style scoped>
        .news {
          border-bottom: 1px solid #e0e0e0;
          margin-bottom: 1.5rem;
        }
        </style>  

      

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.

avatar

John Doe


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

avatar

Anna Aston


Neque cupiditate assumenda in maiores repudiandae mollitia architecto.

avatar

Maria Kate


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



        <template>
          <mdb-container>
            <section class="text-center my-5">
              <h2 class="h1-responsive font-weight-bold my-5">Testimonials v.1</h2>
              <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>
              <mdb-row>
                <mdb-col lg="4" md="12" class="mb-lg-0 mb-4">
                  <mdb-card testimonial>
                    <mdb-card-up color="info"></mdb-card-up>
                    <mdb-avatar class="mx-auto white">
                      <img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(9).jpg" class="rounded-circle img-fluid"/>
                    </mdb-avatar>
                    <mdb-card-body>
                      <h4 class="font-weight-bold mb-4">John Doe</h4>
                      <hr/>
                      <p class="dark-grey-text mt-4"><mdb-icon icon="quote-left" class="pr-2"></mdb-icon>Lorem ipsum dolor sit amet eos adipisci, consectetur adipisicing elit.</p>
                    </mdb-card-body>
                  </mdb-card>
                </mdb-col>
                <mdb-col lg="4" md="6" class="mb-lg-0 mb-4">
                  <mdb-card testimonial>
                    <mdb-card-up gradient="blue"></mdb-card-up>
                    <mdb-avatar class="mx-auto white">
                      <img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(20).jpg" class="rounded-circle img-fluid"/>
                    </mdb-avatar>
                    <mdb-card-body>
                      <h4 class="font-weight-bold mb-4">Anna Aston</h4>
                      <hr/>
                      <p class="dark-grey-text mt-4"><i class="fa fa-quote-left pr-2"></i>Neque cupiditate assumenda in maiores repudiandae mollitia architecto.</p>
                    </mdb-card-body>
                  </mdb-card>
                </mdb-col>
                <mdb-col lg="4" md="6" class="mb-lg-0 mb-4">
                  <mdb-card testimonial>
                    <mdb-card-up class="indigo"></mdb-card-up>
                    <mdb-avatar class="mx-auto white">
                      <img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(10).jpg" class="rounded-circle img-fluid"/>
                    </mdb-avatar>
                    <mdb-card-body>
                      <h4 class="font-weight-bold mb-4">Maria Kate</h4>
                      <hr/>
                      <p class="dark-grey-text mt-4"><i class="fa fa-quote-left pr-2"></i>Delectus impedit saepe officiis ab aliquam repellat rem unde ducimus.</p>
                    </mdb-card-body>
                  </mdb-card>
                </mdb-col>
              </mdb-row>
            </section>
            <section class="text-center my-5">
          </mdb-container>
        </template>

        <script>
        import { mdbContainer, mdbRow, mdbCol, mdbCard, mdbCardBody, mdbCardUp, mdbAvatar, mdbIcon } from 'mdbvue';

        export default {
          name: 'TestimonialsPage',
          components: {
            mdbContainer,
            mdbRow,
            mdbCol,
            mdbCard,
            mdbCardBody,
            mdbCardUp,
            mdbAvatar,
            mdbIcon
          },
          data() {
            return {
            };
          }
        };
        </script>

        <style scoped>
        </style>

      

Images within grid

Responsive image
Responsive image
Responsive image
Responsive image
Responsive image
Responsive image


        <!-- Grid row -->
        <mdb-row>

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

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

          </mdb-col>
          <!-- Grid column -->

        </mdb-row>
        <!-- Grid row -->

        <!-- Grid row -->
        <mdb-row>

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

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

          </mdb-col>
          <!-- Grid column -->

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

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

          </mdb-col>
          <!-- Grid column -->

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

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

          </mdb-col>
          <!-- Grid column -->

        </mdb-row>
        <!-- Grid row -->

        <!-- Grid row -->
        <mdb-row>

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

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

          </mdb-col>
          <!-- Grid column -->

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

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

          </mdb-col>
          <!-- Grid column -->

        </mdb-row>
        <!-- Grid row -->

      

Shapes of images

Responsive image
Responsive image
Responsive image


        <!-- Grid row -->
        <mdb-row>

          <!-- Grid column -->
          <mdb-col xl="4" md="4" class="mb-3">

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

          </mdb-col>
          <!-- Grid column -->

          <!-- Grid column -->
          <mdb-col xl="5" md="4" class="mb-3 text-center">

            <img src="https://mdbootstrap.com/img/Photos/Avatars/img(31).jpg" class="img-fluid z-depth-1 rounded-circle"
              alt="Responsive image">

          </mdb-col>
          <!-- Grid column -->

          <!-- Grid column -->
          <mdb-col xl="3" md="4" class="mb-3 text-right">

            <img src="https://mdbootstrap.com/img/Photos/Avatars/img(30).jpg" class="img-fluid z-depth-1" alt="Responsive image">

          </mdb-col>
          <!-- Grid column -->

        </mdb-row>
        <!-- Grid row -->