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.

Get connected with us on social networks:
Company name

Here you can use rows and columns to organize your footer content. Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Useful links

Pricing

Settings

Orders

Help

Contact

New York, NY 10012, US

info@example.com

+ 01 234 567 88

+ 01 234 567 89

© 2021 Copyright: MDBootstrap.com
        
            
            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)' }}>
                    &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,
              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)' }}>
                    &copy; {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&amp;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>
              );
            }
          
        
    

Buttons

For more advanced button options have a look at the Buttons docs.

        
            
            import React from 'react';
            import { 
              MDBFooter,
              MDBContainer,
              MDBCol,
              MDBRow,
              MDBIcon
            } from 'mdb-react-ui-kit';
    
            export default function App() {
              return (
                <MDBFooter className='bg-light text-center text-white'>
                  <div className='container p-4 pb-0'>
                    <section className='mb-4'>
                      <a
                        className='btn btn-primary btn-floating m-1'
                        style={{ backgroundColor: '#3b5998' }}
                        href='#!'
                        role='button'
                      >
                        <MDBIcon fab icon='facebook-f' />
                      </a>

                      <a
                        className='btn btn-primary btn-floating m-1'
                        style={{ backgroundColor: '#55acee' }}
                        href='#!'
                        role='button'
                      >
                        <MDBIcon fab icon='twitter' />
                      </a>

                      <a
                        className='btn btn-primary btn-floating m-1'
                        style={{ backgroundColor: '#dd4b39' }}
                        href='#!'
                        role='button'
                      >
                        <MDBIcon fab icon='google' />
                      </a>
                      <a
                        className='btn btn-primary btn-floating m-1'
                        style={{ backgroundColor: '#ac2bac' }}
                        href='#!'
                        role='button'
                      >
                        <MDBIcon fab icon='instagram' />
                      </a>

                      <a
                        className='btn btn-primary btn-floating m-1'
                        style={{ backgroundColor: '#0082ca' }}
                        href='#!'
                        role='button'
                      >
                        <MDBIcon fab icon='linkedin-in' />
                      </a>

                      <a
                        className='btn btn-primary btn-floating m-1'
                        style={{ backgroundColor: '#333333' }}
                        href='#!'
                        role='button'
                      >
                        <MDBIcon fab icon='github' />
                      </a>
                    </section>
                  </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>
              );
            }
          
        
    

Buttons dark theme

For more advanced theming options have a look at the Colors docs and Theme docs.

        
            
            import React from 'react';
            import { 
              MDBFooter,
              MDBContainer,
              MDBCol,
              MDBRow,
              MDBIcon
            } from 'mdb-react-ui-kit';
    
            export default function App() {
              return (
                <MDBFooter className='bg-dark text-center text-white'>
                  <MDBContainer className='p-4 pb-0'>
                    <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>
                  </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>
              );
            }
          
        
    

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.

Sign up for our newsletter

© 2020 Copyright: MDBootstrap.com
        
            
            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)' }}>
                    &copy; {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.

Sign up for our newsletter

© 2020 Copyright: MDBootstrap.com
        
            
            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)' }}>
                    &copy; {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.

Sign up for our newsletter

© 2020 Copyright: MDBootstrap.com
        
            
            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)' }}>
                    &copy; {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.

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

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,
              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.

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,
              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.

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,
              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 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" />