Footer
React Bootstrap 5 Footer component
A footer is an additional navigation component. It can hold links, buttons, company info, copyrights, forms, and many other elements.
Basic example
A basic example of the simple footer with text, links and copyright section.
The background color is set via CSS class .bg-light. You can set your own color
choosing from MDB color palette or by
setting a completely custom color via inline CSS, for example
style="background-color: #9933CC;"
We put a mask on the copyrights section using RGBA code to outstand it. You can change the intensity of its color by manipulating the last value in the RGBA code.
import React from 'react';
import { MDBFooter, MDBContainer, MDBRow, MDBCol } from 'mdb-react-ui-kit';
export default function App() {
return (
<MDBFooter backgroundColor='light' className='text-center text-lg-left'>
<MDBContainer className='p-4'>
<MDBRow>
<MDBCol lg='6' md='12' className='mb-4 mb-md-0'>
<h5 className='text-uppercase'>Footer Content</h5>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Iste atque ea quis molestias. Fugiat
pariatur maxime quis culpa corporis vitae repudiandae aliquam voluptatem veniam, est atque
cumque eum delectus sint!
</p>
</MDBCol>
<MDBCol lg='3' md='6' className='mb-4 mb-md-0'>
<h5 className='text-uppercase'>Links</h5>
<ul className='list-unstyled mb-0'>
<li>
<a href='#!' className='text-dark'>
Link 1
</a>
</li>
<li>
<a href='#!' className='text-dark'>
Link 2
</a>
</li>
<li>
<a href='#!' className='text-dark'>
Link 3
</a>
</li>
<li>
<a href='#!' className='text-dark'>
Link 4
</a>
</li>
</ul>
</MDBCol>
<MDBCol lg='3' md='6' className='mb-4 mb-md-0'>
<h5 className='text-uppercase mb-0'>Links</h5>
<ul className='list-unstyled'>
<li>
<a href='#!' className='text-dark'>
Link 1
</a>
</li>
<li>
<a href='#!' className='text-dark'>
Link 2
</a>
</li>
<li>
<a href='#!' className='text-dark'>
Link 3
</a>
</li>
<li>
<a href='#!' className='text-dark'>
Link 4
</a>
</li>
</ul>
</MDBCol>
</MDBRow>
</MDBContainer>
<div className='text-center p-3' style={{ backgroundColor: 'rgba(0, 0, 0, 0.2)' }}>
© {new Date().getFullYear()}{' '}
<a className='text-dark' href='https://mdbootstrap.com/'>
MDBootstrap.com
</a>
</div>
</MDBFooter>
);
}
Supported content
Footers can hold multiple different components. Below a few of the most common examples of footer usage.
Copyrights
As mentioned before - we put a mask on the copyrights section using RGBA code to outstand it. You can change the intensity of its color by manipulating the last value in the RGBA code.
import React from 'react';
import { MDBFooter } from 'mdb-react-ui-kit';
export default function App() {
return (
<MDBFooter backgroundColor='light' className='text-center text-lg-left'>
<div className='text-center p-3' style={{ backgroundColor: 'rgba(0, 0, 0, 0.2)' }}>
© {new Date().getFullYear()} Copyright:{' '}
<a className='text-dark' href='https://mdbootstrap.com/'>
MDBootstrap.com
</a>
</div>
</MDBFooter>
);
}
Links
You can adjust the number of the columns by using grid system.
import React from 'react';
import { MDBFooter } from 'mdb-react-ui-kit';
export default function App() {
return (
<MDBFooter backgroundColor='light' className='text-center text-lg-left'>
<MDBContainer className='p-4'>
<MDBRow>
<MDBCol lg='3' md='6' className='mb-4 mb-md-0'>
<h5 className='text-uppercase'>Links</h5>
<ul className='list-unstyled mb-0'>
<li>
<a href='#!' className='text-dark'>
Link 1
</a>
</li>
<li>
<a href='#!' className='text-dark'>
Link 2
</a>
</li>
<li>
<a href='#!' className='text-dark'>
Link 3
</a>
</li>
<li>
<a href='#!' className='text-dark'>
Link 4
</a>
</li>
</ul>
</MDBCol>
<MDBCol lg='3' md='6' className='mb-4 mb-md-0'>
<h5 className='text-uppercase mb-0'>Links</h5>
<ul className='list-unstyled'>
<li>
<a href='#!' className='text-dark'>
Link 1
</a>
</li>
<li>
<a href='#!' className='text-dark'>
Link 2
</a>
</li>
<li>
<a href='#!' className='text-dark'>
Link 3
</a>
</li>
<li>
<a href='#!' className='text-dark'>
Link 4
</a>
</li>
</ul>
</MDBCol>
<MDBCol lg='3' md='6' className='mb-4 mb-md-0'>
<h5 className='text-uppercase'>Links</h5>
<ul className='list-unstyled mb-0'>
<li>
<a href='#!' className='text-dark'>
Link 1
</a>
</li>
<li>
<a href='#!' className='text-dark'>
Link 2
</a>
</li>
<li>
<a href='#!' className='text-dark'>
Link 3
</a>
</li>
<li>
<a href='#!' className='text-dark'>
Link 4
</a>
</li>
</ul>
</MDBCol>
<MDBCol lg='3' md='6' className='mb-4 mb-md-0'>
<h5 className='text-uppercase mb-0'>Links</h5>
<ul className='list-unstyled'>
<li>
<a href='#!' className='text-dark'>
Link 1
</a>
</li>
<li>
<a href='#!' className='text-dark'>
Link 2
</a>
</li>
<li>
<a href='#!' className='text-dark'>
Link 3
</a>
</li>
<li>
<a href='#!' className='text-dark'>
Link 4
</a>
</li>
</ul>
</MDBCol>
</MDBRow>
</MDBContainer>
<div className='text-center p-3' style={{ backgroundColor: 'rgba(0, 0, 0, 0.2)' }}>
© {new Date().getFullYear()} Copyright:{' '}
<a className='text-dark' href='https://mdbootstrap.com/'>
MDBootstrap.com
</a>
</div>
</MDBFooter>
);
}
Text
For more advanced text options have a look at the Typography docs or Text utilities docs .
import React from 'react';
import { MDBFooter, MDBContainer, MDBRow, MDBCol} from 'mdb-react-ui-kit';
export default function App() {
return (
<MDBFooter backgroundColor='light' className='text-center text-lg-left'>
<MDBContainer className='p-4'>
<MDBRow>
<MDBCol lg='6' md='12' className='mb-4 mb-md-0'>
<h5 className='text-uppercase'>Footer text</h5>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Iste atque ea quis molestias.
Fugiat pariatur maxime quis culpa corporis vitae repudiandae aliquam voluptatem veniam,
est atque cumque eum delectus sint!
</p>
</MDBCol>
<MDBCol lg='6' md='12' className='mb-4 mb-md-0'>
<h5 className='text-uppercase'>Footer text</h5>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Iste atque ea quis molestias.
Fugiat pariatur maxime quis culpa corporis vitae repudiandae aliquam voluptatem veniam,
est atque cumque eum delectus sint!
</p>
</MDBCol>
</MDBRow>
</MDBContainer>
<div className='text-center p-3' style={{ backgroundColor: 'rgba(0, 0, 0, 0.2)' }}>
© {new Date().getFullYear()} Copyright:{' '}
<a className='text-dark' href='https://mdbootstrap.com/'>
MDBootstrap.com
</a>
</div>
</MDBFooter>
);
}
Forms
import React from 'react';
import { MDBFooter, MDBContainer, MDBRow, MDBCol} from 'mdb-react-ui-kit';
export default function App() {
return (
<MDBFooter backgroundColor='light' className='text-center text-lg-left'>
<MDBContainer className='p-4 pb-0'>
<form action=''>
<MDBRow>
<MDBCol size='auto' className='mb-4 mb-md-0'>
<p className='pt-2'>
<strong>Sign up for our newsletter</strong>
</p>
</MDBCol>
<MDBCol md='5' size='12' className='mb-4 mb-md-0'>
<MDBInput type='text' id='form5Example2' label='Email address' />
</MDBCol>
<MDBCol size='auto' className='mb-4 mb-md-0'>
<MDBBtn>Subscribe</MDBBtn>
</MDBCol>
</MDBRow>
</form>
</MDBContainer>
<div className='text-center p-3' style={{ backgroundColor: 'rgba(0, 0, 0, 0.2)' }}>
© {new Date().getFullYear()} Copyright:{' '}
<a className='text-dark' href='https://mdbootstrap.com/'>
MDBootstrap.com
</a>
</div>
</MDBFooter>
);
}
Colors
As mentioned before - the background color is set via CSS class
.bg-light. You can set your own color choosing from
MDB color palette or by setting a
completely custom color via inline CSS, for example
style="background-color: #9933CC;"
When changing the color of the footer to the darker remember to change also the color of the containing elements.
In the example below, we add .text-white color to change the color of the text to
white and we replace .text-dark class in the links to .text-white as
well.
import React from 'react';
import { MDBFooter, MDBContainer, MDBRow, MDBCol} from 'mdb-react-ui-kit';
export default function App() {
return (
<MDBFooter backgroundColor='primary' className='text-white text-center text-lg-left'>
<MDBContainer className='p-4'>
<MDBRow>
<MDBCol lg='6' md='12' className='mb-4 mb-md-0'>
<h5 className='text-uppercase'>Footer Content</h5>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Iste atque ea quis molestias.
Fugiat pariatur maxime quis culpa corporis vitae repudiandae aliquam voluptatem veniam, est
atque cumque eum delectus sint!
</p>
</MDBCol>
<MDBCol lg='3' md='6' className='mb-4 mb-md-0'>
<h5 className='text-uppercase'>Links</h5>
<ul className='list-unstyled mb-0'>
<li>
<a href='#!' className='text-white'>
Link 1
</a>
</li>
<li>
<a href='#!' className='text-white'>
Link 2
</a>
</li>
<li>
<a href='#!' className='text-white'>
Link 3
</a>
</li>
<li>
<a href='#!' className='text-white'>
Link 4
</a>
</li>
</ul>
</MDBCol>
<MDBCol lg='3' md='6' className='mb-4 mb-md-0'>
<h5 className='text-uppercase mb-0'>Links</h5>
<ul className='list-unstyled'>
<li>
<a href='#!' className='text-white'>
Link 1
</a>
</li>
<li>
<a href='#!' className='text-white'>
Link 2
</a>
</li>
<li>
<a href='#!' className='text-white'>
Link 3
</a>
</li>
<li>
<a href='#!' className='text-white'>
Link 4
</a>
</li>
</ul>
</MDBCol>
</MDBRow>
</MDBContainer>
<div className='text-center p-3' style={{ backgroundColor: 'rgba(0, 0, 0, 0.2)' }}>
© {new Date().getFullYear()} Copyright:{' '}
<a className='text-white' href='https://mdbootstrap.com/'>
MDBootstrap.com
</a>
</div>
</MDBFooter>
);
}
Footer - API
Import
import { MDBFooter } from 'mdb-react-ui-kit';
Properties
MDBFooter
| Name | Type | Default | Description | Example |
|---|---|---|---|---|
tag
|
String | 'footer' |
Defines tag of the MDBFooter element |
<MDBFooter tag="section" />
|
className
|
String | '' |
Add custom class to MDBFooter |
<MDBFooter className="class" />
|
backgroundColor
|
String | ' |
Change color of footer |
<MDBFooter backgroundColor="primary" />
|
textColor
|
Boolean | false |
Change color of text in footer |
<MDBFooter textColor="white" />
|