Rate this docs

React Bootstrap Images

React Images - Bootstrap 4 & Material Design

React 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

Responsive image
Responsive image
Responsive image

          import React from "react";
          import { MDBContainer, MDBRow, MDBCol } from "mdbreact";
          
          class MasksPage extends React.Component {
            render() {
              return (
                <MDBContainer className="mt-5">
                  <MDBRow className="mb-4">
                    <MDBCol md="4">
                      <img src="https://mdbootstrap.com/img/Others/documentation/1.jpg" className="img-fluid" alt="" />
                    </MDBCol>
                  </MDBRow>
                  <MDBRow className="mb-4">
                    <MDBCol md="6">
                      <img src="https://mdbootstrap.com/img/Others/documentation/1.jpg" className="img-fluid" alt="" />
                    </MDBCol>
                  </MDBRow>
                  <MDBRow className="mb-4">
                    <MDBCol md="8">
                      <img src="https://mdbootstrap.com/img/Others/documentation/1.jpg" className="img-fluid" alt="" />
                    </MDBCol>
                  </MDBRow>
                </MDBContainer>
              );
            }
          }
          
          export default MasksPage;         
      

SVG images and IE 10

In Internet Explorer 10, SVG images with .img-fluid are disproportionately sized. To fix this, add width: 100% \9; where necessary. This fix improperly sizes other image formats, so Bootstrap doesn’t apply it automatically.

Image thumbnails

In addition to our border-radius utilities, you can use .img-thumbnail to give an image a rounded 1px border appearance.

thumbnail

          <MDBRow>
            <MDBCol>
              <img src="https://mdbootstrap.com/img/Others/documentation/img%20(75)-mini.jpg" alt="thumbnail" className="img-thumbnail" />
            </MDBCol>
          </MDBRow>
      

Aligning Images

Align images with the helper float classes or text alignment classes . block-level images can be centered using the .mx-auto margin utility class.

aligment aligment

          <MDBRow>
            <MDBCol>
              <img src="https://mdbootstrap.com/img/Photos/Avatars/avatar-1.jpg" className="rounded float-left" alt="aligment" />
              <img src="https://mdbootstrap.com/img/Photos/Avatars/avatar-1.jpg" className="rounded float-right" alt="aligment" />
            </MDBCol>
          </MDBRow>
      
aligment

          <MDBRow>
            <MDBCol>
              <img src="https://mdbootstrap.com/img/Photos/Avatars/avatar-1.jpg" className="rounded mx-auto d-block" alt="aligment" />
            </MDBCol>
          </MDBRow>
      

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.


Images with shadows

1
2
3
4
5
6

          import React from "react";
          import { MDBContainer, MDBRow, MDBCol } from "mdbreact";
          
          class MasksPage extends React.Component {
            render() {
              return (
                <MDBContainer className="mt-5">
                  <MDBRow>
                    <MDBCol lg="4" md="12" className="mb-4">
                      <img src="https://mdbootstrap.com/img/Others/documentation/img%20(55)-mini.jpg" className="img-fluid z-depth-1" alt="" />
                    </MDBCol>
                    <MDBCol lg="4" md="6" className="mb-4">
                      <img src="https://mdbootstrap.com/img/Others/documentation/img%20(55)-mini.jpg" className="img-fluid z-depth-1-half"
                        alt="" />
                    </MDBCol>
                    <MDBCol lg="4" md="6" className="mb-4">
                      <img src="https://mdbootstrap.com/img/Others/documentation/img%20(55)-mini.jpg" className="img-fluid z-depth-2" alt="" />
                    </MDBCol>
                  </MDBRow>
                  <MDBRow>
                    <MDBCol lg="4" md="12" className="mb-4">
                      <img src="https://mdbootstrap.com/img/Others/documentation/img%20(55)-mini.jpg" className="img-fluid z-depth-3" alt="" />
                    </MDBCol>
                    <MDBCol lg="4" md="6" className="mb-4">
                      <img src="https://mdbootstrap.com/img/Others/documentation/img%20(55)-mini.jpg" className="img-fluid z-depth-4" alt="" />
                    </MDBCol>
                    <MDBCol lg="4" md="6" className="mb-4">
                      <img src="https://mdbootstrap.com/img/Others/documentation/img%20(55)-mini.jpg" className="img-fluid z-depth-5" alt="" />
                    </MDBCol>
                  </MDBRow>
                </MDBContainer>
              );
            }
          }
          
          export default MasksPage;          
      

Images with overlays

placeholder

super light overlay

placeholder

light overlay

placeholder

strong overlay

Info notification

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


          import React from "react";
          import { MDBMask, MDBView, MDBContainer, MDBRow, MDBCol } from "mdbreact";
          
          class MasksPage extends React.Component {
            render() {
              return (
                <MDBContainer className="mt-5">
                  <MDBRow className="mt-4">
                    <MDBCol md="4">
                      <MDBView>
                        <img
                          src="https://mdbootstrap.com/img/Others/documentation/forest-sm-mini.jpg"
                          className="img-fluid"
                          alt=""
                        />
                        <MDBMask className="flex-center" overlay="teal-slight">
                          <p className="white-text">super light overlay</p>
                        </MDBMask>
                      </MDBView>
                    </MDBCol>
                    <MDBCol md="4">
                      <MDBView>
                        <img
                          src="https://mdbootstrap.com/img/Others/documentation/forest-sm-mini.jpg"
                          className="img-fluid"
                          alt=""
                        />
                        <MDBMask className="flex-center" overlay="teal-light">
                          <p className="white-text">light overlay</p>
                        </MDBMask>
                      </MDBView>
                    </MDBCol>
                    <MDBCol md="4">
                      <MDBView waves>
                        <img
                          src="https://mdbootstrap.com/img/Others/documentation/forest-sm-mini.jpg"
                          className="img-fluid"
                          alt=""
                        />
                        <MDBMask className="flex-center" overlay="teal-strong">
                          <p className="white-text">strong overlay</p>
                        </MDBMask>
                      </MDBView>
                    </MDBCol>
                  </MDBRow>
                </MDBContainer>
              );
            }
          }
          
          export default MasksPage;          
      

Images with patterns

Image of ballons flying over canyons with mask pattern one.

.pattern-1

placeholder

.pattern-2

Image of ballons flying over canyons with mask pattern one.

.pattern-3

Image of ballons flying over canyons with mask pattern one.

.pattern-4

placeholder

.pattern-5

Image of ballons flying over canyons with mask pattern one.

.pattern-6

Image of ballons flying over canyons with mask pattern one.

.pattern-7

placeholder

.pattern-8

Image of ballons flying over canyons with mask pattern one.

.pattern-9


          import React from "react";
          import { MDBMask, MDBView, MDBContainer, MDBRow, MDBCol } from "mdbreact";
          
          class MasksPage extends React.Component {
            render() {
              return (
                <MDBContainer className="mt-5">
                  <MDBRow>
                    <MDBCol md="4">
                      <MDBView>
                        <img
                          src="https://mdbootstrap.com/img/Photos/Others/nature-sm.jpg"
                          className="img-fluid"
                          alt=""
                        />
                        <MDBMask pattern={1} className="flex-center">
                          <p className="white-text">patern 1</p>
                        </MDBMask>
                      </MDBView>
                    </MDBCol>
                    <MDBCol md="4">
                      <MDBView>
                        <img
                          src="https://mdbootstrap.com/img/Photos/Others/nature-sm.jpg"
                          className="img-fluid"
                          alt=""
                        />
                        <MDBMask pattern={2} className="flex-center">
                          <p className="white-text">patern 2</p>
                        </MDBMask>
                      </MDBView>
                    </MDBCol>
                    <MDBCol md="4">
                      <MDBView waves>
                        <img
                          src="https://mdbootstrap.com/img/Photos/Others/nature-sm.jpg"
                          className="img-fluid"
                          alt=""
                        />
                        <MDBMask pattern={3} className="flex-center">
                          <p className="white-text">patern 3</p>
                        </MDBMask>
                      </MDBView>
                    </MDBCol>
                  </MDBRow>
                  <MDBRow className="mt-4">
                    <MDBCol md="4">
                      <MDBView>
                        <img
                          src="https://mdbootstrap.com/img/Photos/Others/nature-sm.jpg"
                          className="img-fluid"
                          alt=""
                        />
                        <MDBMask className="flex-center" pattern={4}>
                          <p className="white-text">patern 4</p>
                        </MDBMask>
                      </MDBView>
                    </MDBCol>
                    <MDBCol md="4">
                      <MDBView>
                        <img
                          src="https://mdbootstrap.com/img/Photos/Others/nature-sm.jpg"
                          className="img-fluid"
                          alt=""
                        />
                        <MDBMask className="flex-center" pattern={5}>
                          <p className="white-text">patern 5</p>
                        </MDBMask>
                      </MDBView>
                    </MDBCol>
                    <MDBCol md="4">
                      <MDBView waves>
                        <img
                          src="https://mdbootstrap.com/img/Photos/Others/nature-sm.jpg"
                          className="img-fluid"
                          alt=""
                        />
                        <MDBMask className="flex-center" pattern={6}>
                          <p className="white-text">patern 6</p>
                        </MDBMask>
                      </MDBView>
                    </MDBCol>
                  </MDBRow>
                  <MDBRow className="mt-4">
                    <MDBCol md="4">
                      <MDBView>
                        <img
                          src="https://mdbootstrap.com/img/Photos/Others/nature-sm.jpg"
                          className="img-fluid"
                          alt=""
                        />
                        <MDBMask className="flex-center" pattern={7}>
                          <p className="white-text">patern 7</p>
                        </MDBMask>
                      </MDBView>
                    </MDBCol>
                    <MDBCol md="4">
                      <MDBView>
                        <img
                          src="https://mdbootstrap.com/img/Photos/Others/nature-sm.jpg"
                          className="img-fluid"
                          alt=""
                        />
                        <MDBMask className="flex-center" pattern={8}>
                          <p className="white-text">patern 8</p>
                        </MDBMask>
                      </MDBView>
                    </MDBCol>
                    <MDBCol md="4">
                      <MDBView waves>
                        <img
                          src="https://mdbootstrap.com/img/Photos/Others/nature-sm.jpg"
                          className="img-fluid"
                          alt=""
                        />
                        <MDBMask className="flex-center" pattern={9}>
                          <p className="white-text">patern 9</p>
                        </MDBMask>
                      </MDBView>
                    </MDBCol>
                  </MDBRow>
                </MDBContainer>
              );
            }
          }
          
          export default MasksPage;        

      

Images with hover effects

placeholder

Strong overlay

placeholder

Light overlay

placeholder

Super light overlay

zoom

Zoom effect

Shadow effect


placeholder

          import React from "react";
          import { MDBMask, MDBView, MDBContainer, MDBRow, MDBCol } from "mdbreact";
          
          class HoverPage extends React.Component {
            render() {
              return (
                <MDBContainer className="mt-5">
                  <MDBRow>
                    <MDBCol md="4">
                      <MDBView hover>
                        <img
                          src="https://mdbootstrap.com/img/Others/documentation/forest-sm-mini.jpg"
                          className="img-fluid"
                          alt=""
                        />
                        <MDBMask className="flex-center" overlay="red-strong">
                          <p className="white-text">Strong overlay</p>
                        </MDBMask>
                      </MDBView>
                    </MDBCol>
                    <MDBCol md="4">
                      <MDBView hover>
                        <img
                          src="https://mdbootstrap.com/img/Others/documentation/forest-sm-mini.jpg"
                          className="img-fluid"
                          alt=""
                        />
                        <MDBMask className="flex-center" overlay="red-light">
                          <p className="white-text">Light overlay</p>
                        </MDBMask>
                      </MDBView>
                    </MDBCol>
                    <MDBCol md="4">
                      <MDBView hover>
                        <img
                          src="https://mdbootstrap.com/img/Others/documentation/forest-sm-mini.jpg"
                          className="img-fluid"
                          alt=""
                        />
                        <MDBMask className="flex-center" overlay="red-slight">
                          <p className="white-text">Super light overlay</p>
                        </MDBMask>
                      </MDBView>
                    </MDBCol>
                  </MDBRow>
                  <MDBRow className="mt-4">
                    <MDBCol md="6">
                      <MDBView hover zoom>
                        <img
                          src="https://mdbootstrap.com/img/Others/documentation/img%20(131)-mini.jpg"
                          className="img-fluid"
                          alt=""
                        />
                        <MDBMask className="flex-center">
                          <p className="white-text">Zoom effect</p>
                        </MDBMask>
                      </MDBView>
                    </MDBCol>
                    <MDBCol md="6">
                      <h5 className="text-center">Shadow effect</h5>
                      <img
                        src="https://mdbootstrap.com/img/Others/documentation/4.jpg"
                        className="img-fluid rounded-circle hoverable"
                        alt=""
                      />
                    </MDBCol>
                  </MDBRow>
                </MDBContainer>
              );
            }
          }
          
          export default HoverPage; 
      

Images with waves effects

Click on the images to see the effect



          import React, { Component } from "react";
          import {
            MDBRow,
            MDBCol,
            MDBContainer,
            MDBView
          } from "mdbreact";
          
          class CarouselPage extends Component {
            render() {
              return (
                <MDBContainer>
                  <MDBRow>
                    <MDBCol lg="6">
                      <MDBView waves>
                        <img src="https://mdbootstrap.com/img/Others/documentation/img%20(1)2-mini.jpg" className="img-fluid" alt="" />
                      </MDBView>
                    </MDBCol>
                    <MDBCol lg="6">
                      <MDBView waves>
                        <img src="https://mdbootstrap.com/img/Others/documentation/img%20(7)-mini.jpg" className="img-fluid" alt="" />
                      </MDBView>
                    </MDBCol>
                  </MDBRow>
                </MDBContainer>
              );
            }
          }
          
          export default CarouselPage;
          


      


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.


          import React, { Component } from 'react';
          import { MDBBtn, MDBCard, MDBCardBody, MDBCardImage, MDBCardTitle, MDBCardText, MDBRow, MDBCol } from 'mdbreact';
          
          class CardExample extends Component {
            render() {
              return (
                <MDBRow>
                  <MDBCol>
                    <MDBCard wide>
                      <MDBCardImage cascade className="img-fluid" src="https://mdbootstrap.com/img/Photos/Horizontal/People/6-col/img%20%283%29.jpg" />
                      <MDBCardBody cascade>
                        <MDBCardTitle>MDBCard title</MDBCardTitle>
                        <MDBCardText>Some quick example text to build on the card title and make up the bulk of the card's content.</MDBCardText>
                        <MDBBtn href="#">MDBBtn</MDBBtn>
                      </MDBCardBody>
                    </MDBCard>
                  </MDBCol>
                  <MDBCol>
                    <MDBCard narrow>
                      <MDBCardImage cascade className="img-fluid" src="https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(147).jpg" />
                      <MDBCardBody cascade>
                        <MDBCardTitle>MDBCard title</MDBCardTitle>
                        <MDBCardText>Some quick example text to build on the card title and make up the bulk of the card's content.</MDBCardText>
                        <MDBBtn href="#">MDBBtn</MDBBtn>
                      </MDBCardBody>
                    </MDBCard>
                  </MDBCol>
                  <MDBCol>
                    <MDBCard cascade>
                      <MDBCardImage cascade className="img-fluid" src="https://mdbootstrap.com/img/Photos/Others/men.jpg" />
                      <MDBCardBody cascade>
                        <MDBCardTitle>MDBCard title</MDBCardTitle>
                        <MDBCardText>Some quick example text to build on the card title and make up the bulk of the card's content.</MDBCardText>
                        <MDBBtn href="#">MDBBtn</MDBBtn>
                      </MDBCardBody>
                    </MDBCard>
                  </MDBCol>
                </MDBRow>
              )
            }
          }
          
          export default CardExample;
      

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.


          import React from "react";
          import { MDBRow, MDBCol, MDBCard, MDBCardBody, MDBMask, MDBIcon, MDBView, MDBBadge } from "mdbreact";
          
          const FeaturesPage = () => {
          
            const newsStyle = {
              borderBottom: "1px solid #e0e0e0",
              marginBottom: "1.5rem"
            };
          
            return (
              <MDBCard
                className="my-5 px-5 mx-auto"
                style={{ fontWeight: 300, maxWidth: "90%" }}
              >
                <MDBCardBody style={{ paddingTop: 0 }}>
                  <h2 className="h1-responsive font-weight-bold my-5 text-center">
                    Section title
                    </h2>
                  <p className="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>
                  <MDBRow>
                    <MDBCol md="12" lg="4" className="mb-lg-0 mb-5">
                      <MDBView hover rounded className="z-depth-1-half mb-4">
                        <img
                          className="img-fluid"
                          src="https://mdbootstrap.com/img/Photos/Others/images/86.jpg"
                          alt=""
                        />
                        <a href="#!">
                          <MDBMask overlay="white-slight" className="waves-light" />
                        </a>
                      </MDBView>
                      <MDBRow className="mb-3">
                        <MDBCol size="12">
                          <a href="#!">
                            <MDBBadge color="pink">
                              <MDBIcon icon="camera" className="pr-2" aria-hidden="true" />
                              Adventure
                              </MDBBadge>
                          </a>
                        </MDBCol>
                      </MDBRow>
                      <div className="d-flex justify-content-between" style={newsStyle}>
                        <MDBCol size="11" className="text-truncate pl-0 mb-3">
                          <a href="#!" className="font-weight-bold">
                            This is title of the news
                            </a>
                        </MDBCol>
                        <a href="#!">
                          <MDBIcon icon="angle-double-right" />
                        </a>
                      </div>
                      <div className="d-flex justify-content-between" style={newsStyle}>
                        <MDBCol size="11" className="text-truncate pl-0 mb-3">
                          <a href="#!">24 Food Swaps That Slash Calories.</a>
                        </MDBCol>
                        <a href="#!">
                          <MDBIcon icon="angle-double-right" />
                        </a>
                      </div>
                      <div className="d-flex justify-content-between" style={newsStyle}>
                        <MDBCol size="11" className="text-truncate pl-0 mb-3">
                          <a href="#!">How to Make a Beet Cocktail?</a>
                        </MDBCol>
                        <a href="#!">
                          <MDBIcon icon="angle-double-right" />
                        </a>
                      </div>
                      <div className="d-flex justify-content-between" style={newsStyle}>
                        <MDBCol size="11" className="text-truncate pl-0 mb-3">
                          <a href="#!">8 Sneaky Reasons You're Always Hungry.</a>
                        </MDBCol>
                        <a href="#!">
                          <MDBIcon icon="angle-double-right" />
                        </a>
                      </div>
                      <div className="d-flex justify-content-between mb-4">
                        <MDBCol size="11" className="text-truncate pl-0 mb-3">
                          <a href="#!">5 Pressure Cooker Recipes You Need to Try.</a>
                        </MDBCol>
                        <a href="#!">
                          <MDBIcon icon="angle-double-right" />
                        </a>
                      </div>
                    </MDBCol>
          
                    <MDBCol md="12" lg="4" className="mb-lg-0 mb-5">
                      <MDBView hover rounded className="z-depth-1-half mb-4">
                        <img
                          className="img-fluid"
                          src="https://mdbootstrap.com/img/Photos/Others/images/31.jpg"
                          alt=""
                        />
                        <a href="#!">
                          <MDBMask overlay="white-slight" className="waves-light" />
                        </a>
                      </MDBView>
                      <MDBRow className="mb-3">
                        <MDBCol size="12">
                          <a href="#!">
                            <MDBBadge color="deep-orange">
                              <MDBIcon icon="plane" className="pr-2" aria-hidden="true" />
                              Travel
                              </MDBBadge>
                          </a>
                        </MDBCol>
                      </MDBRow>
                      <div className="d-flex justify-content-between" style={newsStyle}>
                        <MDBCol size="11" className="text-truncate pl-0 mb-3">
                          <a href="#!" className="font-weight-bold">
                            This is title of the news
                            </a>
                        </MDBCol>
                        <a href="#!">
                          <MDBIcon icon="angle-double-right" />
                        </a>
                      </div>
                      <div className="d-flex justify-content-between" style={newsStyle}>
                        <MDBCol size="11" className="text-truncate pl-0 mb-3">
                          <a href="#!">Trends in the blogosphere for 2018.</a>
                        </MDBCol>
                        <a href="#!">
                          <MDBIcon icon="angle-double-right" />
                        </a>
                      </div>
                      <div className="d-flex justify-content-between" style={newsStyle}>
                        <MDBCol size="11" className="text-truncate pl-0 mb-3">
                          <a href="#!">Where can you eat the best lunch in Warsaw?</a>
                        </MDBCol>
                        <a href="#!">
                          <MDBIcon icon="angle-double-right" />
                        </a>
                      </div>
                      <div className="d-flex justify-content-between" style={newsStyle}>
                        <MDBCol size="11" className="text-truncate pl-0 mb-3">
                          <a href="#!">What camera is worth taking for holidays?</a>
                        </MDBCol>
                        <a href="#!">
                          <MDBIcon icon="angle-double-right" />
                        </a>
                      </div>
                      <div className="d-flex justify-content-between mb-4">
                        <MDBCol size="11" className="text-truncate pl-0 mb-3">
                          <a href="#!">Why should you visit Lisbon?</a>
                        </MDBCol>
                        <a href="#!">
                          <MDBIcon icon="angle-double-right" />
                        </a>
                      </div>
                    </MDBCol>
          
                    <MDBCol md="12" lg="4" className="mb-lg-0 mb-5">
                      <MDBView hover rounded className="z-depth-1-half mb-4">
                        <img
                          className="img-fluid"
                          src="https://mdbootstrap.com/img/Photos/Others/images/52.jpg"
                          alt=""
                        />
                        <a href="#!">
                          <MDBMask overlay="white-slight" className="waves-light" />
                        </a>
                      </MDBView>
                      <MDBRow className="mb-3">
                        <MDBCol size="12">
                          <a href="#!">
                            <MDBBadge color="success">
                              <MDBIcon icon="leaf" className="pr-2" aria-hidden="true" />
                              Nature
                              </MDBBadge>
                          </a>
                        </MDBCol>
                      </MDBRow>
                      <div className="d-flex justify-content-between" style={newsStyle}>
                        <MDBCol size="11" className="text-truncate pl-0 mb-3">
                          <a href="#!" className="font-weight-bold">
                            This is title of the news
                            </a>
                        </MDBCol>
                        <a href="#!">
                          <MDBIcon icon="angle-double-right" />
                        </a>
                      </div>
                      <div className="d-flex justify-content-between" style={newsStyle}>
                        <MDBCol size="11" className="text-truncate pl-0 mb-3">
                          <a href="#!">
                            How to recognize the footsteps of wild animals?
                            </a>
                        </MDBCol>
                        <a href="#!">
                          <MDBIcon icon="angle-double-right" />
                        </a>
                      </div>
                      <div className="d-flex justify-content-between" style={newsStyle}>
                        <MDBCol size="11" className="text-truncate pl-0 mb-3">
                          <a href="#!">National Parks in Poland.</a>
                        </MDBCol>
                        <a href="#!">
                          <MDBIcon icon="angle-double-right" />
                        </a>
                      </div>
                      <div className="d-flex justify-content-between" style={newsStyle}>
                        <MDBCol size="11" className="text-truncate pl-0 mb-3">
                          <a href="#!">Traveling without littering the planet.</a>
                        </MDBCol>
                        <a href="#!">
                          <MDBIcon icon="angle-double-right" />
                        </a>
                      </div>
                      <div className="d-flex justify-content-between mb-4">
                        <MDBCol size="11" className="text-truncate pl-0 mb-3">
                          <a href="#!">How to protect rainforests?</a>
                        </MDBCol>
                        <a href="#!">
                          <MDBIcon icon="angle-double-right" />
                        </a>
                      </div>
                    </MDBCol>
                  </MDBRow>
                </MDBCardBody>
              </MDBCard>
            );
          }
          
          export default FeaturesPage;
      

Images as the avatars within testimonials MDB Pro component

Testimonials

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, error amet numquam iure provident voluptate esse quasi, veritatis totam voluptas nostrum quisquam eum porro a pariatur accusamus veniam.

avatar

John Doe


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

avatar

Anna Aston


Neque cupiditate assumenda in maiores repudiandae mollitia architecto.

avatar

Maria Kate


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


          import React from "react";
          import { MDBContainer, MDBRow, MDBCol, MDBCard, MDBCardUp, MDBAvatar, MDBCardBody, MDBIcon } from "mdbreact";
          
          const TestimonialsPage = () => {
            return (
              <MDBContainer>
                <section className="text-center my-5">
                  <h2 className="h1-responsive font-weight-bold my-5">
                    Testimonials
                  </h2>
                  <p className="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>
                  <MDBRow>
                    <MDBCol lg="4" md="12" className="mb-lg-0 mb-4">
                      <MDBCard testimonial>
                        <MDBCardUp color="info" />
                        <MDBAvatar className="mx-auto white">
                          <img
                            src="https://mdbootstrap.com/img/Photos/Avatars/img%20(9).jpg"
                            alt=""
                            className="rounded-circle img-fluid"
                          />
                        </MDBAvatar>
                        <MDBCardBody>
                          <h4 className="font-weight-bold mb-4">John Doe</h4>
                          <hr />
                          <p className="dark-grey-text mt-4">
                            <MDBIcon icon="quote-left" className="pr-2" />
                            Lorem ipsum dolor sit amet eos adipisci, consectetur
                            adipisicing elit.
                          </p>
                        </MDBCardBody>
                      </MDBCard>
                    </MDBCol>
                    <MDBCol lg="4" md="6" className="mb-lg-0 mb-4">
                      <MDBCard testimonial>
                        <MDBCardUp gradient="blue" />
                        <MDBAvatar className="mx-auto white">
                          <img
                            src="https://mdbootstrap.com/img/Photos/Avatars/img%20(20).jpg"
                            alt=""
                            className="rounded-circle img-fluid"
                          />
                        </MDBAvatar>
                        <MDBCardBody>
                          <h4 className="font-weight-bold mb-4">Anna Aston</h4>
                          <hr />
                          <p className="dark-grey-text mt-4">
                            <i className="fa fa-quote-left pr-2" />
                            Neque cupiditate assumenda in maiores repudiandae mollitia
                            architecto.
                          </p>
                        </MDBCardBody>
                      </MDBCard>
                    </MDBCol>
                    <MDBCol lg="4" md="6" className="mb-lg-0 mb-4">
                      <MDBCard testimonial>
                        <MDBCardUp className="indigo" />
                        <MDBAvatar className="mx-auto white">
                          <img
                            src="https://mdbootstrap.com/img/Photos/Avatars/img%20(10).jpg"
                            alt=""
                            className="rounded-circle img-fluid"
                          />
                        </MDBAvatar>
                        <MDBCardBody>
                          <h4 className="font-weight-bold mb-4">Maria Kate</h4>
                          <hr />
                          <p className="dark-grey-text mt-4">
                            <i className="fa fa-quote-left pr-2" />
                            Delectus impedit saepe officiis ab aliquam repellat rem unde
                            ducimus.
                          </p>
                        </MDBCardBody>
                      </MDBCard>
                    </MDBCol>
                  </MDBRow>
                </section>
              </MDBContainer>
            );
          }
          
          export default TestimonialsPage;
      

Images within grid

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

          import React, { Component } from "react";
          import {
            MDBRow,
            MDBCol,
            MDBContainer
          } from "mdbreact";
          
          class CarouselPage extends Component {
            render() {
              return (
                <MDBContainer>
                  <MDBRow>
                    <MDBCol md="12" className="mb-3">
                    <img src="https://mdbootstrap.com/img/Photos/Slides/img%20(137).jpg" className="img-fluid z-depth-1" alt="" />
                    </MDBCol>
                  </MDBRow>
                  <MDBRow>
                    <MDBCol lg="4" md="12" className="mb-3">
                    <img src="https://mdbootstrap.com/img/Others/documentation/img(115)-mini.jpg" className="img-fluid z-depth-1" alt="" />
                    </MDBCol>
                    <MDBCol lg="4" md="6" className="mb-3">
                      <img src="https://mdbootstrap.com/img/Others/documentation/img(116)-mini.jpg" className="img-fluid z-depth-1" alt="" />
                    </MDBCol>
                    <MDBCol lg="4" md="6" className="mb-3">
                      <img src="https://mdbootstrap.com/img/Others/documentation/img(117)-mini.jpg" className="img-fluid z-depth-1" alt="" />
                    </MDBCol>
                </MDBRow>
                <MDBRow>
                  <MDBCol md="6" className="mb-3">
                    <img src="https://mdbootstrap.com/img/Others/documentation/img(118)-mini.jpg" className="img-fluid z-depth-1" alt="" />
                  </MDBCol>
                  <MDBCol md="6" className="mb-3">
                    <img src="https://mdbootstrap.com/img/Others/documentation/img(129)-mini.jpg" className="img-fluid z-depth-1" alt="" / >
                  </MDBCol>
                </MDBRow>
              </MDBContainer>
              );
            }
          }
                    
          export default CarouselPage;        
      

Shapes of images

Responsive image
Responsive image
Responsive image

          import React, { Component } from "react";
          import {
            MDBRow,
            MDBCol,
            MDBContainer
          } from "mdbreact";
          
          class CarouselPage extends Component {
            render() {
              return (
                <MDBContainer>
                  <MDBRow>
                    <MDBCol xl="4" md="4" className="mb-3">
                      <img src="https://mdbootstrap.com/img/Others/documentation/img(119)-mini.jpg" className="img-fluid z-depth-1" alt="" />
                    </MDBCol>
          
                    <MDBCol xl="5" md="4" className="mb-3 text-center">
                      <img src="https://mdbootstrap.com/img/Photos/Avatars/img(31).jpg" className="img-fluid z-depth-1 rounded-circle" alt="" />
                    </MDBCol>
                    <MDBCol xl="3" md="4" className="mb-3 text-md-right text-center">
                      <img src="https://mdbootstrap.com/img/Photos/Avatars/img(30).jpg" className="img-fluid z-depth-1" alt="" />
                    </MDBCol>
                  </MDBRow>
                </MDBContainer>
                );
              }
            }
          
            export default CarouselPage;