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
<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, 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.
<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.
<img src="..." class="rounded float-left" alt="...">
<img src="..." class="rounded float-right" alt="...">
<img src="..." class="rounded mx-auto d-block" alt="...">
<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
<img src="https://mdbootstrap.com/img/Photos/Slides/img%20(54).jpg" class="img-fluid z-depth-1" alt="1">
Images with overlays
super light overlay
light overlay
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
.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
<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
Shadow effect
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 lightbox MDB Pro component
<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>
<style scoped>
</style>
Images within cards MDB Pro component
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
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.
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.
<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>
<style scoped>
</style>
Images within grid
<!-- 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
<!-- 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 -->
Images within carousel
<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>
Warning: file_get_contents(common/gs.html): failed to open stream: No such file or directory in /var/www/html/legacy/vue/5.8.3/index.php on line 143