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.

Footer Content

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!

© 2020 Copyright: MDBootstrap.com

          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)' }}>
                  &copy; {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)' }}>
                    &copy; {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 .

Footer text

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!

Footer text

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!

© 2020 Copyright: MDBootstrap.com

            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)' }}>
                    &copy; {new Date().getFullYear()} Copyright:{' '}
                    <a className='text-dark' href='https://mdbootstrap.com/'>
                      MDBootstrap.com
                    </a>
                  </div>
                </MDBFooter>
              );
            }
          

Forms

Sign up for our newsletter

© 2020 Copyright: MDBootstrap.com

            import React from 'react';
            import { MDBFooter, MDBContainer, MDBRow, MDBCol, MDBBtn } 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)' }}>
                    &copy; {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.

Footer Content

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!

© 2020 Copyright: MDBootstrap.com

          import React from 'react';
          import { MDBFooter, MDBContainer, MDBRow, MDBCol } 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)' }}>
                  &copy; {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" />