Angular Images - Bootstrap 4 & Material Design

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

      

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

      

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

      

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

      

        <div class="view">
          <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 rgba-teal-strong">
            <p class="white-text">strong overlay</p>
          </div>
        </div>

      

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

      

        <!--Zoom effect-->
        <div class="view overlay 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">

      

        <!--Mask with wave-->
        <div class="view overlay">
          <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 rgba-white-slight"></div>
          </a>
        </div>
        <!--Mask with wave-->
        <div class="view overlay">
          <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 rgba-white-slight"></div>
          </a>
        </div>

      

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

      

        <!-- 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 view-cascade overlay">
                <img src="https://mdbootstrap.com/img/Photos/Horizontal/People/6-col/img%20%283%29.jpg" class="card-img-top"
                  alt="wider">
                <a href="#!">
                  <div class="mask rgba-white-slight"></div>
                </a>
              </div>
              <!--/Card image-->

              <!--Card content-->
              <div class="card-body card-body-cascade 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="fab fa-linkedin-in"> </i></a>
                <!--Twitter-->
                <a class="icons-sm tw-ic"><i class="fab fa-twitter"> </i></a>
                <!--Dribbble-->
                <a class="icons-sm fb-ic"><i class="fab fa-facebook-f"> </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 view-cascade overlay">
                <img src="https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(147).jpg" class="card-img-top"
                  alt="narrower">
                <a>
                  <div class="mask rgba-white-slight"></div>
                </a>
              </div>
              <!--/.Card image-->

              <!--Card content-->
              <div class="card-body card-body-cascade">
                <h5 class="pink-text"><i class="fas fa-utensils"></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 view-cascade overlay">
                <img src="https://mdbootstrap.com/img/Photos/Others/men.jpg" class="card-img-top" alt="normal">
                <a>
                  <div class="mask rgba-white-slight"></div>
                </a>
              </div>
              <!--/.Card image-->

              <!--Card content-->
              <div class="card-body card-body-cascade 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="fab fa-facebook-f"></i></a>
                <!--Twitter-->
                <a type="button" class="btn-floating btn-small btn-tw"><i class="fab fa-twitter"></i></a>
                <!--Google +-->
                <a type="button" class="btn-floating btn-small btn-dribbble"><i class="fab fa-dribbble"></i></a>

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

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

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

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

      

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

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

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

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

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

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

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

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

                    <!-- Badge -->
                    <a href="#!"><span class="badge pink"><i class="fas fa-camera pr-2" aria-hidden="true"></i>Adventure</span></a>

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

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

                <!-- Title -->
                <div class="d-flex justify-content-between">
                  <div class="col-11 text-truncate pl-0 mb-3">
                    <a class="font-weight-bold">This is title of the news</a>
                  </div>
                  <a><i class="fas fa-angle-double-right"></i></a>
                </div>

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

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

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

              </div>
              <!-- Small news -->

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

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

              </div>
              <!-- Small news -->

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

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

              </div>
              <!-- Small news -->

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

                <!-- Title -->
                <div class="d-flex justify-content-between">
                  <div class="col-11 text-truncate pl-0">
                    <a>5 Pressure Cooker Recipes You Need to Try.</a>
                  </div>
                  <a><i class="fas fa-angle-double-right"></i></a>
                </div>

              </div>
              <!-- Small news -->

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

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

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

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

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

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

                    <!-- Badge -->
                    <a href="#!"><span class="badge deep-orange"><i class="fas fa-plane pr-2" aria-hidden="true"></i>Travel</span></a>

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

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

                <!-- Title -->
                <div class="d-flex justify-content-between">
                  <div class="col-11 text-truncate pl-0 mb-3">
                    <a class="font-weight-bold">This is title of the news</a>
                  </div>
                  <a><i class="fas fa-angle-double-right"></i></a>
                </div>

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

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

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

              </div>
              <!-- Small news -->

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

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

              </div>
              <!-- Small news -->

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

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

              </div>
              <!-- Small news -->

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

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

              </div>
              <!-- Small news -->

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

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

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

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

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

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

                    <!-- Badge -->
                    <a href="#!"><span class="badge success-color"><i class="fas fa-plane pr-2" aria-hidden="true"></i>Nature</span></a>

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

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

                <!-- Title -->
                <div class="d-flex justify-content-between">
                  <div class="col-11 text-truncate pl-0 mb-3">
                    <a class="font-weight-bold">This is title of the news</a>
                  </div>
                  <a><i class="fas fa-angle-double-right"></i></a>
                </div>

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

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

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

              </div>
              <!-- Small news -->

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

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

              </div>
              <!-- Small news -->

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

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

              </div>
              <!-- Small news -->

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

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

              </div>
              <!-- Small news -->

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

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

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

      

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

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

          <div class="row">

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

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

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

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

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

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

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

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

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

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

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

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

                <div class="card-body">
                  <!--Name-->
                  <h4 class="card-title mt-1">Maria Kate</h4>
                  <hr>
                  <!--Quotation-->
                  <p><i class="fas 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-->

      

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

      

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

      

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