React Background Image

React Background Image - Bootstrap 4 & Material Design

Note: This documentation is for an older version of Bootstrap (v.4). A newer version is available for Bootstrap 5. We recommend migrating to the latest version of our product - Material Design for Bootstrap 5.
Go to docs v.5

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

        
            
          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).webp");
            height: 100vh;
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
          }
        
        
    

Half Page Background Image

        
            
          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).webp");
            height: 50vh;
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
          }
        
        
    

Background image layout - first option

        
            
          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.webp"
                                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.webp");
            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

        
            
          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.webp");
            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

        
            
            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.webp" 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.webp')"
                      }}
                    >
                      <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).webp')"
                      }}
                    >
                      <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.webp)"
                          }}>
                      <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.webp)"
                          }}>
                      <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.webp)"
                          }}>
                      <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;