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
.webp)
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
.webp)
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 projectSoftware
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 projectMarketing
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 projectEntertainment
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;