Vue Bootstrap Images
Vue 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
Images in MDB are made responsive with .img-fluid. This applies max-width: 100%; and height: auto; to the image so that it scales with the parent width.
<template>
<img src="..." class="img-fluid" alt="Responsive image">
</template>
SVG images and IE 10
In Internet Explorer 10, SVG images with
.img-fluidare disproportionately sized. To fix this, addwidth: 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.
-mini.jpg)
<template>
<img src="https://mdbootstrap.com/img/Others/documentation/img%20(75)-mini.jpg" alt="thumbnail" class="img-thumbnail"
style="width: 200px">
</template>
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.
<template>
<div>
<img src="..." class="rounded float-left" alt="...">
<img src="..." class="rounded float-right" alt="...">
</div>
</template>
<template>
<img src="..." class="rounded mx-auto d-block" alt="...">
</template>
<template>
<div class="text-center">
<img src="..." class="rounded" alt="...">
</div>
</template>
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.
<template>
<picture>
<source srcset="..." type="image/svg+xml">
<img src="..." class="img-fluid img-thumbnail" alt="...">
</picture>
</template>
Images with shadows
Apply a shadow to create a depth effect in the image.
-mini.jpg)
<template>
<img src="https://mdbootstrap.com/img/Photos/Slides/img%20(54).jpg" class="img-fluid z-depth-1" alt="1">
</template>
Images with overlays
Use effect that covers with color and defined level of opacity the entire image.
super light overlay
light overlay
strong overlay
<template>
<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>
</template>
<script>
import { mdbView, mdbMask } from 'mdbvue';
export default {
name: 'CarouselPage',
components: {
mdbView,
mdbMask
}
};
</script>
Info notification
Take a look at our masks section to know all the colors possibilities.
Images with patterns
Make content more visible in the image by either partially or fully hiding it.
.pattern-1
.pattern-2
.pattern-3
.pattern-4
.pattern-5
.pattern-6
.pattern-7
.pattern-8
.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
<template>
<mdb-view src="https://mdbootstrap.com/img/Photos/Others/nature-sm.jpg" alt="">
<mdb-mask pattern="1" flex-center text="pattern = 1" />
</mdb-view>
</template>
<script>
import { mdbView, mdbMask } from 'mdbvue';
export default {
name: 'CarouselPage',
components: {
mdbView,
mdbMask
}
};
</script>
Images with hover effects
Hover effect appears when the user positions the cursor over an image without activating it
Strong overlay
Light overlay
Super light overlay
-mini.jpg)
Zoom effect
Shadow effect
Add one of the following classes:
.zoom.hoverable
<template>
<div>
<!--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">
</div>
</template>
<script>
import { mdbView, mdbMask } from 'mdbvue';
export default {
name: 'CarouselPage',
components: {
mdbView,
mdbMask
}
};
</script>
Images with waves effects
Use radial action in the form of a visual ripple expanding outward from the user’s touch.
2-mini.jpg)
-mini.jpg)
<template>
<div>
<!--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>
</div>
</template>
<script>
import { mdbView, mdbMask } from 'mdbvue';
export default {
name: 'CarouselPage',
components: {
mdbView,
mdbMask
}
};
</script>
Images within lightbox MDB Pro component
Use the lightbox to enlarge an image from the gallery.
-mini.jpg)
-mini.jpg)
-mini.jpg)
-mini.jpg)
-mini.jpg)
-mini.jpg)
-mini.jpg)
-mini.jpg)
-mini.jpg)
<template>
<div>
<mdb-container class="mt-5">
<mdb-row class="mdb-lightbox">
<mdb-col md="4" @click.native="show(0)">
<figure>
<img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(117).jpg" class="img-fluid" alt="">
</figure>
</mdb-col>
<mdb-col md="4" @click.native="show(1)">
<figure>
<img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(98).jpg" class="img-fluid" alt="">
</figure>
</mdb-col>
<mdb-col md="4" @click.native="show(2)">
<figure>
<img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(131).jpg" class="img-fluid" alt="">
</figure>
</mdb-col>
<mdb-col md="4" @click.native="show(3)">
<figure>
<img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(123).jpg" class="img-fluid" alt="">
</figure>
</mdb-col>
<mdb-col md="4" @click.native="show(4)">
<figure>
<img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(118).jpg" class="img-fluid" alt="">
</figure>
</mdb-col>
<mdb-col md="4" @click.native="show(5)">
<figure>
<img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(128).jpg" class="img-fluid" alt="">
</figure>
</mdb-col>
<mdb-col md="4" @click.native="show(6)">
<figure>
<img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(132).jpg" class="img-fluid" alt="">
</figure>
</mdb-col>
<mdb-col md="4" @click.native="show(7)">
<figure>
<img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(115).jpg" class="img-fluid" alt="">
</figure>
</mdb-col>
<mdb-col md="4" @click.native="show(8)">
<figure>
<img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(133).jpg" class="img-fluid" alt="">
</figure>
</mdb-col>
</mdb-row>
</mdb-container>
<mdb-lightbox
:visible="visible"
:imgs="imgs"
:index="index"
@hide="handleHide"
></mdb-lightbox>
</div>
</template>
<script>
import { mdbLightbox, mdbContainer, mdbRow, mdbCol } from 'mdbvue';
export default {
components: {
mdbLightbox,
mdbContainer,
mdbRow,
mdbCol
},
data() {
return {
imgs: [
'https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(117).jpg',
'https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(98).jpg',
'https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(131).jpg',
'https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(123).jpg',
'https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(118).jpg',
'https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(128).jpg',
'https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(132).jpg',
'https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(115).jpg',
'https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(133).jpg'
],
visible: false,
index: 0
};
},
methods: {
show(index) {
this.index = index;
this.visible = true;
},
handleHide() {
this.visible = false;
}
}
};
</script>
Images within cards MDB Pro component
Images are also great to use with Cards.
-mini.jpg)
Culinary
Cheat day inspirations
Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi.
Button
<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 fab icon="linkedin" /></a>
<a class="fa-lg tw-ic px-2">
<mdb-icon fab icon="twitter" /></a>
<a class="fa-lg fb-ic px-2">
<mdb-icon fab 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 fab icon="utensils" /> 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 fab icon="facebook" />
</mdb-btn>
<mdb-btn tag="a" floating small class="btn-tw">
<mdb-icon fab icon="twitter" />
</mdb-btn>
<mdb-btn tag="a" floating small class="btn-dribbble">
<mdb-icon fab 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
You can also use the images as a presentation in the magazine information section.
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
Avatars are also great for simple Cards.
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.
-mini.webp)
John Doe
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos, adipisci.
-mini.webp)
Anna Aston
Neque cupiditate assumenda in maiores repudiandae mollitia architecto.
-mini.webp)
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="fas 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="fas 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>
Images within grid
Image gallery that varies between four, two or full-width images.
.jpg)
-mini.jpg)
-mini.jpg)
-mini.jpg)
-mini.jpg)
-mini.jpg)
<template>
<div>
<!-- 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 -->
</div>
</template>
Shapes of images
You can change the shape of the image by using borders utilities.
-mini.jpg)
.jpg)
.jpg)
<template>
<div>
<!-- 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 -->
</div>
</template>
Images within carousel
Navigate through a collection of images in a sequential fashion, moving to the previous/next one through the arrows on the sides.
-mini.webp)
-mini.webp)
-mini.webp)
<template>
<mdb-carousel :interval="8000" showControls>
<mdb-carousel-item img src="https://mdbootstrap.com/img/Photos/Slides/img%20(68).jpg" alt="First slide" />
<mdb-carousel-item img src="https://mdbootstrap.com/img/Photos/Slides/img%20(6).jpg" alt="Second slide" />
<mdb-carousel-item img src="https://mdbootstrap.com/img/Photos/Slides/img%20(9).jpg" alt="Third slide" />
</mdb-carousel>
</template>
<script>
import { mdbCarousel, mdbCarouselItem } from 'mdbvue';
export default {
name: 'CarouselPage',
components: {
mdbCarousel,
mdbCarouselItem
}
};
</script>