Bootstrap Images

Bootstrap images are automatically adjusted to all screen sizes - image will never be larger than parent elements. Its styles can be changed via classes.

Responsive images

Images in Bootstrap are made responsive with .img-fluid. max-width: 100%; and height: auto; are applied to the image so that it scales with the parent element.

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

SVG images and IE 9-10

In Internet Explorer 9-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.

                
<img src="..." alt="placeholder" class="img-thumbnail">

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="float-left" alt="placeholder">
<img src="..." class="float-right" alt="placeholder">


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


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

Images with shadows

Add one of the following classes:

.z-depth-1
.z-depth-1-half
.z-depth-2
.z-depth-3
.z-depth-4
.z-depth-5

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

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

Images with patterns

Image of ballons flying over canyons with mask pattern one.

.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

                
<div class="view">
    <img src="https://mdbootstrap.com/img/Photos/Others/nature-sm.jpg" 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 effect

Shadow effect

Add one of the following classes:

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

                
<!--Zoom effect-->
<div class="view overlay hm-zoom">
    <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/6-col/img%20(131).jpg" 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).jpg" class="img-fluid rounded-circle hoverable" alt="hoverable">

Images with waves effects

Click on the images to see the effect

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

Images within lightbox MDB Pro component

                
// MDB Lightbox Init
$(function () {
    $("#mdb-lightbox-ui").load("mdb-addons/mdb-lightbox-ui.html");
});

                
<div class="row">
    <div class="col-md-12">

        <div id="mdb-lightbox-ui"></div>

        <div class="mdb-lightbox">

            <figure class="col-md-4">
                <a href="https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(145).jpg" data-size="1600x1067">
                    <img src="https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(145).jpg" alt="placeholder" class="img-fluid">
                </a>
            </figure>

            <figure class="col-md-4">
                <a href="https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(150).jpg" data-size="1600x1067">
                    <img src="https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(150).jpg" alt="placeholder" class="img-fluid" />
                </a>
            </figure>

            <figure class="col-md-4">
                <a href="https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(152).jpg" data-size="1600x1067">
                    <img src="https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(152).jpg" alt="placeholder" class="img-fluid" />
                </a>
            </figure>

            <figure class="col-md-4">
                <a href="https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(42).jpg" data-size="1600x1067">
                    <img src="https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(42).jpg" alt="placeholder" class="img-fluid" />
                </a>
            </figure>

            <figure class="col-md-4">
                <a href="https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(151).jpg" data-size="1600x1067">
                    <img src="https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(151).jpg" alt="placeholder" class="img-fluid" />
                </a>
            </figure>

            <figure class="col-md-4">
                <a href="https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(40).jpg" data-size="1600x1067">
                    <img src="https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(40).jpg" alt="placeholder" class="img-fluid" />
                </a>
            </figure>

            <figure class="col-md-4">
                <a href="https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(148).jpg" data-size="1600x1067">
                    <img src="https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(148).jpg" alt="placeholder" class="img-fluid" />
                </a>
            </figure>

            <figure class="col-md-4">
                <a href="https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(147).jpg" data-size="1600x1067">
                    <img src="https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(147).jpg" alt="placeholder" class="img-fluid" />
                </a>
            </figure>

            <figure class="col-md-4">
                <a href="https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(149).jpg" data-size="1600x1067">
                    <img src="https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(149).jpg" alt="placeholder" class="img-fluid" />
                </a>
            </figure>

        </div>

    </div>
</div>

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.

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

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

        <!--Card Wider-->
        <div class="card card-cascade wider">

            <!--Card image-->
            <div class="view overlay hm-white-slight">
                <img src="https://mdbootstrap.com/img/Photos/Horizontal/People/6-col/img%20%283%29.jpg" class="img-fluid" alt="wider">
                <a href="#!">
                    <div class="mask"></div>
                </a>
            </div>
            <!--/Card image-->

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

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

                
                <!--Linkedin-->
                <a class="icons-sm li-ic"><i class="fa fa-linkedin"> </i></a>
                <!--Twitter-->
                <a class="icons-sm tw-ic"><i class="fa fa-twitter"> </i></a>
                <!--Dribbble-->
                <a class="icons-sm fb-ic"><i class="fa fa-facebook"> </i></a>

            </div>
            <!--/.Card content-->

        </div>
        <!--/.Card Wider-->

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

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

        <!--Card Narrower-->
        <div class="card card-cascade narrower">

            <!--Card image-->
            <div class="view overlay hm-white-slight">
                <img src="https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(147).jpg" class="img-fluid" alt="narrower">
                <a>
                    <div class="mask"></div>
                </a>
            </div>
            <!--/.Card image-->

            <!--Card content-->
            <div class="card-body">
                <h5 class="pink-text"><i class="fa fa-cutlery"></i> Culinary</h5>
                <!--Title-->
                <h4 class="card-title">Cheat day inspirations</h4>
                <!--Text-->
                <p class="card-text">Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi.</p>
                <a class="btn btn-unique">Button</a>
            </div>
            <!--/.Card content-->

        </div>
        <!--/.Card Narrower-->

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

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

        <!--Card Regular-->
        <div class="card card-cascade">

            <!--Card image-->
            <div class="view overlay hm-white-slight">
                <img src="https://mdbootstrap.com/img/Photos/Others/men.jpg" class="img-fluid" alt="normal">
                <a>
                    <div class="mask"></div>
                </a>
            </div>
            <!--/.Card image-->

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

                <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus, ex, recusandae. Facere modi sunt, quod quibusdam.
                </p>

                <!--Facebook-->
                <a type="button" class="btn-floating btn-small btn-fb"><i class="fa fa-facebook"></i></a>
                <!--Twitter-->
                <a type="button" class="btn-floating btn-small btn-tw"><i class="fa fa-twitter"></i></a>
                <!--Google +-->
                <a type="button" class="btn-floating btn-small btn-dribbble"><i class="fa fa-dribbble"></i></a>

            </div>
            <!--/.Card content-->

        </div>
        <!--/.Card Regular-->

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

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

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 anim id est laborum.

                
<!--Section: Magazine v.3-->
<section class="section magazine-section multi-columns">

    <!--Section heading-->
    <h2 class="section-heading h1 mt-5">Section title</h2>

    <!--Section description-->
    <p class="section-description">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 anim id est laborum.</p>

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

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

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

                <!--Image-->
                <a href="" class="orange-text mb-1"><h6><i class="fa fa-coffee"></i><strong> Health</strong></h6></a>

                <div class="view overlay hm-white-slight z-depth-1-half">
                    <img src="https://mdbootstrap.com/img/Photos/Others/img%20(29).jpg" class="img-fluid" alt="First sample image">
                    <a>
                        <div class="mask"></div>
                    </a>
                </div>
                <a><strong>This is title of the news.</strong>
                    <i class="fa fa-angle-right"></i>
                </a>

            </div>
            <!--/Featured news-->

            <!--Small news-->
            <div class="single-news">
                <a>24 Food Swaps That Slash Calories.
                    <i class="fa fa-angle-right"></i>
                </a>
            </div>
            <!--/Small news-->

            <!--Small news-->
            <div class="single-news">
                <a>How to Make a Beet Cocktail?
                    <i class="fa fa-angle-right"></i>
                </a>
            </div>
            <!--/Small news-->

            <!--Small news-->
            <div class="single-news">
                <a>8 Sneaky Reasons You're Always Hungry.
                    <i class="fa fa-angle-right"></i>
                </a>
            </div>
            <!--/Small news-->

            <!--Small news-->
            <div class="single-news">
                <a>5 Pressure Cooker Recipes You Need to Try.
                    <i class="fa fa-angle-right"></i>
                </a>
            </div>
            <!--/Small news-->

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

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

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

                <!--Image-->
                <a href="" class="green-text"><h6><i class="fa fa-diamond"></i><strong> Lifestyle</strong></h6></a>

                <div class="view overlay hm-white-slight z-depth-1-half">
                    <img src="https://mdbootstrap.com/img/Photos/Horizontal/City/4-col/img%20(51).jpg" class="img-fluid" alt="Second sample image">
                    <a>
                        <div class="mask"></div>
                    </a>
                </div>

                <a><strong>This is title of the news.</strong>
                    <i class="fa fa-angle-right"></i>
                </a>

            </div>
            <!--/Featured news-->

            <!--Small news-->
            <div class="single-news">
                <a>Trends in the blogosphere for 2016.
                    <i class="fa fa-angle-right"></i>
                </a>
            </div>
            <!--/Small news-->

            <!--Small news-->
            <div class="single-news">
                <a>Where you eat the best lunch in Warsaw?
                    <i class="fa fa-angle-right"></i>
                </a>
            </div>
            <!--/Small news-->

            <!--Small news-->
            <div class="single-news">
                <a>What camera take for holidays?
                    <i class="fa fa-angle-right"></i>
                </a>
            </div>
            <!--/Small news-->

            <!--Small news-->
            <div class="single-news">
                <a>Why you should visit Lisbon?
                    <i class="fa fa-angle-right"></i>
                </a>
            </div>
            <!--/Small news-->

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

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

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

                <!--Image-->
                <a href="" class="pink-text"><h6><i class="fa fa-camera"></i><strong> Photography</strong></h6></a>

                <div class="view overlay hm-white-slight z-depth-1-half">
                    <img src="https://mdbootstrap.com/img/Photos/Others/img%20(33).jpg" class="img-fluid" alt="Third sample image">
                    <a>
                        <div class="mask"></div>
                    </a>
                </div>

                <a><strong>This is title of the news.</strong>
                    <i class="fa fa-angle-right"></i>
                </a>

            </div>
            <!--/Featured news-->

            <!--Small news-->
            <div class="single-news">
                <a>Top models in Poland.
                    <i class="fa fa-angle-right"></i>
                </a>
            </div>
            <!--/Small news-->

            <!--Small news-->
            <div class="single-news">
                <a>London Fashion Week - see online.
                    <i class="fa fa-angle-right"></i>
                </a>
            </div>
            <!--/Small news-->

            <!--Small news-->
            <div class="single-news">
                <a>Best bags designers in Italy.
                    <i class="fa fa-angle-right"></i>
                </a>
            </div>
            <!--/Small news-->

            <!--Small news-->
            <div class="single-news">
                <a>Choose best swimsuit for summer.
                    <i class="fa fa-angle-right"></i>
                </a>
            </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.

                
<!--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-r">

            <!--Card-->
            <div class="card testimonial-card">

                <!--Background color-->
                <div class="card-up teal lighten-2">
                </div>

                <!--Avatar-->
                <div class="avatar"><img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(27).jpg" alt="avatar" class="rounded-circle img-responsive">
                </div>

                <div class="card-body">
                    <!--Name-->
                    <h4 class="card-title mt-1">John Doe</h4>
                    <hr>
                    <!--Quotation-->
                    <p><i class="fa fa-quote-left"></i> 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-r">

            <!--Card-->
            <div class="card testimonial-card">

                <!--Background color-->
                <div class="card-up blue lighten-2">
                </div>

                <!--Avatar-->
                <div class="avatar"><img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(20).jpg" alt="avatar"  class="rounded-circle img-responsive">
                </div>

                <div class="card-body">
                    <!--Name-->
                    <h4 class="card-title mt-1">Anna Aston</h4>
                    <hr>
                    <!--Quotation-->
                    <p><i class="fa fa-quote-left"></i> 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-r">

            <!--Card-->
            <div class="card testimonial-card">

                <!--Background color-->
                <div class="card-up deep-purple lighten-2"></div>

                <!--Avatar-->
                <div class="avatar"><img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(10).jpg" alt="avatar"  class="rounded-circle img-responsive">
                </div>

                <div class="card-body">
                    <!--Name-->
                    <h4 class="card-title mt-1">Maria Kate</h4>
                    <hr>
                    <!--Quotation-->
                    <p><i class="fa fa-quote-left"></i> Delectus impedit saepe officiis ab aliquam repellat, rem totam unde ducimus.</p>
                </div>

            </div>
            <!--Card-->

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

    </div>

</section>
<!--Section: Testimonials v.1-->

Images within grid

                
<!-- 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).jpg" 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).jpg" 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).jpg" 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).jpg" 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).jpg" 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).jpg" class="img-fluid z-depth-1" alt="Responsive image">

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

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

Shapes of images

                
<!-- 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).jpg" 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).jpg" 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).jpg" class="img-fluid z-depth-1" alt="Responsive image">

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

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

Images within carousel

                
<!--Carousel Wrapper-->
<div id="carousel-example-1z" class="carousel slide carousel-fade" data-ride="carousel">
    <!--Indicators-->
    <ol class="carousel-indicators">
        <li data-target="#carousel-example-1z" data-slide-to="0" class="active"></li>
        <li data-target="#carousel-example-1z" data-slide-to="1"></li>
        <li data-target="#carousel-example-1z" data-slide-to="2"></li>
    </ol>
    <!--/.Indicators-->
    <!--Slides-->
    <div class="carousel-inner" role="listbox">
        <!--First slide-->
        <div class="carousel-item active">
            <img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(141).jpg" alt="First slide">
        </div>
        <!--/First slide-->
        <!--Second slide-->
        <div class="carousel-item">
            <img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(136).jpg" alt="Second slide">
        </div>
        <!--/Second slide-->
        <!--Third slide-->
        <div class="carousel-item">
            <img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(137).jpg" alt="Third slide">
        </div>
        <!--/Third slide-->
    </div>
    <!--/.Slides-->
    <!--Controls-->
    <a class="carousel-control-prev" href="#carousel-example-1z" role="button" data-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
    </a>
    <a class="carousel-control-next" href="#carousel-example-1z" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>
    <!--/.Controls-->
</div>
<!--/.Carousel Wrapper-->