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