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;". 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
        
            
            <template>
              <!-- Footer -->
              <MDBFooter :text="['center', 'lg-start', 'muted']">
                <!-- Section: Social media -->
                <section class="
                    d-flex
                    justify-content-center justify-content-lg-between
                    p-4
                    border-bottom
                  ">
                  <!-- Left -->
                  <div class="me-5 d-none d-lg-block">
                    <span>Get connected with us on social networks:</span>
                  </div>
                  <!-- Left -->
                  <!-- Right -->
                  <div>
                    <a href="" class="me-4 text-reset">
                      <MDBIcon iconStyle="fab" icon="facebook-f"></MDBIcon>
                    </a>
                    <a href="" class="me-4 text-reset">
                      <MDBIcon iconStyle="fab" icon="twitter"></MDBIcon>
                    </a>
                    <a href="" class="me-4 text-reset">
                      <MDBIcon iconStyle="fab" icon="google"></MDBIcon>
                    </a>
                    <a href="" class="me-4 text-reset">
                      <MDBIcon iconStyle="fab" icon="instagram"></MDBIcon>
                    </a>
                    <a href="" class="me-4 text-reset">
                      <MDBIcon iconStyle="fab" icon="linkedin"></MDBIcon>
                    </a>
                    <a href="" class="me-4 text-reset">
                      <MDBIcon iconStyle="fab" icon="github"></MDBIcon>
                    </a>
                  </div>
                  <!-- Right -->
                </section>
                <!-- Section: Social media -->
                <!-- Section: Links  -->
                <section class="">
                  <MDBContainer class="text-center text-md-start mt-5">
                    <!-- Grid row -->
                    <MDBRow class="mt-3">
                      <!-- Grid column -->
                      <MDBCol md="3" lg="4" xl="3" class="mx-auto mb-4">
                        <!-- Content -->
                        <h6 class="text-uppercase fw-bold mb-4">
                          <i class="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>
                      </MDBCol>
                      <!-- Grid column -->
                      <!-- Grid column -->
                      <MDBCol md="2" lg="2" xl="2" class="mx-auto mb-4">
                        <!-- Links -->
                        <h6 class="text-uppercase fw-bold mb-4">Products</h6>
                        <p>
                          <a href="#!" class="text-reset">Angular</a>
                        </p>
                        <p>
                          <a href="#!" class="text-reset">React</a>
                        </p>
                        <p>
                          <a href="#!" class="text-reset">Vue</a>
                        </p>
                        <p>
                          <a href="#!" class="text-reset">Laravel</a>
                        </p>
                      </MDBCol>
                      <!-- Grid column -->
                      <!-- Grid column -->
                      <MDBCol md="3" lg="2" xl="2" class="mx-auto mb-4">
                        <!-- Links -->
                        <h6 class="text-uppercase fw-bold mb-4">Useful links</h6>
                        <p>
                          <a href="#!" class="text-reset">Pricing</a>
                        </p>
                        <p>
                          <a href="#!" class="text-reset">Settings</a>
                        </p>
                        <p>
                          <a href="#!" class="text-reset">Orders</a>
                        </p>
                        <p>
                          <a href="#!" class="text-reset">Help</a>
                        </p>
                      </MDBCol>
                      <!-- Grid column -->
                      <!-- Grid column -->
                      <MDBCol md="4" lg="3" xl="3" class="mx-auto mb-md-0 mb-4">
                        <!-- Links -->
                        <h6 class="text-uppercase fw-bold mb-4">Contact</h6>
                        <p>
                          <i class="fas fa-home me-3"></i> New York, NY 10012, US
                        </p>
                        <p>
                          <i class="fas fa-envelope me-3"></i>
                          info@example.com
                        </p>
                        <p>
                          <MDBIcon icon="phone" class="me-3" /> + 01 234 567 88
                        </p>
                        <p>
                          <MDBIcon icon="print" class="me-3" /> + 01 234 567 89
                        </p>
                      </MDBCol>
                      <!-- Grid column -->
                    </MDBRow>
                    <!-- Grid row -->
                  </MDBContainer>
                </section>
                <!-- Section: Links  -->
                <!-- Copyright -->
                <div class="text-center p-4" style="background-color: rgba(0, 0, 0, 0.05)">
                  © 2021 Copyright:
                  <a class="text-reset fw-bold" href="https://mdbootstrap.com/">MDBootstrap.com</a>
                </div>
                <!-- Copyright -->
              </MDBFooter>
              <!-- Footer -->
            </template>
          
        
    
        
            
            <script>
              import {
                MDBFooter,
                MDBContainer,
                MDBRow,
                MDBCol,
                MDBIcon
              } from 'mdb-vue-ui-kit';
              export default {
                components: {
                  MDBFooter,
                  MDBContainer,
                  MDBRow,
                  MDBCol,
                  MDBIcon
                },
              };
            </script>
          
        
    

Advanced example

An advanced example of Bootstrap Footer.

We applied a dark background by using bg="dark" property. With such settings, it's necessary to use text="white" for typography and links, outline="light" for buttons, and .form-white for the form.

        
            
            <template>
              <!-- Footer -->
              <MDBFooter bg="dark" :text="['center', 'white']">
                <!-- Grid container -->
                <MDBContainer class="p-4">
                  <!-- Section: Social media -->
                  <section class="mb-4">
                    <!-- Facebook -->
                    <a
                      class="btn btn-outline-light btn-floating m-1"
                      href="#!"
                      role="button"
                      ><MDBIcon iconStyle="fab" icon="facebook-f"
                    /></a>
                    <!-- Twitter -->
                    <a
                      class="btn btn-outline-light btn-floating m-1"
                      href="#!"
                      role="button"
                      ><MDBIcon iconStyle="fab" icon="twitter"
                    /></a>
                    <!-- Google -->
                    <a
                      class="btn btn-outline-light btn-floating m-1"
                      href="#!"
                      role="button"
                      ><MDBIcon iconStyle="fab" icon="google"
                    /></a>
                    <!-- Instagram -->
                    <a
                      class="btn btn-outline-light btn-floating m-1"
                      href="#!"
                      role="button"
                      ><MDBIcon iconStyle="fab" icon="instagram"
                    /></a>
                    <!-- Linkedin -->
                    <a
                      class="btn btn-outline-light btn-floating m-1"
                      href="#!"
                      role="button"
                      ><MDBIcon iconStyle="fab" icon="linkedin-in"
                    /></a>
                    <!-- Github -->
                    <a
                      class="btn btn-outline-light btn-floating m-1"
                      href="#!"
                      role="button"
                      ><MDBIcon iconStyle="fab" icon="github"></MDBIcon
                    ></a>
                  </section>
                  <!-- Section: Social media -->
                  <!-- Section: Form -->
                  <section class="">
                    <form action="">
                      <!--Grid row-->
                      <MDBRow center class="d-flex">
                        <!--Grid column-->
                        <MDBCol auto>
                          <p class="pt-2">
                            <strong>Sign up for our newsletter</strong>
                          </p>
                        </MDBCol>
                        <!--Grid column-->
                        <!--Grid column-->
                        <MDBCol md="5" col="12">
                          <!-- Email input -->
                          <MDBInput
                            white
                            type="email"
                            id="form5Example2"
                            label="Email address"
                            wrapperClass="mb-4"
                          />
                        </MDBCol>
                        <!--Grid column-->
                        <!--Grid column-->
                        <MDBCol auto>
                          <!-- Submit button -->
                          <MDBBtn outline="light" class="mb-4"> Subscribe </MDBBtn>
                        </MDBCol>
                        <!--Grid column-->
                      </MDBRow>
                      <!--Grid row-->
                    </form>
                  </section>
                  <!-- Section: Form -->
                  <!-- Section: Text -->
                  <section class="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: Text -->
                  <!-- Section: Links -->
                  <section class="">
                    <!--Grid row-->
                    <MDBRow>
                      <!--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">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">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">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-->
                    </MDBRow>
                    <!--Grid row-->
                  </section>
                  <!-- Section: Links -->
                </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>
              <!-- Footer -->
            </template>
          
        
    
        
            
            <script>
              import { MDBFooter, MDBContainer, MDBRow, MDBCol, MDBIcon, MDBBtn } from 'mdb-vue-ui-kit';
              export default {
                components: {
                  MDBFooter,
                  MDBContainer,
                  MDBRow,
                  MDBCol,
                  MDBIcon,
                  MDBBtn
                },
              };
            </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

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>
            
        
    

Images

For more advanced images options have a look at the Images docs .

        
            
              <template>
                <MDBFooter
                  :text="['center', 'lg-start']"
                  style="background-color: #caced1"
                >
                  <!-- Grid container -->
                  <MDBContainer class="p-4">
                    <!-- Section: Images -->
                    <section class="">
                      <MDBRow>
                        <MDBCol lg="2" md="12" class="mb-4 mb-md-0">
                          <div
                            v-mdb-ripple="{ color: 'light' }"
                            class="bg-image hover-overlay s shadow-1-strong rounded"
                          >
                            <img
                              src="https://mdbootstrap.com/img/new/fluid/city/113.webp"
                              class="w-100"
                            />
                            <a href="#!">
                              <div
                                class="mask"
                                style="background-color: rgba(251, 251, 251, 0.2)"
                              ></div>
                            </a>
                          </div>
                        </MDBCol>
                        <MDBCol lg="2" md="12" class="mb-4 mb-md-0">
                          <div
                            v-mdb-ripple="{ color: 'light' }"
                            class="bg-image hover-overlay s shadow-1-strong rounded"
                          >
                            <img
                              src="https://mdbootstrap.com/img/new/fluid/city/111.webp"
                              class="w-100"
                            />
                            <a href="#!">
                              <div
                                class="mask"
                                style="background-color: rgba(251, 251, 251, 0.2)"
                              ></div>
                            </a>
                          </div>
                        </MDBCol>
                        <MDBCol lg="2" md="12" class="mb-4 mb-md-0">
                          <div
                            v-mdb-ripple="{ color: 'light' }"
                            class="bg-image hover-overlay s shadow-1-strong rounded"
                          >
                            <img
                              src="https://mdbootstrap.com/img/new/fluid/city/112.webp"
                              class="w-100"
                            />
                            <a href="#!">
                              <div
                                class="mask"
                                style="background-color: rgba(251, 251, 251, 0.2)"
                              ></div>
                            </a>
                          </div>
                        </MDBCol>
                        <MDBCol lg="2" md="12" class="mb-4 mb-md-0">
                          <div
                            v-mdb-ripple="{ color: 'light' }"
                            class="bg-image hover-overlay s shadow-1-strong rounded"
                          >
                            <img
                              src="https://mdbootstrap.com/img/new/fluid/city/114.webp"
                              class="w-100"
                            />
                            <a href="#!">
                              <div
                                class="mask"
                                style="background-color: rgba(251, 251, 251, 0.2)"
                              ></div>
                            </a>
                          </div>
                        </MDBCol>
                        <MDBCol lg="2" md="12" class="mb-4 mb-md-0">
                          <div
                            v-mdb-ripple="{ color: 'light' }"
                            class="bg-image hover-overlay s shadow-1-strong rounded"
                          >
                            <img
                              src="https://mdbootstrap.com/img/new/fluid/city/115.webp"
                              class="w-100"
                            />
                            <a href="#!">
                              <div
                                class="mask"
                                style="background-color: rgba(251, 251, 251, 0.2)"
                              ></div>
                            </a>
                          </div>
                        </MDBCol>
                        <MDBCol lg="2" md="12" class="mb-4 mb-md-0">
                          <div
                            v-mdb-ripple="{ color: 'light' }"
                            class="bg-image hover-overlay s shadow-1-strong rounded"
                          >
                            <img
                              src="https://mdbootstrap.com/img/new/fluid/city/116.webp"
                              class="w-100"
                            />
                            <a href="#!">
                              <div
                                class="mask"
                                style="background-color: rgba(251, 251, 251, 0.2)"
                              ></div>
                            </a>
                          </div>
                        </MDBCol>
                      </MDBRow>
                    </section>
                    <!-- Section: Images -->
                  </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 { MDBFooter, MDBContainer, MDBRow, MDBCol, mdbRipple } from 'mdb-vue-ui-kit';
                export default {
                  components: {
                    MDBFooter,
                    MDBContainer,
                    MDBRow,
                    MDBCol
                  },
                  directives: {
                    mdbRipple
                  }
                };
              </script>
            
        
    

Iframe (embeds)

For more advanced iframe options have a look at the Ratio docs .

        
            
              <template>
                <MDBFooter
                  :text="['center', 'lg-start']"
                  style="background-color: #45637d"
                >
                  <!-- Grid container -->
                  <MDBContainer class="p-4">
                    <!-- Section: Iframe -->
                    <section class="">
                      <MDBRow center class="d-flex">
                        <MDBCol lg="6">
                          <div class="ratio ratio-16x9">
                            <iframe
                              class="shadow-1-strong rounded"
                              src="https://www.youtube.com/embed/vlDzYIIOYmM"
                              title="YouTube video"
                              allowfullscreen
                            ></iframe>
                          </div>
                        </MDBCol>
                      </MDBRow>
                    </section>
                    <!-- Section: Iframe -->
                  </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 { MDBFooter, MDBContainer, MDBRow, MDBCol } from 'mdb-vue-ui-kit';
                export default {
                  components: {
                    MDBFooter,
                    MDBContainer,
                    MDBRow,
                    MDBCol
                  },
                };
              </script>
            
        
    

Icons

For more advanced icon options have a look at the Icons docs and Buttons docs.

        
            
              <template>
                <MDBFooter text="center" style="background-color: #f1f1f1">
                    <!-- Grid container -->
                    <MDBContainer class="pt-4">
                      <!-- Section: Social media -->
                      <section class="mb-4">
                        <!-- Facebook -->
                        <a
                          class="btn btn-link btn-floating btn-lg text-dark m-1"
                          href="#!"
                          role="button"
                          v-mdb-ripple="{ color: 'dark' }"
                          ><MDBIcon iconStyle="fab" icon="facebook-f"></MDBIcon
                        ></a>
                        <!-- Twitter -->
                        <a
                          class="btn btn-link btn-floating btn-lg text-dark m-1"
                          href="#!"
                          role="button"
                          v-mdb-ripple="{ color: 'dark' }"
                          ><MDBIcon iconStyle="fab" icon="twitter"></MDBIcon
                        ></a>
                        <!-- Google -->
                        <a
                          class="btn btn-link btn-floating btn-lg text-dark m-1"
                          href="#!"
                          role="button"
                          v-mdb-ripple="{ color: 'dark' }"
                          ><MDBIcon iconStyle="fab" icon="google"></MDBIcon
                        ></a>
                        <!-- Instagram -->
                        <a
                          class="btn btn-link btn-floating btn-lg text-dark m-1"
                          href="#!"
                          role="button"
                          v-mdb-ripple="{ color: 'dark' }"
                          ><MDBIcon iconStyle="fab" icon="instagram"></MDBIcon
                        ></a>
                        <!-- Linkedin -->
                        <a
                          class="btn btn-link btn-floating btn-lg text-dark m-1"
                          href="#!"
                          role="button"
                          v-mdb-ripple="{ color: 'dark' }"
                          ><MDBIcon iconStyle="fab" icon="linkedin"></MDBIcon
                        ></a>
                        <!-- Github -->
                        <a
                          class="btn btn-link btn-floating btn-lg text-dark m-1"
                          href="#!"
                          role="button"
                          v-mdb-ripple="{ color: 'dark' }"
                          ><MDBIcon iconStyle="fab" icon="github"></MDBIcon
                        ></a>
                      </section>
                      <!-- Section: Social media -->
                    </MDBContainer>
                    <!-- Grid container -->
                    <!-- Copyright -->
                    <div
                      class="text-center text-dark 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, MDBIcon, mdbRipple } from 'mdb-vue-ui-kit';
                export default {
                  components: {
                    MDBFooter,
                    MDBContainer,
                    MDBRow,
                    MDBCol,
                    MDBIcon
                  },
                  directives: {
                    mdbRipple
                  }
                };
              </script>
            
        
    

Buttons

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

        
            
              <template>
                <MDBFooter :text="['center', 'white']">
                  <!-- Grid container -->
                  <MDBContainer class="p-4 pb-0">
                    <!-- Section: Social media -->
                    <section class="mb-4">
                      <!-- Facebook -->
                      <MDBBtn
                        tag="a"
                        color="primary"
                        href="#!"
                        floating
                        style="background-color: #3b5998"
                        class="m-1"
                      >
                        <MDBIcon iconStyle="fab" icon="facebook-f"></MDBIcon>
                      </MDBBtn>
                      <!-- Twitter -->
                      <MDBBtn
                        tag="a"
                        color="primary"
                        href="#!"
                        floating
                        style="background-color: #55acee"
                        class="m-1"
                      >
                        <MDBIcon iconStyle="fab" icon="twitter"></MDBIcon>
                      </MDBBtn>
                      <!-- Google -->
                      <MDBBtn
                        tag="a"
                        color="primary"
                        href="#!"
                        floating
                        style="background-color: #dd4b39"
                        class="m-1"
                      >
                        <MDBIcon iconStyle="fab" icon="google"></MDBIcon>
                      </MDBBtn>
                      <!-- Instagram -->
                      <MDBBtn
                        tag="a"
                        color="primary"
                        href="#!"
                        floating
                        style="background-color: #ac2bac"
                        class="m-1"
                      >
                        <MDBIcon iconStyle="fab" icon="instagram"></MDBIcon>
                      </MDBBtn>
                      <!-- Linkedin -->
                      <MDBBtn
                        tag="a"
                        color="primary"
                        href="#!"
                        floating
                        style="background-color: #0082ca"
                        class="m-1"
                      >
                        <MDBIcon iconStyle="fab" icon="linkedin-in"></MDBIcon>
                      </MDBBtn>
                      <!-- Github -->
                      <MDBBtn
                        tag="a"
                        color="primary"
                        href="#!"
                        floating
                        style="background-color: #333333"
                        class="m-1"
                      >
                        <MDBIcon iconStyle="fab" icon="github"></MDBIcon>
                      </MDBBtn>
                    </section>
                    <!-- Section: Social media -->
                  </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 { MDBFooter, MDBContainer, MDBRow, MDBCol, MDBBtn } from 'mdb-vue-ui-kit';
                export default {
                  components: {
                    MDBFooter,
                    MDBContainer,
                    MDBRow,
                    MDBCol,
                    MDBBtn
                  },
                };
              </script>
            
        
    

Buttons dark theme

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

        
            
              <template>
                <MDBFooter bg="dark" :text="['center', 'white']">
                  <!-- Grid container -->
                  <MDBContainer class="p-4 pb-0">
                    <!-- Section: Social media -->
                    <section class="mb-4">
                      <!-- Facebook -->
                      <MDBBtn
                        tag="a"
                        outline="light"
                        href="#!"
                        floating
                        class="m-1"
                      >
                        <MDBIcon iconStyle="fab" icon="facebook-f"></MDBIcon>
                      </MDBBtn>
                      <!-- Twitter -->
                      <MDBBtn
                        tag="a"
                        outline="light"
                        href="#!"
                        floating
                        class="m-1"
                      >
                        <MDBIcon iconStyle="fab" icon="twitter"></MDBIcon>
                      </MDBBtn>
                      <!-- Google -->
                      <MDBBtn
                        tag="a"
                        outline="light"
                        href="#!"
                        floating
                        class="m-1"
                      >
                        <MDBIcon iconStyle="fab" icon="google"></MDBIcon>
                      </MDBBtn>
                      <!-- Instagram -->
                      <MDBBtn
                        tag="a"
                        outline="light"
                        href="#!"
                        floating
                        class="m-1"
                      >
                        <MDBIcon iconStyle="fab" icon="instagram"></MDBIcon>
                      </MDBBtn>
                      <!-- Linkedin -->
                      <MDBBtn
                        tag="a"
                        outline="light"
                        href="#!"
                        floating
                        class="m-1"
                      >
                        <MDBIcon iconStyle="fab" icon="linkedin-in"></MDBIcon>
                      </MDBBtn>
                      <!-- Github -->
                      <MDBBtn
                        tag="a"
                        outline="light"
                        href="#!"
                        floating
                        class="m-1"
                      >
                        <MDBIcon iconStyle="fab" icon="github"></MDBIcon>
                      </MDBBtn>
                    </section>
                    <!-- Section: Social media -->
                  </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 { MDBFooter, MDBContainer, MDBRow, MDBCol, MDBBtn, MDBIcon } from 'mdb-vue-ui-kit';
                export default {
                  components: {
                    MDBFooter,
                    MDBContainer,
                    MDBRow,
                    MDBCol,
                    MDBBtn,
                    MDBIcon
                  },
                };
              </script>
            
        
    

Call to action

An example of Call to Action scheme within the Footer.

        
            
              <template>
                <!-- Footer -->
                <MDBFooter
                  bg="none"
                  :text="['center', 'white']"
                  style="background-color: #0a4275"
                >
                  <!-- Grid container -->
                  <MDBContainer class="p-4 pb-0">
                    <!-- Section: CTA -->
                    <section class="">
                      <p class="d-flex justify-content-center align-items-center">
                        <span class="me-3">Register for free</span>
                        <MDBBtn outline="light" rounded> Sign up! </MDBBtn>
                      </p>
                    </section>
                    <!-- Section: CTA -->
                  </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>
                <!-- Footer -->
              </template>
            
        
    
        
            
              <script>
                import { MDBFooter, MDBContainer, MDBBtn } from 'mdb-vue-ui-kit';
                export default {
                  components: {
                    MDBFooter,
                    MDBContainer,
                    MDBBtn
                  },
                };
              </script>
            
        
    

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
        
            
              <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 -->
                          <MDBInput
                            wrapperClass="mb-4"
                            type="email"
                            label="Email address"
                          />
                        </MDBCol>
                        <!--Grid column-->
                        <!--Grid column-->
                        <MDBCol auto class="mb-4 mb-md-0">
                          <!-- Submit button -->
                          <MDBBtn color="primary" 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 } from 'mdb-vue-ui-kit';
                export default {
                  components: {
                    MDBFooter,
                    MDBContainer,
                    MDBRow,
                    MDBCol
                  },
                };
              </script>
            
        
    

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
        
            
              <template>
                <MDBFooter class="bg-light text-center">
                  <!-- Grid container -->
                  <MDBContainer class="p-4 pb-0">
                    <!-- Section: Form -->
                    <section class="">
                      <form action="">
                        <!--Grid row-->
                        <MDBRow center class="d-flex">
                          <!--Grid column-->
                          <MDBCol auto>
                            <p class="pt-2">
                              <strong>Sign up for our newsletter</strong>
                            </p>
                          </MDBCol>
                          <!--Grid column-->
                          <!--Grid column-->
                          <MDBCol md="5" col="12">
                            <!-- Email input -->
                            <MDBInput wrapperClass="mb-4" type="email" label="Email address" />
                          </MDBCol>
                          <!--Grid column-->
                          <!--Grid column-->
                          <MDBCol auto>
                            <!-- Submit button -->
                            <MDBBtn color="primary" class="mb-4">
                              Subscribe
                            </MDBBtn>
                          </MDBCol>
                          <!--Grid column-->
                        </MDBRow>
                        <!--Grid row-->
                      </form>
                    </section>
                    <!-- Section: 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, MDBInput } from 'mdb-vue-ui-kit';
                export default {
                  components: {
                    MDBFooter,
                    MDBContainer,
                    MDBRow,
                    MDBCol,
                    MDBBtn,
                    MDBInput
                  },
                };
              </script>
            
        
    

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
        
            
              <template>
                <MDBFooter bg="dark" :text="['center', 'white']">
                  <!-- Grid container -->
                  <MDBContainer class="p-4 pb-0">
                    <!-- Section: Form -->
                    <section class="">
                      <form action="">
                        <!--Grid row-->
                        <MDBRow center class="d-flex">
                          <!--Grid column-->
                          <MDBCol auto>
                            <p class="pt-2">
                              <strong>Sign up for our newsletter</strong>
                            </p>
                          </MDBCol>
                          <!--Grid column-->
          
                          <!--Grid column-->
                          <MDBCol md="5" col="12">
                            <!-- Email input -->
                            <MDBInput white wrapperClass="mb-4" type="email" label="Email address" />
                          </MDBCol>
                          <!--Grid column-->
          
                          <!--Grid column-->
                          <MDBCol auto>
                            <!-- Submit button -->
                            <MDBBtn outline="light" class="mb-4">
                              Subscribe
                            </MDBBtn>
                          </MDBCol>
                          <!--Grid column-->
                        </MDBRow>
                        <!--Grid row-->
                      </form>
                    </section>
                    <!-- Section: 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-white" href="https://mdbootstrap.com/">MDBootstrap.com</a>
                  </div>
                  <!-- Copyright -->
                </MDBFooter>
              </template>
            
        
    
        
            
              <script>
                import { MDBFooter, MDBContainer, MDBRow, MDBCol, MDBBtn, MDBInput } from 'mdb-vue-ui-kit';
                export default {
                  components: {
                    MDBFooter,
                    MDBContainer,
                    MDBRow,
                    MDBCol,
                    MDBBtn,
                    MDBInput
                  },
                };
              </script>
            
        
    

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
        
            
            <template>
              <MDBFooter bg="primary" :text="['center', 'white', '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 { MDBFooter, MDBContainer, MDBRow, MDBCol } from 'mdb-vue-ui-kit';
              export default {
                components: {
                  MDBFooter,
                  MDBContainer,
                  MDBRow,
                  MDBCol
                },
              };
            </script>
          
        
    

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
        
            
              <template>
                <!-- Footer -->
                <MDBFooter bg="secondary" text="white">
                  <!-- 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>
                <!-- Footer -->
              </template>
            
        
    
        
            
              <script>
                import { MDBFooter, MDBContainer, MDBRow, MDBCol } from 'mdb-vue-ui-kit';
                export default {
                  components: {
                    MDBFooter,
                    MDBContainer,
                    MDBRow,
                    MDBCol
                  },
                };
              </script>
            
        
    

Always centered

Add text="center" property 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
        
            
            <template>
              <!-- Footer -->
              <MDBFooter bg="secondary" :text="['white', 'center']">
                <!-- 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>
              <!-- Footer -->
            </template>
          
        
    
        
            
            <script>
              import { MDBFooter, MDBContainer, MDBRow, MDBCol } from 'mdb-vue-ui-kit';
              export default {
                components: {
                  MDBFooter,
                  MDBContainer,
                  MDBRow,
                  MDBCol
                },
              };
            </script>
          
        
    

Centered on small

To center elements of the Footer only on small screens add :text="['center', 'md-start']" property 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
        
            
              <template>
                <!-- Footer -->
                <MDBFooter bg="secondary" :text="['center', 'md-start', 'white']">
                  <!-- 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>
                <!-- Footer -->
              </template>
            
        
    
        
            
              <script>
                import { MDBFooter, MDBContainer, MDBRow, MDBCol } from 'mdb-vue-ui-kit';
                export default {
                  components: {
                    MDBFooter,
                    MDBContainer,
                    MDBRow,
                    MDBCol
                  },
                };
              </script>
            
        
    


If you want to support our friends from Tailwind Elements you can also check out the Tailwind footer documentation.

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']" />