React Bootstrap Footer
React Footer - 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
Footer is an additional navigation for the website. It can hold links, company info, copyrights, buttons, forms. and many other elements.
You can set the color of the footer by adding one of classes from our color palette.
Just like any other components of MDBootstrap, Footers are responsive by default.
Basic example
import React from "react";
import { MDBCol, MDBContainer, MDBRow, MDBFooter } from "mdbreact";
const FooterPage = () => {
return (
<MDBFooter color="blue" className="font-small pt-4 mt-4">
<MDBContainer fluid className="text-center text-md-left">
<MDBRow>
<MDBCol md="6">
<h5 className="title">Footer Content</h5>
<p>
Here you can use rows and columns here to organize your footer
content.
</p>
</MDBCol>
<MDBCol md="6">
<h5 className="title">Links</h5>
<ul>
<li className="list-unstyled">
<a href="#!">Link 1</a>
</li>
<li className="list-unstyled">
<a href="#!">Link 2</a>
</li>
<li className="list-unstyled">
<a href="#!">Link 3</a>
</li>
<li className="list-unstyled">
<a href="#!">Link 4</a>
</li>
</ul>
</MDBCol>
</MDBRow>
</MDBContainer>
<div className="footer-copyright text-center py-3">
<MDBContainer fluid>
© {new Date().getFullYear()} Copyright: <a href="https://www.mdbootstrap.com"> MDBootstrap.com </a>
</MDBContainer>
</div>
</MDBFooter>
);
}
export default FooterPage;
Footer - API
In this section you will find advanced information about the Footer component. You will find out which modules are required, what are the possibilities of configuring the component, and what events and methods you can use in working with it.
Footer import statement
In order to use Footer component make sure you have imported proper module first.
import { MDBFooter } from "mdbreact";
Footer PropTypes
The table below shows the configuration options of the Footer component.
| Name | Type | Default | Description | Example |
|---|---|---|---|---|
className |
string | |
Adds custom class to the component. | <MDBFooter className="myClass" ... /> |
color |
string | |
Defines component's color | <MDBFooter color="cyan" ... /> |
tag |
string | footer |
Defines custom tag for the Footer | <MDBFooter tag="div" ... /> |
React Footer - examples & customization
Quickly get a project started with any of our examples.
Advanced footer MDB Pro component
import React from "react";
import { MDBCol, MDBContainer, MDBRow, MDBFooter } from "mdbreact";
const FooterPagePro = () => {
return (
<MDBFooter color="stylish-color-dark" className="page-footer font-small pt-4 mt-4">
<MDBContainer fluid className="text-center text-md-left">
<MDBRow>
<MDBCol md="6">
<h5 className="text-uppercase mb-4 mt-3 font-weight-bold">
Footer Content
</h5>
<p>
Here you can use rows and columns here to organize your footer
content. Lorem ipsum dolor sit amet, consectetur adipisicing
elit.
</p>
</MDBCol>
<hr className="clearfix w-100 d-md-none" />
<MDBCol md="2">
<h5 className="text-uppercase mb-4 mt-3 font-weight-bold">
Links
</h5>
<ul className="list-unstyled">
<li>
<a href="#!">Link 1</a>
</li>
<li>
<a href="#!">Link 2</a>
</li>
<li>
<a href="#!">Link 3</a>
</li>
<li>
<a href="#!">Link 4</a>
</li>
</ul>
</MDBCol>
<hr className="clearfix w-100 d-md-none" />
<MDBCol md="2">
<h5 className="text-uppercase mb-4 mt-3 font-weight-bold">
Links
</h5>
<ul className="list-unstyled">
<li>
<a href="#!">Link 1</a>
</li>
<li>
<a href="#!">Link 2</a>
</li>
<li>
<a href="#!">Link 3</a>
</li>
<li>
<a href="#!">Link 4</a>
</li>
</ul>
</MDBCol>
<hr className="clearfix w-100 d-md-none" />
<MDBCol md="2">
<h5 className="text-uppercase mb-4 mt-3 font-weight-bold">
Links
</h5>
<ul className="list-unstyled">
<li>
<a href="#!">Link 1</a>
</li>
<li>
<a href="#!">Link 2</a>
</li>
<li>
<a href="#!">Link 3</a>
</li>
<li>
<a href="#!">Link 4</a>
</li>
</ul>
</MDBCol>
</MDBRow>
</MDBContainer>
<hr />
<div className="text-center py-3">
<ul className="list-unstyled list-inline mb-0">
<li className="list-inline-item">
<h5 className="mb-1">Register for free</h5>
</li>
<li className="list-inline-item">
<a href="#!" className="btn btn-danger btn-rounded">
Sign up!
</a>
</li>
</ul>
</div>
<hr />
<div className="text-center">
<ul className="list-unstyled list-inline">
<li className="list-inline-item">
<a className="btn-floating btn-sm btn-fb mx-1">
<i className="fab fa-facebook-f"> </i>
</a>
</li>
<li className="list-inline-item">
<a className="btn-floating btn-sm btn-tw mx-1">
<i className="fab fa-twitter"> </i>
</a>
</li>
<li className="list-inline-item">
<a className="btn-floating btn-sm btn-gplus mx-1">
<i className="fab fa-google-plus"> </i>
</a>
</li>
<li className="list-inline-item">
<a className="btn-floating btn-sm btn-li mx-1">
<i className="fab fa-linkedin-in"> </i>
</a>
</li>
<li className="list-inline-item">
<a className="btn-floating btn-sm btn-dribbble mx-1">
<i className="fab fa-dribbble"> </i>
</a>
</li>
</ul>
</div>
<div className="footer-copyright text-center py-3">
<MDBContainer fluid>
© {new Date().getFullYear()} Copyright: <a href="https://www.MDBootstrap.com"> MDBootstrap.com </a>
</MDBContainer>
</div>
</MDBFooter>
);
}
export default FooterPagePro;
Purple Panel footer MDB Pro component
import React from "react";
import { MDBCol, MDBContainer, MDBRow, MDBFooter } from "mdbreact";
const FooterPagePro = () => {
return (
<MDBFooter color="unique-color-dark" className="page-footer font-small pt-0">
<div style={{ backgroundColor: "#6351ce" }}>
<MDBContainer fluid className="text-center text-md-left">
<MDBRow className="py-4 d-flex align-items-center">
<MDBCol md="6" lg="5" className="text-center text-md-left mb-4 mb-md-0">
<h6 className="mb-0 white-text">
Get connected with us on social networks!
</h6>
</MDBCol>
<MDBCol md="6" lg="7" className="text-center text-md-right">
<a className="fb-ic ml-0">
<i className="fab fa-facebook-f white-text mr-lg-4"> </i>
</a>
<a className="tw-ic">
<i className="fab fa-twitter white-text mr-lg-4"> </i>
</a>
<a className="gplus-ic">
<i className="fab fa-google-plus-g white-text mr-lg-4"> </i>
</a>
<a className="li-ic">
<i className="fab fa-linkedin-in white-text mr-lg-4"> </i>
</a>
<a className="ins-ic">
<i className="fab fa-instagram white-text mr-lg-4"> </i>
</a>
</MDBCol>
</MDBRow>
</MDBContainer>
</div>
<MDBContainer className="mt-5 mb-4 text-center text-md-left">
<MDBRow className="mt-3">
<MDBCol md="3" lg="4" xl="3" className="mb-4">
<h6 className="text-uppercase font-weight-bold">
<strong>Company name</strong>
</h6>
<hr className="deep-purple accent-2 mb-4 mt-0 d-inline-block mx-auto" style={{ width: "60px" }} />
<p>
Here you can use rows and columns here to organize your footer
content. Lorem ipsum dolor sit amet, consectetur adipisicing
elit.
</p>
</MDBCol>
<MDBCol md="2" lg="2" xl="2" className="mb-4">
<h6 className="text-uppercase font-weight-bold">
<strong>Products</strong>
</h6>
<hr className="deep-purple accent-2 mb-4 mt-0 d-inline-block mx-auto" style={{ width: "60px" }} />
<p>
<a href="#!">MDBootstrap</a>
</p>
<p>
<a href="#!">MDWordPress</a>
</p>
<p>
<a href="#!">BrandFlow</a>
</p>
<p>
<a href="#!">Bootstrap Angular</a>
</p>
</MDBCol>
<MDBCol md="3" lg="2" xl="2" className="mb-4">
<h6 className="text-uppercase font-weight-bold">
<strong>Useful links</strong>
</h6>
<hr className="deep-purple accent-2 mb-4 mt-0 d-inline-block mx-auto" style={{ width: "60px" }} />
<p>
<a href="#!">Your Account</a>
</p>
<p>
<a href="#!">Become an Affiliate</a>
</p>
<p>
<a href="#!">Shipping Rates</a>
</p>
<p>
<a href="#!">Help</a>
</p>
</MDBCol>
<MDBCol md="4" lg="3" xl="3" className="mb-4">
<h6 className="text-uppercase font-weight-bold">
<strong>Contact</strong>
</h6>
<hr className="deep-purple accent-2 mb-4 mt-0 d-inline-block mx-auto" style={{ width: "60px" }} />
<p>
<i className="fa fa-home mr-3" /> New York, NY 10012, US
</p>
<p>
<i className="fa fa-envelope mr-3" /> info@example.com
</p>
<p>
<i className="fa fa-phone mr-3" /> + 01 234 567 88
</p>
<p>
<i className="fa fa-print mr-3" /> + 01 234 567 89
</p>
</MDBCol>
</MDBRow>
</MDBContainer>
<div className="footer-copyright text-center py-3">
<MDBContainer fluid>
© {new Date().getFullYear()} Copyright: <a href="https://www.MDBootstrap.com"> MDBootstrap.com </a>
</MDBContainer>
</div>
</MDBFooter>
);
}
export default FooterPagePro;
Teal Panel footer MDB Pro component
import React from "react";
import { MDBCol, MDBContainer, MDBRow, MDBFooter } from "mdbreact";
const FooterPagePro = () => {
return (
<MDBFooter color="blue-grey" className="page-footer font-small lighten-5 pt-0">
<div style={{ backgroundColor: "#21d192" }}>
<MDBContainer>
<MDBRow className="py-4 d-flex align-items-center">
<MDBCol md="6" lg="5" className="text-center text-md-left mb-4 mb-md-0">
<h6 className="mb-0 white-text">
Get connected with us on social networks!
</h6>
</MDBCol>
<MDBCol md="6" lg="7" className="text-center text-md-right">
<a className="fb-ic ml-0">
<i className="fab fa-facebook-f white-text mr-lg-4"> </i>
</a>
<a className="tw-ic">
<i className="fab fa-twitter white-text mr-lg-4"> </i>
</a>
<a className="gplus-ic">
<i className="fab fa-google-plus-g white-text mr-lg-4"> </i>
</a>
<a className="li-ic">
<i className="fab fa-linkedin-in white-text mr-lg-4"> </i>
</a>
<a className="ins-ic">
<i className="fab fa-instagram white-text mr-lg-4"> </i>
</a>
</MDBCol>
</MDBRow>
</MDBContainer>
</div>
<MDBContainer className="mt-5 mb-4 text-center text-md-left">
<MDBRow className="mt-3">
<MDBCol md="3" lg="4" xl="3" className="mb-4 dark-grey-text">
<h6 className="text-uppercase font-weight-bold">
<strong>Company name</strong>
</h6>
<hr className="deep-purple accent-2 mb-4 mt-0 d-inline-block mx-auto" style={{ width: "60px" }} />
<p>
Here you can use rows and columns here to organize your footer
content. Lorem ipsum dolor sit amet, consectetur adipisicing
elit.
</p>
</MDBCol>
<MDBCol md="2" lg="2" xl="2" className="mb-4 dark-grey-text">
<h6 className="text-uppercase font-weight-bold">
<strong>Products</strong>
</h6>
<hr className="deep-purple accent-2 mb-4 mt-0 d-inline-block mx-auto" style={{ width: "60px" }} />
<p>
<a href="#!" className="dark-grey-text">
MDBootstrap
</a>
</p>
<p>
<a href="#!" className="dark-grey-text">
MDWordPress
</a>
</p>
<p>
<a href="#!" className="dark-grey-text">
BrandFlow
</a>
</p>
<p>
<a href="#!" className="dark-grey-text">
Bootstrap Angular
</a>
</p>
</MDBCol>
<MDBCol md="3" lg="2" xl="2" className="mb-4 dark-grey-text">
<h6 className="text-uppercase font-weight-bold">
<strong>Useful links</strong>
</h6>
<hr className="deep-purple accent-2 mb-4 mt-0 d-inline-block mx-auto" style={{ width: "60px" }} />
<p>
<a href="#!" className="dark-grey-text">
Your Account
</a>
</p>
<p>
<a href="#!" className="dark-grey-text">
Become an Affiliate
</a>
</p>
<p>
<a href="#!" className="dark-grey-text">
Shipping Rates
</a>
</p>
<p>
<a href="#!" className="dark-grey-text">
Help
</a>
</p>
</MDBCol>
<MDBCol md="4" lg="3" xl="3" className="mb-4 dark-grey-text">
<h6 className="text-uppercase font-weight-bold">
<strong>Contact</strong>
</h6>
<hr className="deep-purple accent-2 mb-4 mt-0 d-inline-block mx-auto" style={{ width: "60px" }} />
<p>
<i className="fa fa-home mr-3" /> New York, NY 10012, US
</p>
<p>
<i className="fa fa-envelope mr-3" /> info@example.com
</p>
<p>
<i className="fa fa-phone mr-3" /> + 01 234 567 88
</p>
<p>
<i className="fa fa-print mr-3" /> + 01 234 567 89
</p>
</MDBCol>
</MDBRow>
</MDBContainer>
<div className="footer-copyright text-center py-3">
<MDBContainer fluid>
© {new Date().getFullYear()} Copyright:{" "}
<a href="https://www.MDBootstrap.com"> MDBootstrap.com </a>
</MDBContainer>
</div>
</MDBFooter>
);
}
export default FooterPagePro;
Stylish color footer MDB Pro component
import React from "react";
import { MDBCol, MDBContainer, MDBRow, MDBFooter } from "mdbreact";
const FooterPagePro = () => {
return (
<MDBFooter color="mdb-color" className="font-small pt-4 mt-4">
<MDBContainer className="text-center text-md-left">
<MDBRow className="text-center text-md-left mt-3 pb-3">
<MDBCol md="3" lg="3" xl="3" className="mx-auto mt-3">
<h6 className="text-uppercase mb-4 font-weight-bold">
Company name
</h6>
<p>
Here you can use rows and columns here to organize your footer
content. Lorem ipsum dolor sit amet, consectetur adipisicing
elit.
</p>
</MDBCol>
<hr className="w-100 clearfix d-md-none" />
<MDBCol md="2" lg="2" xl="2" className="mx-auto mt-3">
<h6 className="text-uppercase mb-4 font-weight-bold">Products</h6>
<p>
<a href="#!">MDBootstrap</a>
</p>
<p>
<a href="#!">MDWordPress</a>
</p>
<p>
<a href="#!">BrandFlow</a>
</p>
<p>
<a href="#!">Bootstrap Angular</a>
</p>
</MDBCol>
<hr className="w-100 clearfix d-md-none" />
<MDBCol md="3" lg="2" xl="2" className="mx-auto mt-3">
<h6 className="text-uppercase mb-4 font-weight-bold">
Useful links
</h6>
<p>
<a href="#!">Your Account</a>
</p>
<p>
<a href="#!">Become an Affiliate</a>
</p>
<p>
<a href="#!">Shipping Rates</a>
</p>
<p>
<a href="#!">Help</a>
</p>
</MDBCol>
<hr className="w-100 clearfix d-md-none" />
<MDBCol md="4" lg="3" xl="3" className="mx-auto mt-3">
<h6 className="text-uppercase mb-4 font-weight-bold">Contact</h6>
<p>
<i className="fa fa-home mr-3" /> New York, NY 10012, US
</p>
<p>
<i className="fa fa-envelope mr-3" /> info@gmail.com
</p>
<p>
<i className="fa fa-phone mr-3" /> + 01 234 567 88
</p>
<p>
<i className="fa fa-print mr-3" /> + 01 234 567 89
</p>
</MDBCol>
</MDBRow>
<hr />
<MDBRow className="d-flex align-items-center">
<MDBCol md="8" lg="8">
<p className="text-center text-md-left grey-text">
© {new Date().getFullYear()} Copyright:{" "}
<a href="https://www.MDBootstrap.com"> MDBootstrap.com </a>
</p>
</MDBCol>
<MDBCol md="4" lg="4" className="ml-lg-0">
<div className="text-center text-md-right">
<ul className="list-unstyled list-inline">
<li className="list-inline-item">
<a className="btn-floating btn-sm rgba-white-slight mx-1">
<i className="fab fa-facebook-f" />
</a>
</li>
<li className="list-inline-item">
<a className="btn-floating btn-sm rgba-white-slight mx-1">
<i className="fab fa-twitter" />
</a>
</li>
<li className="list-inline-item">
<a className="btn-floating btn-sm rgba-white-slight mx-1">
<i className="fab fa-google-plus" />
</a>
</li>
<li className="list-inline-item">
<a className="btn-floating btn-sm rgba-white-slight mx-1">
<i className="fab fa-linkedin-in" />
</a>
</li>
</ul>
</div>
</MDBCol>
</MDBRow>
</MDBContainer>
</MDBFooter>
);
}
export default FooterPagePro;
Indigo color footer MDB Pro component
import React from "react";
import { MDBCol, MDBContainer, MDBRow, MDBFooter } from "mdbreact";
const FooterPagePro = () => {
return (
<MDBFooter color="indigo" className="font-small pt-0">
<MDBContainer>
<MDBRow className="pt-5 mb-3 text-center d-flex justify-content-center">
<MDBCol md="2" className="b-3">
<h6 className="title font-weight-bold">
<a href="#!">About us</a>
</h6>
</MDBCol>
<MDBCol md="2" className="b-3">
<h6 className="title font-weight-bold">
<a href="#!">Products</a>
</h6>
</MDBCol>
<MDBCol md="2" className="b-3">
<h6 className="title font-weight-bold">
<a href="#!">Awards</a>
</h6>
</MDBCol>
<MDBCol md="2" className="b-3">
<h6 className="title font-weight-bold">
<a href="#!">Help</a>
</h6>
</MDBCol>
<MDBCol md="2" className="b-3">
<h6 className="title font-weight-bold">
<a href="#!">Contact</a>
</h6>
</MDBCol>
</MDBRow>
<hr className="rgba-white-light" style={{ margin: "0 15%" }} />
<MDBRow className="d-flex text-center justify-content-center mb-md-0 mb-4">
<MDBCol md="8" sm="12" className="mt-5">
<p style={{ lineHeight: "1.7rem" }}>
Sed ut perspiciatis unde omnis iste natus error sit voluptatem
accusantium doloremque laudantium, totam rem aperiam, eaque ipsa
quae ab illo inventore veritatis et quasi architecto beatae
vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia
voluptas sit aspernatur aut odit aut fugit, sed quia
consequuntur.
</p>
</MDBCol>
</MDBRow>
<hr className="clearfix d-md-none rgba-white-light" style={{ margin: "10% 15% 5%" }} />
<MDBRow className="pb-3">
<MDBCol md="12">
<div className="mb-5 flex-center">
<a className="fb-ic">
<i className="fab fa-facebook-f fa-lg white-text mr-md-4"> </i>
</a>
<a className="tw-ic">
<i className="fab fa-twitter fa-lg white-text mr-md-4"> </i>
</a>
<a className="gplus-ic">
<i className="fab fa-google-plus-g fa-lg white-text mr-md-4">
</i>
</a>
<a className="li-ic">
<i className="fab fa-linkedin-in fa-lg white-text mr-md-4"> </i>
</a>
<a className="ins-ic">
<i className="fab fa-instagram fa-lg white-text mr-md-4"> </i>
</a>
<a className="pin-ic">
<i className="fab fa-pinterest fa-lg white-text"> </i>
</a>
</div>
</MDBCol>
</MDBRow>
</MDBContainer>
<div className="footer-copyright text-center py-3">
<MDBContainer fluid>
© {new Date().getFullYear()} Copyright:
<a href="https://www.MDBootstrap.com"> MDBootstrap.com </a>
</MDBContainer>
</div>
</MDBFooter>
);
}
export default FooterPagePro;
Gently Gray Footer MDB Pro component
import React from "react";
import { MDBCol, MDBContainer, MDBRow, MDBFooter } from "mdbreact";
const FooterPagePro = () => {
return (
<MDBFooter color="mdb-color" className="font-small lighten-3 pt-4 mt-4">
<MDBContainer className="text-center text-md-left">
<MDBRow className="my-4">
<MDBCol md="4" lg="4">
<h5 className="text-uppercase mb-4 font-weight-bold">
MDBFooter Content
</h5>
<p>
Here you can use rows and columns here to organize your footer
content.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit,
error amet numquam iure provident voluptate esse quasi,
veritatis totam voluptas nostrum.{" "}
</p>
</MDBCol>
<hr className="clearfix w-100 d-md-none" />
<MDBCol md="2" lg="2" className="ml-auto">
<h5 className="text-uppercase mb-4 font-weight-bold">About</h5>
<ul className="list-unstyled">
<p>
<a href="#!">PROJECTS</a>
</p>
<p>
<a href="#!">ABOUT US</a>
</p>
<p>
<a href="#!">BLOG</a>
</p>
<p>
<a href="#!">AWARDS</a>
</p>
</ul>
</MDBCol>
<hr className="clearfix w-100 d-md-none" />
<MDBCol md="5" lg="3">
<h5 className="text-uppercase mb-4 font-weight-bold">Address</h5>
<p>
<i className="fa fa-home mr-3" /> New York, NY 10012, US
</p>
<p>
<i className="fa fa-envelope mr-3" /> info@example.com
</p>
<p>
<i className="fa fa-phone mr-3" /> + 01 234 567 88
</p>
<p>
<i className="fa fa-print mr-3" /> + 01 234 567 89
</p>
</MDBCol>
<hr className="clearfix w-100 d-md-none" />
<MDBCol md="2" lg="2" className="text-center">
<h5 className="text-uppercase mb-4 font-weight-bold">
Follow us
</h5>
<div className="mt-2 ">
<a type="button" className="btn-floating btn-small btn-fb">
<i className="fab fa-facebook-f" />
</a>
<a type="button" className="btn-floating btn-small btn-tw">
<i className="fab fa-twitter" />
</a>
<a type="button" className="btn-floating btn-small btn-gplus">
<i className="fab fa-google-plus" />
</a>
<a type="button" className="btn-floating btn-small btn-dribbble">
<i className="fab fa-dribbble" />
</a>
</div>
</MDBCol>
<hr className="clearfix w-100 d-md-none" />
</MDBRow>
</MDBContainer>
<div className="footer-copyright text-center py-3">
<MDBContainer fluid>
© {new Date().getFullYear()} Copyright:{" "}
<a href="https://www.MDBootstrap.com"> MDBootstrap.com </a>
</MDBContainer>
</div>
</MDBFooter>
);
}
export default FooterPagePro;
Social Icons Footer MDB Pro component