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 prop bg. Default value is
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;". In this case you
should set bg property value to none.
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 bgColor='light' className='text-center text-lg-start text-muted'>
<section className='d-flex justify-content-center justify-content-lg-between p-4 border-bottom'>
<div className='me-5 d-none d-lg-block'>
<span>Get connected with us on social networks:</span>
</div>
<div>
<a href='' className='me-4 text-reset'>
<i className='fab fa-facebook-f'></i>
</a>
<a href='' className='me-4 text-reset'>
<i className='fab fa-twitter'></i>
</a>
<a href='' className='me-4 text-reset'>
<i className='fab fa-google'></i>
</a>
<a href='' className='me-4 text-reset'>
<i className='fab fa-instagram'></i>
</a>
<a href='' className='me-4 text-reset'>
<i className='fab fa-linkedin'></i>
</a>
<a href='' className='me-4 text-reset'>
<i className='fab fa-github'></i>
</a>
</div>
</section>
<section className=''>
<div className='container text-center text-md-start mt-5'>
<div className='row mt-3'>
<div className='col-md-3 col-lg-4 col-xl-3 mx-auto mb-4'>
<h6 className='text-uppercase fw-bold mb-4'>
<i className='fas fa-gem me-3'></i>Company name
</h6>
<p>
Here you can use rows and columns to organize your footer content. Lorem ipsum dolor sit amet,
consectetur adipisicing elit.
</p>
</div>
<div className='col-md-2 col-lg-2 col-xl-2 mx-auto mb-4'>
<h6 className='text-uppercase fw-bold mb-4'>Products</h6>
<p>
<a href='#!' className='text-reset'>
Angular
</a>
</p>
<p>
<a href='#!' className='text-reset'>
React
</a>
</p>
<p>
<a href='#!' className='text-reset'>
Vue
</a>
</p>
<p>
<a href='#!' className='text-reset'>
Laravel
</a>
</p>
</div>
<div className='col-md-3 col-lg-2 col-xl-2 mx-auto mb-4'>
<h6 className='text-uppercase fw-bold mb-4'>Useful links</h6>
<p>
<a href='#!' className='text-reset'>
Pricing
</a>
</p>
<p>
<a href='#!' className='text-reset'>
Settings
</a>
</p>
<p>
<a href='#!' className='text-reset'>
Orders
</a>
</p>
<p>
<a href='#!' className='text-reset'>
Help
</a>
</p>
</div>
<div className='col-md-4 col-lg-3 col-xl-3 mx-auto mb-md-0 mb-4'>
<h6 className='text-uppercase fw-bold mb-4'>Contact</h6>
<p>
<i className='fas fa-home me-3'></i> New York, NY 10012, US
</p>
<p>
<i className='fas fa-envelope me-3'></i>
info@example.com
</p>
<p>
<i className='fas fa-phone me-3'></i> + 01 234 567 88
</p>
<p>
<i className='fas fa-print me-3'></i> + 01 234 567 89
</p>
</div>
</div>
</div>
</section>
<div className='text-center p-4' style={{ backgroundColor: 'rgba(0, 0, 0, 0.05)' }}>
© 2021 Copyright:
<a className='text-reset fw-bold' href='https://mdbootstrap.com/'>
MDBootstrap.com
</a>
</div>
</MDBFooter>
);
}
Advanced example
An advanced example of Bootstrap Footer.
We applied a dark background by using
bgColor="dark" property. With such settings, it's necessary to
use color="white" for typography and links,
outline="light" for buttons, and
.form-white for the form.
import React from 'react';
import {
MDBFooter,
MDBContainer,
MDBIcon,
MDBInput,
MDBCol,
MDBRow
} from 'mdb-react-ui-kit';
export default function App() {
return (
<MDBFooter className='text-center' color='white' bgColor='dark'>
<MDBContainer className='p-4'>
<section className='mb-4'>
<a className='btn btn-outline-light btn-floating m-1' href='#!' role='button'>
<MDBIcon fab icon='facebook-f' />
</a>
<a className='btn btn-outline-light btn-floating m-1' href='#!' role='button'>
<MDBIcon fab icon='twitter' />
</a>
<a className='btn btn-outline-light btn-floating m-1' href='#!' role='button'>
<MDBIcon fab icon='google' />
</a>
<a className='btn btn-outline-light btn-floating m-1' href='#!' role='button'>
<MDBIcon fab icon='instagram' />
</a>
<a className='btn btn-outline-light btn-floating m-1' href='#!' role='button'>
<MDBIcon fab icon='linkedin-in' />
</a>
<a className='btn btn-outline-light btn-floating m-1' href='#!' role='button'>
<MDBIcon fab icon='github' />
</a>
</section>
<section className=''>
<form action=''>
<div className='row d-flex justify-content-center'>
<div className='col-auto'>
<p className='pt-2'>
<strong>Sign up for our newsletter</strong>
</p>
</div>
<MDBCol md='5' start='12'>
<MDBInput contrast type='email' label='Email address' className='mb-4' />
</MDBCol>
<div className='col-auto'>
<MDBBtn outline color='light' type='submit' className='mb-4'>
Subscribe
</MDBBtn>
</div>
</div>
</form>
</section>
<section className='mb-4'>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt distinctio earum repellat quaerat
voluptatibus placeat nam, commodi optio pariatur est quia magnam eum harum corrupti dicta, aliquam
sequi voluptate quas.
</p>
</section>
<section className=''>
<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-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'>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'>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'>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>
</MDBRow>
</section>
</MDBContainer>
<div className='text-center p-3' style={{ backgroundColor: 'rgba(0, 0, 0, 0.2)' }}>
© 2020 Copyright:
<a className='text-white' 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 bgColor='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,
MDBContainer,
MDBCol,
MDBRow
} from 'mdb-react-ui-kit';
export default function App() {
return (
<MDBFooter bgColor='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,
MDBCol,
MDBRow
} from 'mdb-react-ui-kit';
export default function App() {
return (
<MDBFooter bgColor='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>
);
}
Images
For more advanced images options have a look at the Images docs .
import React from 'react';
import {
MDBFooter,
MDBContainer,
MDBIcon,
MDBInput,
MDBCol,
MDBRow,
MDBRipple
} from 'mdb-react-ui-kit';
export default function App() {
return (
<MDBFooter className='text-center text-white' style={{ backgroundColor: '#caced1' }}>
<MDBContainer className='p-4'>
<section className=''>
<MDBRow>
<MDBCol lg='2' md='12' className='mb-4 mb-md-0'>
<MDBRipple
rippleColor='light'
className='bg-image hover-overlay shadow-1-strong rounded'
>
<img src='https://mdbcdn.b-cdn.net/img/new/fluid/city/113.webp' className='w-100' />
<a href='#!'>
<div
className='mask'
style={{ backgroundColor: 'rgba(251, 251, 251, 0.2)' }}
></div>
</a>
</MDBRipple>
</MDBCol>
<MDBCol lg='2' md='12' className='mb-4 mb-md-0'>
<MDBRipple
rippleColor='light'
className='bg-image hover-overlay shadow-1-strong rounded'
>
<img src='https://mdbcdn.b-cdn.net/img/new/fluid/city/111.webp' className='w-100' />
<a href='#!'>
<div
className='mask'
style={{ backgroundColor: 'rgba(251, 251, 251, 0.2)' }}
></div>
</a>
</MDBRipple>
</MDBCol>
<MDBCol lg='2' md='12' className='mb-4 mb-md-0'>
<MDBRipple
rippleColor='light'
className='bg-image hover-overlay shadow-1-strong rounded'
>
<img src='https://mdbcdn.b-cdn.net/img/new/fluid/city/112.webp' className='w-100' />
<a href='#!'>
<div
className='mask'
style={{ backgroundColor: 'rgba(251, 251, 251, 0.2)' }}
></div>
</a>
</MDBRipple>
</MDBCol>
<MDBCol lg='2' md='12' className='mb-4 mb-md-0'>
<MDBRipple
rippleColor='light'
className='bg-image hover-overlay shadow-1-strong rounded'
>
<img src='https://mdbcdn.b-cdn.net/img/new/fluid/city/114.webp' className='w-100' />
<a href='#!'>
<div
className='mask'
style={{ backgroundColor: 'rgba(251, 251, 251, 0.2)' }}
></div>
</a>
</MDBRipple>
</MDBCol>
<MDBCol lg='2' md='12' className='mb-4 mb-md-0'>
<MDBRipple
rippleColor='light'
className='bg-image hover-overlay shadow-1-strong rounded'
>
<img src='https://mdbcdn.b-cdn.net/img/new/fluid/city/115.webp' className='w-100' />
<a href='#!'>
<div
className='mask'
style={{ backgroundColor: 'rgba(251, 251, 251, 0.2)' }}
></div>
</a>
</MDBRipple>
</MDBCol>
<MDBCol lg='2' md='12' className='mb-4 mb-md-0'>
<MDBRipple
rippleColor='light'
className='bg-image hover-overlay shadow-1-strong rounded'
>
<img src='https://mdbcdn.b-cdn.net/img/new/fluid/city/116.webp' className='w-100' />
<a href='#!'>
<div
className='mask'
style={{ backgroundColor: 'rgba(251, 251, 251, 0.2)' }}
></div>
</a>
</MDBRipple>
</MDBCol>
</MDBRow>
</section>
</MDBContainer>
<div className='text-center p-3' style={{ backgroundColor: 'rgba(0, 0, 0, 0.2)' }}>
© 2020 Copyright:
<a className='text-white' href='https://mdbootstrap.com/'>
MDBootstrap.com
</a>
</div>
</MDBFooter>
);
}
Iframe (embeds)
For more advanced iframe options have a look at the Ratio docs .
import React from 'react';
import {
MDBFooter,
MDBContainer,
MDBCol,
MDBRow,
} from 'mdb-react-ui-kit';
export default function App() {
return (
<MDBFooter className='text-center text-white' style={{ backgroundColor: '#45637d' }}>
<MDBContainer className='p-4'>
<section className=''>
<div className='row d-flex justify-content-center'>
<MDBCol lg='6'>
<div className='ratio ratio-16x9'>
<iframe
className='shadow-1-strong rounded'
src='https://www.youtube.com/embed/vlDzYIIOYmM?enablejsapi=1&origin=https%3A%2F%2Fmdbootstrap.com'
title='YouTube video'
allowFullScreen
data-gtm-yt-inspected-2340190_699='true'
id='388567449'
></iframe>
</div>
</MDBCol>
</div>
</section>
</MDBContainer>
<div className='text-center p-3' style={{ backgroundColor: 'rgba(0, 0, 0, 0.2)' }}>
© 2020 Copyright:
<a className='text-white' href='https://mdbootstrap.com/'>
MDBootstrap.com
</a>
</div>
</MDBFooter>
);
}
Icons
For more advanced icon options have a look at the Icons docs and Buttons docs.
import React from 'react';
import {
MDBFooter,
MDBContainer,
MDBCol,
MDBRow,
MDBIcon
} from 'mdb-react-ui-kit';
export default function App() {
return (
<MDBFooter className='text-center text-white' style={{ backgroundColor: '#f1f1f1' }}>
<MDBContainer className='pt-4'>
<section className='mb-4'>
<a
className='btn btn-link btn-floating btn-lg text-dark m-1'
href='#!'
role='button'
data-mdb-ripple-color='dark'
>
<MDBIcon fab className='fab fa-facebook-f' />
</a>
<a
className='btn btn-link btn-floating btn-lg text-dark m-1'
href='#!'
role='button'
data-mdb-ripple-color='dark'
>
<MDBIcon fab className='fa-twitter' />
</a>
<a
className='btn btn-link btn-floating btn-lg text-dark m-1'
href='#!'
role='button'
data-mdb-ripple-color='dark'
>
<MDBIcon fab className='fa-google' />
</a>
<a
className='btn btn-link btn-floating btn-lg text-dark m-1'
href='#!'
role='button'
data-mdb-ripple-color='dark'
>
<MDBIcon fab className='fa-instagram' />
</a>
<a
className='btn btn-link btn-floating btn-lg text-dark m-1'
href='#!'
role='button'
data-mdb-ripple-color='dark'
>
<MDBIcon fab className='fa-linkedin' />
</a>
<a
className='btn btn-link btn-floating btn-lg text-dark m-1'
href='#!'
role='button'
data-mdb-ripple-color='dark'
>
<MDBIcon fab className='fa-github' />
</a>
</section>
</MDBContainer>
<div className='text-center text-dark p-3' style={{ backgroundColor: 'rgba(0, 0, 0, 0.2)' }}>
© 2020 Copyright:
<a className='text-dark' href='https://mdbootstrap.com/'>
MDBootstrap.com
</a>
</div>
</MDBFooter>
);
}
Call to action
An example of Call to Action scheme within the Footer.
import React from 'react';
import {
MDBFooter,
MDBContainer,
MDBCol,
MDBRow,
} from 'mdb-react-ui-kit';
export default function App() {
return (
<MDBFooter className='text-center text-white' style={{ backgroundColor: '#0a4275' }}>
<MDBContainer className='p-4 pb-0'>
<section className=''>
<p className='d-flex justify-content-center align-items-center'>
<span className='me-3'>Register for free</span>
<button type='button' className='btn btn-outline-light btn-rounded'>
Sign up!
</button>
</p>
</section>
</MDBContainer>
<div className='text-center p-3' style={{ backgroundColor: 'rgba(0, 0, 0, 0.2)' }}>
© 2020 Copyright:
<a className='text-white' href='https://mdbootstrap.com/'>
MDBootstrap.com
</a>
</div>
</MDBFooter>
);
}
Forms
Simple usage of the inline form within the Footer and with use of the grid. By default it's left aligned.
For more advanced icon options have a look at the Forms docs and Grid docs.
import React from 'react';
import {
MDBFooter,
MDBContainer,
MDBCol,
MDBRow,
MDBIcon
} from 'mdb-react-ui-kit';
export default function App() {
return (
<MDBFooter bgColor='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>
);
}
Form centered
An example of centered form within the Footer.
For more advanced icon options have a look at the Horizontal alignment docs.
import React from 'react';
import {
MDBFooter,
MDBContainer,
MDBCol,
MDBRow,
MDBIcon,
MDBInput
} from 'mdb-react-ui-kit';
export default function App() {
return (
<MDBFooter bgColor='light' className='text-center text-lg-left'>
<MDBContainer className='p-4 pb-0'>
<form action=''>
<MDBRow className='d-flex justify-content-center'>
<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>
);
}
Form dark theme
An example of dark theme Footer with the form inside
To use forms properly on a dark background add
text="white" for typography and links,
outline="light" for buttons, and
.form-white for the form.
For more advanced color options have a look at the Colors docs and Theme docs.
import React from 'react';
import {
MDBFooter,
MDBContainer,
MDBCol,
MDBRow,
MDBIcon,
MDBInput
} from 'mdb-react-ui-kit';
export default function App() {
return (
<MDBFooter bgColor='dark' className='text-center text-white text-lg-left'>
<MDBContainer className='p-4 pb-0'>
<form action=''>
<MDBRow className='d-flex justify-content-center'>
<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' contrast />
</MDBCol>
<MDBCol size='auto' className='mb-4 mb-md-0'>
<MDBBtn outline color='light'>
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-white' href='https://mdbootstrap.com/'>
MDBootstrap.com
</a>
</div>
</MDBFooter>
);
}
Colors
As mentioned before - the background color is set via property
bg. 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;". In this case you
should set bg property value to none.
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,
MDBCol,
MDBRow,
} from 'mdb-react-ui-kit';
export default function App() {
return (
<MDBFooter bgColor='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>
);
}
Alignment
By default, all elements inside the Footer are left-aligned on every screen size. However, you can easily change it and center it on all screen sizes or only on the specific breakpoint.
For more advanced icon options have a look at the Alignment docs.
Left-aligned
Default left-aligned Footer
import React from 'react';
import {
MDBFooter,
MDBContainer,
MDBCol,
MDBRow,
} from 'mdb-react-ui-kit';
export default function App() {
return (
<MDBFooter className='bg-secondary text-white'>
<div className='container p-4'>
<MDBRow>
<div className='col-lg-6 col-md-12 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>
</div>
<div className='col-lg-3 col-md-6 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>
</div>
<div className='col-lg-3 col-md-6 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>
</div>
</MDBRow>
</div>
<div className='text-center p-3' style={{ backgroundColor: 'rgba(0, 0, 0, 0.2)' }}>
© 2020 Copyright:
<a className='text-white' href='https://mdbootstrap.com/'>
MDBootstrap.com
</a>
</div>
</MDBFooter>
);
}
Always centered
Add .text-center className to the
footer element to center the content.
import React from 'react';
import {
MDBFooter,
MDBContainer,
MDBCol,
MDBRow,
} from 'mdb-react-ui-kit';
export default function App() {
return (
<MDBFooter className='bg-secondary text-white text-center'>
<div className='container p-4'>
<MDBRow>
<div className='col-lg-6 col-md-12 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>
</div>
<div className='col-lg-3 col-md-6 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>
</div>
<div className='col-lg-3 col-md-6 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>
</div>
</MDBRow>
</div>
<div className='text-center p-3' style={{ backgroundColor: 'rgba(0, 0, 0, 0.2)' }}>
© 2020 Copyright:
<a className='text-white' href='https://mdbootstrap.com/'>
MDBootstrap.com
</a>
</div>
</MDBFooter>
);
}
Centered on small
To center elements of the Footer only on small screens add
.text-center .text-md-start classes to the
footer element.
With these properties, elements will only be centered on screens
smaller than
768 px wide. On larger screens, they will be
left-aligned by default.
To learn more about Bootstrap breakpoints read Breakpoints docs.
import React from 'react';
import {
MDBFooter,
MDBContainer,
MDBCol,
MDBRow,
} from 'mdb-react-ui-kit';
export default function App() {
return (
<MDBFooter className='bg-secondary text-white text-center text-md-start'>
<div className='container p-4'>
<MDBRow>
<div className='col-lg-6 col-md-12 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>
</div>
<div className='col-lg-3 col-md-6 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>
</div>
<div className='col-lg-3 col-md-6 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>
</div>
</MDBRow>
</div>
<div className='text-center p-3' style={{ backgroundColor: 'rgba(0, 0, 0, 0.2)' }}>
© 2020 Copyright:
<a className='text-white' href='https://mdbootstrap.com/'>
MDBootstrap.com
</a>
</div>
</MDBFooter>
);
}
If you want to support our friends from Tailwind Elements you can also check out the Tailwind footer documentation.
Footer - API
Import
import { MDBFooter } from 'mdb-react-ui-kit';
Properties
MDBFooter
| Name | Type | Default | Description | Example |
|---|---|---|---|---|
tag
|
React.ComponentProps<any> | 'footer' |
Defines tag of the MDBFooter element |
<MDBFooter tag="section" />
|
className
|
string | '' |
Add custom class to MDBFooter |
<MDBFooter className="class" />
|
bgColor
|
"primary" | "secondary" | "success" | "info" | "warning" | "danger" | "light" | "dark" | '' |
Change color of footer |
<MDBFooter bgColor="primary" />
|
textColor
|
"primary" | "secondary" | "success" | "info" | "warning" | "danger" | "light" | "dark" | "body" | "muted" | "white" | "black-50" | "white-50" | |
Change color of text in footer |
<MDBFooter textColor="white" />
|
ref
|
React.Ref<any> | |
A reference to the MDBFooter component |
<MDBFooter ref={someRef} />
|