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, MDBContainer, MDBRow, MDBCol, MDBIcon } 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'>
<MDBIcon fab icon="facebook-f" />
</a>
<a href='' className='me-4 text-reset'>
<MDBIcon fab icon="twitter" />
</a>
<a href='' className='me-4 text-reset'>
<MDBIcon fab icon="google" />
</a>
<a href='' className='me-4 text-reset'>
<MDBIcon fab icon="instagram" />
</a>
<a href='' className='me-4 text-reset'>
<MDBIcon fab icon="linkedin" />
</a>
<a href='' className='me-4 text-reset'>
<MDBIcon fab icon="github" />
</a>
</div>
</section>
<section className=''>
<MDBContainer className='text-center text-md-start mt-5'>
<MDBRow className='mt-3'>
<MDBCol md="3" lg="4" xl="3" className='mx-auto mb-4'>
<h6 className='text-uppercase fw-bold mb-4'>
<MDBIcon icon="gem" className="me-3" />
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>
</MDBCol>
<MDBCol md="2" lg="2" xl="2" className='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>
</MDBCol>
<MDBCol md="3" lg="2" xl="2" className='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>
</MDBCol>
<MDBCol md="4" lg="3" xl="3" className='mx-auto mb-md-0 mb-4'>
<h6 className='text-uppercase fw-bold mb-4'>Contact</h6>
<p>
<MDBIcon icon="home" className="me-2" />
New York, NY 10012, US
</p>
<p>
<MDBIcon icon="envelope" className="me-3" />
info@example.com
</p>
<p>
<MDBIcon icon="phone" className="me-3" /> + 01 234 567 88
</p>
<p>
<MDBIcon icon="print" className="me-3" /> + 01 234 567 89
</p>
</MDBCol>
</MDBRow>
</MDBContainer>
</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,
MDBBtn
} 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'>
<MDBBtn outline color="light" floating className='m-1' href='#!' role='button'>
<MDBIcon fab icon='facebook-f' />
</MDBBtn>
<MDBBtn outline color="light" floating className='m-1' href='#!' role='button'>
<MDBIcon fab icon='twitter' />
</MDBBtn>
<MDBBtn outline color="light" floating className='m-1' href='#!' role='button'>
<MDBIcon fab icon='google' />
</MDBBtn>
<MDBBtn outline color="light" floating className='m-1' href='#!' role='button'>
<MDBIcon fab icon='instagram' />
</MDBBtn>
<MDBBtn outline color="light" floating className='m-1' href='#!' role='button'>
<MDBIcon fab icon='linkedin-in' />
</MDBBtn>
<MDBBtn outline color="light" floating className='m-1' href='#!' role='button'>
<MDBIcon fab icon='github' />
</MDBBtn>
</section>
<section className=''>
<form action=''>
<MDBRow className='d-flex justify-content-center'>
<MDBCol size="auto">
<p className='pt-2'>
<strong>Sign up for our newsletter</strong>
</p>
</MDBCol>
<MDBCol md='5' start>
<MDBInput contrast type='email' label='Email address' className='mb-4' />
</MDBCol>
<MDBCol size="auto">
<MDBBtn outline color='light' type='submit' className='mb-4'>
Subscribe
</MDBBtn>
</MDBCol>
</MDBRow>
</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>
);
}
White background and secondary icons
Our new minimal design for the footer with subtle secondary-colored icons.
import React from 'react';
import { MDBFooter, MDBContainer, MDBRow, MDBCol, MDBIcon } 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'>
<MDBIcon color='secondary' fab icon='facebook-f' />
</a>
<a href='' className='me-4 text-reset'>
<MDBIcon color='secondary' fab icon='twitter' />
</a>
<a href='' className='me-4 text-reset'>
<MDBIcon color='secondary' fab icon='google' />
</a>
<a href='' className='me-4 text-reset'>
<MDBIcon color='secondary' fab icon='instagram' />
</a>
<a href='' className='me-4 text-reset'>
<MDBIcon color='secondary' fab icon='linkedin' />
</a>
<a href='' className='me-4 text-reset'>
<MDBIcon color='secondary' fab icon='github' />
</a>
</div>
</section>
<section className=''>
<MDBContainer className='text-center text-md-start mt-5'>
<MDBRow className='mt-3'>
<MDBCol md='3' lg='4' xl='3' className='mx-auto mb-4'>
<h6 className='text-uppercase fw-bold mb-4'>
<MDBIcon color='secondary' icon='gem' className='me-3' />
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>
</MDBCol>
<MDBCol md='2' lg='2' xl='2' className='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>
</MDBCol>
<MDBCol md='3' lg='2' xl='2' className='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>
</MDBCol>
<MDBCol md='4' lg='3' xl='3' className='mx-auto mb-md-0 mb-4'>
<h6 className='text-uppercase fw-bold mb-4'>Contact</h6>
<p>
<MDBIcon color='secondary' icon='home' className='me-2' />
New York, NY 10012, US
</p>
<p>
<MDBIcon color='secondary' icon='envelope' className='me-3' />
info@example.com
</p>
<p>
<MDBIcon color='secondary' icon='phone' className='me-3' /> + 01 234 567 88
</p>
<p>
<MDBIcon color='secondary' icon='print' className='me-3' /> + 01 234 567 89
</p>
</MDBCol>
</MDBRow>
</MDBContainer>
</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>
);
}
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=''>
<MDBRow className='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>
</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>
);
}
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,
MDBBtn
} 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'>
<MDBBtn
rippleColor="dark"
color='link'
floating
size="lg"
className='text-dark m-1'
href='#!'
role='button'
>
<MDBIcon fab className='fab fa-facebook-f' />
</MDBBtn>
<MDBBtn
rippleColor="dark"
color='link'
floating
size="lg"
className='text-dark m-1'
href='#!'
role='button'
>
<MDBIcon fab className='fa-twitter' />
</MDBBtn>
<MDBBtn
rippleColor="dark"
color='link'
floating
size="lg"
className='text-dark m-1'
href='#!'
role='button'
>
<MDBIcon fab className='fa-google' />
</MDBBtn>
<MDBBtn
rippleColor="dark"
color='link'
floating
size="lg"
className='text-dark m-1'
href='#!'
role='button'
>
<MDBIcon fab className='fa-instagram' />
</MDBBtn>
<MDBBtn
rippleColor="dark"
color='link'
floating
size="lg"
className='text-dark m-1'
href='#!'
role='button'
>
<MDBIcon fab className='fa-linkedin' />
</MDBBtn>
<MDBBtn
rippleColor="dark"
color='link'
floating
size="lg"
className='text-dark m-1'
href='#!'
role='button'
>
<MDBIcon fab className='fa-github' />
</MDBBtn>
</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,
MDBBtn
} 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>
<MDBBtn type='button' outline color="light" rounded>
Sign up!
</MDBBtn>
</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'>
<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)' }}>
© 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'>
<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)' }}>
© 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'>
<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)' }}>
© 2020 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 |
|---|---|---|---|---|
bgColor
|
"primary" | "secondary" | "success" | "info" | "warning" | "danger" | "light" | "dark" | '' |
Change color of footer |
<MDBFooter bgColor="primary" />
|
color
|
"primary" | "secondary" | "success" | "info" | "warning" | "danger" | "light" | "dark" | "body" | "muted" | "white" | "black-50" | "white-50" | |
Change color of text in footer |
<MDBFooter color="white" />
|
ref
|
React.Ref<any> | |
A reference to the MDBFooter component |
<MDBFooter ref={someRef} />
|
tag
|
React.ComponentProps<any> | 'footer' |
Defines tag of the MDBFooter element |
<MDBFooter tag="section" />
|