Footer

Vue 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;"

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

          <template>
            <!-- Footer -->
            <MDBFooter :text="['center', 'lg-start']">
              <!-- Grid container -->
              <MDBContainer class="p-4">
                <!--Grid row-->
                <MDBRow>
                  <!--Grid column-->
                  <MDBCol lg="6" md="12" class="mb-4 mb-md-0">
                    <h5 class="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>
                  <!--Grid column-->
  
                  <!--Grid column-->
                  <MDBCol lg="3" md="6" class="mb-4 mb-md-0">
                    <h5 class="text-uppercase">Links</h5>
  
                    <ul class="list-unstyled mb-0">
                      <li>
                        <a href="#!" class="text-dark">Link 1</a>
                      </li>
                      <li>
                        <a href="#!" class="text-dark">Link 2</a>
                      </li>
                      <li>
                        <a href="#!" class="text-dark">Link 3</a>
                      </li>
                      <li>
                        <a href="#!" class="text-dark">Link 4</a>
                      </li>
                    </ul>
                  </MDBCol>
                  <!--Grid column-->
  
                  <!--Grid column-->
                  <MDBCol lg="3" md="6" class="mb-4 mb-md-0">
                    <h5 class="text-uppercase mb-0">Links</h5>
  
                    <ul class="list-unstyled">
                      <li>
                        <a href="#!" class="text-dark">Link 1</a>
                      </li>
                      <li>
                        <a href="#!" class="text-dark">Link 2</a>
                      </li>
                      <li>
                        <a href="#!" class="text-dark">Link 3</a>
                      </li>
                      <li>
                        <a href="#!" class="text-dark">Link 4</a>
                      </li>
                    </ul>
                  </MDBCol>
                  <!--Grid column-->
                </MDBRow>
                <!--Grid row-->
              </MDBContainer>
              <!-- Grid container -->
  
              <!-- Copyright -->
              <div
                class="text-center p-3"
                style="background-color: rgba(0, 0, 0, 0.2);"
              >
                © 2020 Copyright:
                <a class="text-dark" href="https://mdbootstrap.com/"
                  >MDBootstrap.com</a
                >
              </div>
              <!-- Copyright -->
            </MDBFooter>
            <!-- Footer -->
          </template>
        

          <script>
            import { MDBFooter, MDBContainer, MDBRow, MDBCol } from 'mdb-vue-ui-kit';
  
            export default {
              components: {
                MDBFooter,
                MDBContainer, 
                MDBRow, 
                MDBCol                    
              },
            };
          </script>
        

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.


            <template>
              <MDBFooter :text="['center', 'lg-start']">
                <!-- Copyright -->
                <div class="text-center p-3" style="background-color: rgba(0, 0, 0, 0.2);">
                  © 2020 Copyright:
                  <a class="text-dark" href="https://mdbootstrap.com/">MDBootstrap.com</a>
                </div>
                <!-- Copyright -->
              </MDBFooter>
            </template>
          

            <script>
              import { MDBFooter } from 'mdb-vue-ui-kit';
  
              export default {
                components: {
                  MDBFooter                   
                },
              };
            </script>
          

Text

You can set all text utilities for which classes starts with .text- simply by passing text prop with text value of the option of your choice or by passing dynamic prop :text="[]" as an array of options. 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

            <template>
              <MDBFooter :text="['center', 'lg-start']">
                <!-- Grid container -->
                <MDBContainer class="p-4">
                  <!--Grid row-->
                  <MDBRow>
                    <!--Grid column-->
                    <MDBCol lg="6" md="12" class="mb-4 mb-md-0">
                      <h5 class="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>
                    <!--Grid column-->
  
                    <!--Grid column-->
                    <MDBCol lg="6" md="12" class="mb-4 mb-md-0">
                      <h5 class="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>
                    <!--Grid column-->
                  </MDBRow>
                  <!--Grid row-->
                </MDBContainer>
                <!-- Grid container -->
  
                <!-- Copyright -->
                <div class="text-center p-3" style="background-color: rgba(0, 0, 0, 0.2);">
                  © 2020 Copyright:
                  <a class="text-dark" href="https://mdbootstrap.com/">MDBootstrap.com</a>
                </div>
                <!-- Copyright -->
              </MDBFooter>
            </template>
          

            <script>
              import { MDBFooter, MDBContainer, MDBRow, MDBCol } from 'mdb-vue-ui-kit';
  
              export default {
                components: {
                  MDBFooter, 
                  MDBContainer, 
                  MDBRow, 
                  MDBCol                    
                },
              };
            </script>
          

Forms

Sign up for our newsletter

© 2020 Copyright: MDBootstrap.com

            <template>
              <MDBFooter :text="['center', 'lg-start']">
                <!-- Grid container -->
                <MDBContainer class="p-4 pb-0">
                  <form action="">
                    <!--Grid row-->
                    <MDBRow>
                      <!--Grid column-->
                      <MDBCol auto class="mb-4 mb-md-0">
                        <p class="pt-2"><strong>Sign up for our newsletter</strong></p>
                      </MDBCol>
                      <!--Grid column-->
  
                      <!--Grid column-->
                      <MDBCol md="5" col="12" class="mb-4 mb-md-0">
                        <!-- Email input -->
                        <div class="form-outline mb-4">
                          <input type="email" id="form5Example2" class="form-control" />
                          <label class="form-label" for="form5Example2">Email address</label>
                        </div>
                      </MDBCol>
                      <!--Grid column-->
  
                      <!--Grid column-->
                      <MDBCol auto class="mb-4 mb-md-0">
                        <!-- Submit button -->
                        <MDBBtn color="primary" type="submit" class="mb-4">
                          Subscribe
                        </MDBBtn>
                      </MDBCol>
                      <!--Grid column-->
                    </MDBRow>
                    <!--Grid row-->
                  </form>
                </MDBContainer>
                <!-- Grid container -->
  
                <!-- Copyright -->
                <div class="text-center p-3" style="background-color: rgba(0, 0, 0, 0.2);">
                  © 2020 Copyright:
                  <a class="text-dark" href="https://mdbootstrap.com/">MDBootstrap.com</a>
                </div>
                <!-- Copyright -->
              </MDBFooter>
            </template>
          

            <script>
              import { MDBFooter, MDBContainer, MDBRow, MDBCol, MDBBtn } from 'mdb-vue-ui-kit';
  
              export default {
                components: {
                  MDBFooter, 
                  MDBContainer, 
                  MDBRow, 
                  MDBCol, 
                  MDBBtn                    
                },
              };
            </script>
          

Colors

As mentioned before - the background color is set via prop bg and its default value is set to 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" prop 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

          <template>
            <MDBFooter bg="primary" :text="['white', 'center', 'lg-start']" class="bg-primary text-white text-center text-lg-start">
              <!-- Grid container -->
              <MDBContainer class="p-4">
                <!--Grid row-->
                <MDBRow>
                  <!--Grid column-->
                  <MDBCol lg="6" md="12" class="mb-4 mb-md-0">
                    <h5 class="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>
                  <!--Grid column-->
  
                  <!--Grid column-->
                  <MDBCol lg="3" md="6" class="mb-4 mb-md-0">
                    <h5 class="text-uppercase">Links</h5>
  
                    <ul class="list-unstyled mb-0">
                      <li>
                        <a href="#!" class="text-white">Link 1</a>
                      </li>
                      <li>
                        <a href="#!" class="text-white">Link 2</a>
                      </li>
                      <li>
                        <a href="#!" class="text-white">Link 3</a>
                      </li>
                      <li>
                        <a href="#!" class="text-white">Link 4</a>
                      </li>
                    </ul>
                  </MDBCol>
                  <!--Grid column-->
  
                  <!--Grid column-->
                  <MDBCol lg="3" md="6" class="mb-4 mb-md-0">
                    <h5 class="text-uppercase mb-0">Links</h5>
  
                    <ul class="list-unstyled">
                      <li>
                        <a href="#!" class="text-white">Link 1</a>
                      </li>
                      <li>
                        <a href="#!" class="text-white">Link 2</a>
                      </li>
                      <li>
                        <a href="#!" class="text-white">Link 3</a>
                      </li>
                      <li>
                        <a href="#!" class="text-white">Link 4</a>
                      </li>
                    </ul>
                  </MDBCol>
                  <!--Grid column-->
                </MDBRow>
                <!--Grid row-->
              </MDBContainer>
              <!-- Grid container -->
  
              <!-- Copyright -->
              <div class="text-center p-3" style="background-color: rgba(0, 0, 0, 0.2);">
                © 2020 Copyright:
                <a class="text-white" href="https://mdbootstrap.com/">MDBootstrap.com</a>
              </div>
              <!-- Copyright -->
            </MDBFooter>
          </template>
        

          <script>
            import { MDBContainer, MDBRow, MDBCol } from 'mdb-vue-ui-kit';
  
            export default {
              components: {
                MDBContainer, 
                MDBRow, 
                MDBCol                                    
              },
            };
          </script>
        

Footer - API


Import


        <script>
          import { 
            MDBFooter 
          } from 'mdb-vue-ui-kit';
        </script>
      

Properties

Name Type Default Description Example
tag String 'footer' Defines tag of the MDBFooter element <MDBFooter tag="div" />
bg String 'light' Sets footer background color. <MDBFooter bg="primary" />
text String | Array Sets text utilities, such as color or alignment <MDBFooter text="white" /> <MDBFooter :text="['white', 'center', 'lg-start']" />