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.
<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>
Links
You can adjust the number of the columns by using grid system.
<template>
<MDBFooter :text="['center', 'lg-start']">
<!-- Grid container -->
<MDBContainer class="p-4">
<!--Grid row-->
<MDBRow class="row">
<!--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-->
<!--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>
</template>
<script>
import { MDBFooter, MDBContainer, MDBRow, MDBCol } from 'mdb-vue-ui-kit';
export default {
components: {
MDBFooter,
MDBContainer,
MDBRow,
MDBCol
},
};
</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 .
<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
<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.
<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']" />
|