web
mobile
Edit these docs Rate these docs

React Background Image

React Background Image - Bootstrap 4 & Material Design

React Bootstrap background image is an illustration chosen by a user placed behind all other objects on the website. It may be full or partially visible.


Full Page Background Image

See live preview

          import React from "react";
          import './index.css';


          const BackgroundImagePage = () => {
            return (
                <div className="bg"></div>
            );
          }

          export default BackgroundImagePage;
      

          body, html {
          height: 100%;
          }
          .bg {
          background-image: url("https://mdbootstrap.com/img/Photos/Horizontal/Nature/full page/img(20).jpg");
          height: 100vh;
          background-position: center;
          background-repeat: no-repeat;
          background-size: cover;
          }
      

Half Page Background Image

See live preview


        import React from "react";
        import "./index.css";

        const BackgroundImagePage = () => {
          return <div className="bg" />;
        };
        export default BackgroundImagePage;
        
      


      body, html {
        height: 100%;
      }
      .bg {
        background-image: url("https://mdbootstrap.com/img/Photos/Horizontal/Nature/full page/img(11).jpg");
        height: 50vh;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
      }
      

Background image layout - first option

See live preview

        import React from "react";
        import { BrowserRouter as Router } from "react-router-dom";
        import {
          MDBNavbar,
          MDBNavbarBrand,
          MDBNavbarNav,
          MDBNavItem,
          MDBNavLink,
          MDBNavbarToggler,
          MDBCollapse,
          MDBMask,
          MDBRow,
          MDBCol,
          MDBBtn,
          MDBView,
          MDBContainer,
          MDBFormInline,
          MDBAnimation
        } from "mdbreact";
        import "./index.css";

        class AppPage extends React.Component {
          state = {
            collapsed: false
          };

          handleTogglerClick = () => {
            this.setState({
              collapsed: !this.state.collapsed
            });
          };

          render() {
            const overlay = (
              <div
                id="sidenav-overlay"
                style={{ backgroundColor: "transparent" }}
                onClick={this.handleTogglerClick}
              />
            );
            return (
              <div id="apppage">
                <Router>
                  <div>
                    <MDBNavbar
                      color="primary-color"
                      dark
                      expand="md"
                      fixed="top"
                      scrolling
                      transparent
                    >
                      <MDBContainer>
                        <MDBNavbarBrand>
                          <strong className="white-text">MDB</strong>
                        </MDBNavbarBrand>
                        <MDBNavbarToggler onClick={this.handleTogglerClick} />
                        <MDBCollapse isOpen={this.state.collapsed} navbar>
                          <MDBNavbarNav left>
                            <MDBNavItem active>
                              <MDBNavLink to="#!">Home</MDBNavLink>
                            </MDBNavItem>
                            <MDBNavItem>
                              <MDBNavLink to="#!">Link</MDBNavLink>
                            </MDBNavItem>
                            <MDBNavItem>
                              <MDBNavLink to="#!">Profile</MDBNavLink>
                            </MDBNavItem>
                          </MDBNavbarNav>
                          <MDBNavbarNav right>
                            <MDBNavItem>
                              <MDBFormInline waves>
                                <div className="md-form my-0">
                                  <input
                                    className="form-control mr-sm-2"
                                    type="text"
                                    placeholder="Search"
                                    aria-label="Search"
                                  />
                                </div>
                              </MDBFormInline>
                            </MDBNavItem>
                          </MDBNavbarNav>
                        </MDBCollapse>
                      </MDBContainer>
                    </MDBNavbar>
                    {this.state.collapsed && overlay}
                  </div>
                </Router>
                <MDBView>
                  <MDBMask className="d-flex justify-content-center align-items-center gradient">
                    <MDBContainer>
                      <MDBRow>
                        <MDBCol
                          md="6"
                          className="white-text text-center text-md-left mt-xl-5 mb-5"
                        >
                          <MDBAnimation type="fadeInLeft" delay=".3s">
                            <h1 className="h1-responsive font-weight-bold mt-sm-5">
                              Make purchases with our app
                            </h1>
                            <hr className="hr-light" />
                            <h6 className="mb-4">
                              Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                              Rem repellendus quasi fuga nesciunt dolorum nulla magnam
                              veniam sapiente, fugiat! Commodi sequi non animi ea dolor
                              molestiae iste.
                            </h6>
                            <MDBBtn color="white">Download</MDBBtn>
                            <MDBBtn outline color="white">
                              Learn More
                            </MDBBtn>
                          </MDBAnimation>
                        </MDBCol>

                        <MDBCol md="6" xl="5" className="mt-xl-5">
                          <MDBAnimation type="fadeInRight" delay=".3s">
                            <img
                              src="https://mdbootstrap.com/img/Mockups/Transparent/Small/admin-new.png"
                              alt=""
                              className="img-fluid"
                            />
                          </MDBAnimation>
                        </MDBCol>
                      </MDBRow>
                    </MDBContainer>
                  </MDBMask>
                </MDBView>

                <MDBContainer>
                  <MDBRow className="py-5">
                    <MDBCol md="12" className="text-center">
                      <p>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
                        eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
                        enim ad minim veniam, quis nostrud exercitation ullamco laboris
                        nisi ut aliquip ex ea commodo consequat. 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>
                    </MDBCol>
                  </MDBRow>
                </MDBContainer>
              </div>
            );
          }
        }

        export default AppPage;

      

        #apppage .gradient {
          background: -moz-linear-gradient(
            45deg,
            rgba(42, 27, 161, 0.7),
            rgba(29, 210, 177, 0.7) 100%
          );
          background: -webkit-linear-gradient(
            45deg,
            rgba(42, 27, 161, 0.7),
            rgba(29, 210, 177, 0.7) 100%
          );
          background: -webkit-gradient(
            linear,
            45deg,
            from(rgba(42, 27, 161, 0.7)),
            to(rgba(29, 210, 177, 0.7))
          );
          background: -o-linear-gradient(
            45deg,
            rgba(42, 27, 161, 0.7),
            rgba(29, 210, 177, 0.7) 100%
          );
          background: linear-gradient(
            45deg,
            rgba(42, 27, 161, 0.7),
            rgba(29, 210, 177, 0.7) 100%
          );
        }
        
        #apppage .view {
          background-image: url("https://mdbootstrap.com/img/Photos/Others/architecture.jpg");
          background-repeat: no-repeat;
          background-size: cover;
          background-position: center center;
          min-height: 100vh;
        }
        
        #apppage h6 {
          line-height: 1.7;
        }
        
        @media only screen and (max-width: 400px) {
          #apppage .animated img {
            max-height: 50vh;
            transform: translateX(-50%);
            left: 50%;
            position: absolute;
          }
        }
        @media only screen and (max-width: 767px) {
          #apppage .animated img {
            max-height: 35vh;
            transform: translateX(-50%);
            left: 50%;
          }
        }
        
        @media (max-width: 767px) and (orientation: landscape) {
          #apppage .animated img {
            max-height: 50vh;
            transform: translateX(-50%);
            left: 50%;
            position: relative;
          }
        }
        @media (max-width: 1000px) and (orientation: landscape) {
          #apppage .view {
            min-height: 150vh;
          }
        }
        
      

Background image layout - second option

See live preview

        import React from "react";
        import { BrowserRouter as Router } from "react-router-dom";
        import {
          MDBNavbar,
          MDBNavbarBrand,
          MDBNavbarNav,
          MDBNavItem,
          MDBNavLink,
          MDBNavbarToggler,
          MDBCollapse,
          MDBMask,
          MDBRow,
          MDBCol,
          MDBIcon,
          MDBBtn,
          MDBView,
          MDBContainer,
          MDBCard,
          MDBCardBody,
          MDBInput,
          MDBFormInline,
          MDBAnimation
        } from "mdbreact";
        import "./index.css";

        class ClassicFormPage extends React.Component {
          state = {
            collapseID: ""
          };

          toggleCollapse = collapseID => () =>
            this.setState(prevState => ({
              collapseID: prevState.collapseID !== collapseID ? collapseID : ""
            }));

          render() {
            const overlay = (
              <div
                id="sidenav-overlay"
                style={{ backgroundColor: "transparent" }}
                onClick={this.toggleCollapse("navbarCollapse")}
              />
            );
            return (
              <div id="classicformpage">
                <Router>
                  <div>
                    <MDBNavbar dark expand="md" fixed="top">
                      <MDBContainer>
                        <MDBNavbarBrand>
                          <strong className="white-text">MDB</strong>
                        </MDBNavbarBrand>
                        <MDBNavbarToggler
                          onClick={this.toggleCollapse("navbarCollapse")}
                        />
                        <MDBCollapse
                          id="navbarCollapse"
                          isOpen={this.state.collapseID}
                          navbar
                        >
                          <MDBNavbarNav left>
                            <MDBNavItem active>
                              <MDBNavLink to="#!">Home</MDBNavLink>
                            </MDBNavItem>
                            <MDBNavItem>
                              <MDBNavLink to="#!">Link</MDBNavLink>
                            </MDBNavItem>
                            <MDBNavItem>
                              <MDBNavLink to="#!">Profile</MDBNavLink>
                            </MDBNavItem>
                          </MDBNavbarNav>
                          <MDBNavbarNav right>
                            <MDBNavItem>
                              <MDBFormInline waves>
                                <div className="md-form my-0">
                                  <input
                                    className="form-control mr-sm-2"
                                    type="text"
                                    placeholder="Search"
                                    aria-label="Search"
                                  />
                                </div>
                              </MDBFormInline>
                            </MDBNavItem>
                          </MDBNavbarNav>
                        </MDBCollapse>
                      </MDBContainer>
                    </MDBNavbar>
                    {this.state.collapseID && overlay}
                  </div>
                </Router>

                <MDBView>
                  <MDBMask className="d-flex justify-content-center align-items-center gradient">
                    <MDBContainer>
                      <MDBRow>
                        <MDBAnimation
                          type="fadeInLeft"
                          delay=".3s"
                          className="white-text text-center text-md-left col-md-6 mt-xl-5 mb-5"
                        >
                          <h1 className="h1-responsive font-weight-bold">
                            Sign up right now!
                          </h1>
                          <hr className="hr-light" />
                          <h6 className="mb-4">
                            Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                            Rem repellendus quasi fuga nesciunt dolorum nulla magnam
                            veniam sapiente, fugiat! Commodi sequi non animi ea dolor
                            molestiae, quisquam iste, maiores. Nulla.
                          </h6>
                          <MDBBtn outline color="white">
                            Learn More
                          </MDBBtn>
                        </MDBAnimation>

                        <MDBCol md="6" xl="5" className="mb-4">
                          <MDBAnimation type="fadeInRight" delay=".3s">
                            <MDBCard id="classic-card">
                              <MDBCardBody className="white-text">
                                <h3 className="text-center">
                                  <MDBIcon icon="user" /> Register:
                                </h3>
                                <hr className="hr-light" />
                                <MDBInput
                                  className="white-text"
                                  iconClass="white-text"
                                  label="Your name"
                                  icon="user"
                                />
                                <MDBInput
                                  className="white-text"
                                  iconClass="white-text"
                                  label="Your email"
                                  icon="envelope"
                                />
                                <MDBInput
                                  className="white-text"
                                  iconClass="white-text"
                                  label="Your password"
                                  icon="lock"
                                  type="password"
                                />
                                <div className="text-center mt-4 black-text">
                                  <MDBBtn color="indigo">Sign Up</MDBBtn>
                                  <hr className="hr-light" />
                                  <div className="text-center d-flex justify-content-center white-label">
                                    <a href="#!" className="p-2 m-2">
                                      <MDBIcon
                                        fab
                                        icon="twitter"
                                        className="white-text"
                                      />
                                    </a>
                                    <a href="#!" className="p-2 m-2">
                                      <MDBIcon
                                        fab
                                        icon="linkedin"
                                        className="white-text"
                                      />
                                    </a>
                                    <a href="#!" className="p-2 m-2">
                                      <MDBIcon
                                        fab
                                        icon="instagram"
                                        className="white-text"
                                      />
                                    </a>
                                  </div>
                                </div>
                              </MDBCardBody>
                            </MDBCard>
                          </MDBAnimation>
                        </MDBCol>
                      </MDBRow>
                    </MDBContainer>
                  </MDBMask>
                </MDBView>

                <MDBContainer>
                  <MDBRow className="py-5">
                    <MDBCol md="12" className="text-center">
                      <p>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
                        eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
                        enim ad minim veniam, quis nostrud exercitation ullamco laboris
                        nisi ut aliquip ex ea commodo consequat. 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>
                    </MDBCol>
                  </MDBRow>
                </MDBContainer>
              </div>
            );
          }
        }

        export default ClassicFormPage;


      

        #classicformpage .view {
          background-image: url("http://mdbootstrap.com/img/Photos/Others/images/91.jpg");
          background-repeat: no-repeat;
          background-size: cover;
          background-position: center center;
          height: 100vh;
        }
        
        #classicformpage .gradient {
          background: -webkit-linear-gradient(
            45deg,
            rgba(0, 0, 0, 0.7),
            rgba(72, 15, 144, 0.4) 100%
          );
          background: -webkit-gradient(
            linear,
            45deg,
            from(rgba(0, 0, 0, 0.7), rgba(72, 15, 144, 0.4) 100%)
          );
          background: linear-gradient(
            45deg,
            rgba(0, 0, 0, 0.7),
            rgba(72, 15, 144, 0.4) 100%
          );
        }
        
        #classicformpage .card {
          background-color: rgba(126, 123, 215, 0.2);
        }
        
        #classicformpage h6 {
          line-height: 1.7;
        }
        
        #classicformpage .navbar {
          transition: background 0.5s ease-in-out, padding 0.5s ease-in-out;
        }
        
        #classicformpage .top-nav-collapse {
          background: #424f95 !important;
        }
        
        @media (max-width: 768px) {
          #classicformpage .navbar:not(.top-nav-collapse) {
            background: #424f95 !important;
          }
        }
        
        #classicformpage label {
          color: #fff !important;
        }
        
      

Background video layout

See live preview


          import React from "react";
          import { BrowserRouter as Router } from "react-router-dom";
          import { MDBNavbar, MDBNavbarBrand, MDBNavbarNav, MDBNavItem, MDBNavLink, MDBNavbarToggler, MDBCollapse, MDBMask,
          MDBRow, MDBCol, MDBIcon, MDBBtn, MDBView, MDBContainer } from "mdbreact";
          import "./index.css";

          class VideoBackgroundPage extends React.Component {
          state = {
          collapseID: ""
          };

          toggleCollapse = collapseID => () =>
          this.setState(prevState => ({
          collapseID: prevState.collapseID !== collapseID ? collapseID : ""
          }));

          render() {
          const overlay = (
          <div id="sidenav-overlay" style={{ backgroundColor: "transparent" }} onClick={this.toggleCollapse("navbarCollapse")} />
          );
          return (
          <div id="videobackground">
            <Router>
              <div>
                <MDBNavbar dark expand="md" fixed="top">
                  <MDBContainer>
                    <MDBNavbarBrand>
                      <span className="white-text">MDBNavbar</span>
                    </MDBNavbarBrand>
                    <MDBNavbarToggler onClick={this.toggleCollapse("navbarCollapse")} />
                    <MDBCollapse id="navbarCollapse" isOpen={this.state.collapseID} navbar>
                      <MDBNavbarNav left>
                        <MDBNavItem>
                          <MDBNavLink to="#!">Home</MDBNavLink>
                        </MDBNavItem>
                        <MDBNavItem>
                          <MDBNavLink to="#!">About</MDBNavLink>
                        </MDBNavItem>
                        <MDBNavItem>
                          <MDBNavLink to="#!">Features</MDBNavLink>
                        </MDBNavItem>
                        <MDBNavItem>
                          <MDBNavLink to="#!">Services</MDBNavLink>
                        </MDBNavItem>
                        <MDBNavItem>
                          <MDBNavLink to="#!">Opinions</MDBNavLink>
                        </MDBNavItem>
                        <MDBNavItem>
                          <MDBNavLink to="#!">Team</MDBNavLink>
                        </MDBNavItem>
                        <MDBNavItem>
                          <MDBNavLink to="#!">Contact</MDBNavLink>
                        </MDBNavItem>
                      </MDBNavbarNav>
                      <MDBNavbarNav right>
                        <MDBNavItem>
                          <MDBNavLink to="!#">
                            <MDBIcon fab icon="facebook-f" />
                          </MDBNavLink>
                        </MDBNavItem>
                        <MDBNavItem>
                          <MDBNavLink to="!#">
                            <MDBIcon fab icon="twitter" />
                          </MDBNavLink>
                        </MDBNavItem>
                        <MDBNavItem>
                          <MDBNavLink to="!#">
                            <MDBIcon fab icon="instagram" />
                          </MDBNavLink>
                        </MDBNavItem>
                      </MDBNavbarNav>
                    </MDBCollapse>
                  </MDBContainer>
                </MDBNavbar>
                {this.state.collapseID && overlay}
              </div>
            </Router>

            <MDBView>
              <video className="video-intro" poster="https://mdbootstrap.com/img/Photos/Others/background.jpg" playsInline
                autoPlay muted="" loop>
                <source src="https://mdbootstrap.com/img/video/animation.mp4" type="video/mp4" />
              </video>
              <MDBMask className="d-flex justify-content-center align-items-center gradient">
                <MDBContainer className="px-md-3 px-sm-0">
                  <MDBRow>
                    <MDBCol md="12" className="mb-4 white-text text-center">
                      <h3 className="display-3 font-weight-bold mb-0 pt-md-5">
                        Creative Agency{" "}
                      </h3>
                      <hr className="hr-light my-4 w-75" />
                      <h4 className="subtext-header mt-2 mb-4">
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit
                        deleniti consequuntur nihil.
                      </h4>
                      <MDBBtn outline rounded color="white">
                        <MDBIcon icon="home" /> Visit us
                      </MDBBtn>
                    </MDBCol>
                  </MDBRow>
                </MDBContainer>
              </MDBMask>
            </MDBView>

            <MDBContainer>
              <MDBRow className="pt-5 pb-4">
                <MDBCol md="12" className="text-center">
                  <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
                    eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
                    enim ad minim veniam, quis nostrud exercitation ullamco laboris
                    nisi ut aliquip ex ea commodo consequat. 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>
                </MDBCol>
              </MDBRow>
            </MDBContainer>
          </div>
          );
          }
          }

          export default VideoBackgroundPage;

      

        #videobackground .gradient {
        background: -moz-linear-gradient(45deg, rgba(213, 15, 61, 0.6), rgba(13, 17, 198, 0.69) 100%);
        background: -webkit-linear-gradient(45deg, rgba(213, 15, 61, 0.6), rgba(13, 17, 198, 0.69) 100%);
        background: linear-gradient(45deg, rgba(213, 15, 61, 0.6), rgba(13, 17, 198, 0.69) 100%);
        }

        #videobackground .view video {
        top: 0!important;
        left: 0!important;
        transform: none!important;
        height: 100vh;
        }
      

Cards with background image MDB Pro component

Marketing

This is card title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat fugiat, laboriosam, voluptatem, optio vero odio nam sit officia accusamus minus error nisi architecto nulla ipsum dignissimos. Odit sed qui, dolorum!.

View project
Software

This is card title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat fugiat, laboriosam, voluptatem, optio vero odio nam sit officia accusamus minus error nisi architecto nulla ipsum dignissimos. Odit sed qui, dolorum!.

View project

        import React, { Component } from "react";
        import {
          MDBCard,
          MDBCardTitle,
          MDBBtn,
          MDBRow,
          MDBCol,
          MDBIcon
        } from "mdbreact";
        
        class CardExample extends Component {
          render() {
            return (
              <MDBRow>
                <MDBCol>
                  <MDBCard
                    className="card-image"
                    style={{
                      backgroundImage:
                        "url('https://mdbootstrap.com/img/Photos/Horizontal/Work/4-col/img%20%2814%29.jpg')"
                    }}
                  >
                    <div className="text-white text-center d-flex align-items-center rgba-black-strong py-5 px-4">
                      <div>
                        <h5 className="pink-text">
                          <MDBIcon icon="chart-pie"/> Marketing
                        </h5>
                        <MDBCardTitle tag="h3" className="pt-2">
                          <strong>This is card title</strong>
                        </MDBCardTitle>
                        <p>
                          Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                          Repellat fugiat, laboriosam, voluptatem, optio vero odio nam
                          sit officia accusamus minus error nisi architecto nulla ipsum
                          dignissimos. Odit sed qui, dolorum!
                        </p>
                        <MDBBtn color="pink">
                          <MDBIcon icon="clone left" /> View project
                        </MDBBtn>
                      </div>
                    </div>
                  </MDBCard>
                </MDBCol>
                <MDBCol>
                  <MDBCard
                    className="card-image"
                    style={{
                      backgroundImage:
                        "url('https://mdbootstrap.com/img/Photos/Horizontal/City/6-col/img%20(47).jpg')"
                    }}
                  >
                    <div className="text-white text-center d-flex align-items-center rgba-indigo-strong py-5 px-4">
                      <div>
                        <h5 className="orange-text">
                          <MDBIcon icon="desktop" /> Software
                        </h5>
                        <MDBCardTitle tag="h3" className="pt-2">
                          <strong>This is card title</strong>
                        </MDBCardTitle>
                        <p>
                          Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                          Repellat fugiat, laboriosam, voluptatem, optio vero odio nam
                          sit officia accusamus minus error nisi architecto nulla ipsum
                          dignissimos. Odit sed qui, dolorum!
                        </p>
                        <MDBBtn color="deep-orange">
                          <MDBIcon icon="clone left" /> View project
                        </MDBBtn>
                      </div>
                    </div>
                  </MDBCard>
                </MDBCol>
              </MDBRow>
            );
          }
        }
        
        export default CardExample;
        



      

Project section with background image cards MDB Pro component

Our best projects

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

Travel

This is card title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat fugiat, laboriosam, voluptatem, optio vero odio nam sit officia accusamus minus error nisi architecto nulla ipsum dignissimos. Odit sed qui, dolorum!

View project
Marketing

This is card title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat fugiat, laboriosam, voluptatem, optio vero odio nam sit officia accusamus minus error nisi architecto nulla ipsum dignissimos. Odit sed qui, dolorum!

View project
Entertainment

This is card title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat fugiat, laboriosam, voluptatem, optio vero odio nam sit officia accusamus minus error nisi architecto nulla ipsum dignissimos. Odit sed qui, dolorum!

View project

        import React from "react";
        import { MDBContainer, MDBCol, MDBCard, MDBIcon, MDBBtn } from "mdbreact";

        const ProjectsPage = () => {
          return (
          <section className="text-center my-5">
            <h2 className="h1-responsive font-weight-bold my-5">
              Our best projects
            </h2>
            <p className="grey-text 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
              est laborum.
            </p>

            <MDBContainer className="d-flex flex-wrap">
              <MDBCol md="12" className="mb-4">
                <MDBCard className="card-image" style={{
                        backgroundImage:
                          "url(https://mdbootstrap.com/img/Photos/Others/img%20%2832%29.jpg)"
                      }}>
                  <div className="text-white text-center d-flex align-items-center rgba-black-strong py-5 px-4 rounded">
                    <div>
                      <h6 className="purple-text">
                        <MDBIcon icon="plane" />
                        <strong> Travel</strong>
                      </h6>
                      <h3 className="py-3 font-weight-bold">
                        <strong>This is card title</strong>
                      </h3>
                      <p className="pb-3">
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                        Repellat fugiat, laboriosam, voluptatem, optio vero odio
                        nam sit officia accusamus minus error nisi architecto
                        nulla ipsum dignissimos. Odit sed qui, dolorum!
                      </p>
                      <MDBBtn color="secondary" rounded size="md">
                        <MDBIcon far icon="clone" className="left" /> MDBView project
                      </MDBBtn>
                    </div>
                  </div>
                </MDBCard>
              </MDBCol>
              <MDBCol md="6" className="md-0 mb-4">
                <MDBCard className="card-image" style={{
                        backgroundImage:
                          "url(https://mdbootstrap.com/img/Photos/Horizontal/Nature/6-col/img%20%2873%29.jpg)"
                      }}>
                  <div className="text-white text-center d-flex align-items-center rgba-black-strong py-5 px-4 rounded">
                    <div>
                      <h6 className="pink-text">
                        <MDBIcon icon="chart-pie" />
                        <strong> Marketing</strong>
                      </h6>
                      <h3 className="py-3 font-weight-bold">
                        <strong>This is card title</strong>
                      </h3>
                      <p className="pb-3">
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                        Repellat fugiat, laboriosam, voluptatem, optio vero odio
                        nam sit officia accusamus minus error nisi architecto
                        nulla ipsum dignissimos. Odit sed qui, dolorum!
                      </p>
                      <MDBBtn color="pink" rounded size="md">
                        <MDBIcon far icon="clone" className="left" /> MDBView project
                      </MDBBtn>
                    </div>
                  </div>
                </MDBCard>
              </MDBCol>
              <MDBCol md="6" className="md-0 mb-4">
                <MDBCard className="card-image" style={{
                        backgroundImage:
                          "url(https://mdbootstrap.com/img/Photos/Horizontal/Nature/6-col/img%20%2873%29.jpg)"
                      }}>
                  <div className="text-white text-center d-flex align-items-center rgba-black-strong py-5 px-4 rounded">
                    <div>
                      <h6 className="green-text">
                        <MDBIcon icon="eye" />
                        <strong> Entertainment</strong>
                      </h6>
                      <h3 className="py-3 font-weight-bold">
                        <strong>This is card title</strong>
                      </h3>
                      <p className="pb-3">
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                        Repellat fugiat, laboriosam, voluptatem, optio vero odio
                        nam sit officia accusamus minus error nisi architecto
                        nulla ipsum dignissimos. Odit sed qui, dolorum!
                      </p>
                      <MDBBtn color="success" rounded size="md">
                        <MDBIcon far icon="clone" className="left" /> MDBView project
                      </MDBBtn>
                    </div>
                  </div>
                </MDBCard>
              </MDBCol>
            </MDBContainer>
          </section>
          );
        }

        export default ProjectsPage;