Footer
Footer
Angular Bootstrap Footer is an additional navigation for the website. It can hold links, company info, copyrights, buttons, forms. and many other elements.
You can set the color of the footer by adding one of classes from our color palette.
Just like any other components of CDBootstrap, Footers are responsive by default.
Example 1
Default Footer example.
html
<CDBFooter class="shadow"><div class="d-flex flex-column mx-auto py-5" style="width: 80%;"><div class="d-flex justify-content-between"><div><CDBLink class="d-flex align-items-center p-0 text-dark"><img alt="logo" src="../../../assets/img/pages/logo.png" width="30px" /><span class="ml-3 h5 font-weight-bold">Devwares</span></CDBLink><p class="my-3" style="width: 250px;" >We are creating High Quality Resources and tools to Aiddevelopers during the developement of their projects</p><div class="mt-4"><CDBBtn [flat]=true color="dark"><CDBIcon [fab]=true icon="facebook-f" ></CDBIcon></CDBBtn><CDBBtn [flat]=true color="dark" class="mx-3"><CDBIcon [fab]=true icon="twitter" ></CDBIcon></CDBBtn><CDBBtn [flat]=true color="dark"><CDBIcon [fab]=true icon="instagram" ></CDBIcon></CDBBtn></div></div><div><p class="h5 mb-4" style="font-weight:600">Devwares</p><ul style="list-style:none; cursor:pointer"><li class="my-2"><a class="text-dark" href="/">Resources</a></li><li class="my-2"><a class="text-dark" href="/">About Us</a></li><li class="my-2"><a class="text-dark" href="/">Contact</a></li><li class="my-2"><a class="text-dark" href="/">Blog</a></li></ul></div><div><p class="h5 mb-4" style="font-weight:600">Help</p><ul style="list-style:none; cursor:pointer"><li class="my-2"><a class="text-dark" href="/">Support</a></li><li class="my-2"><a class="text-dark" href="/">Sign Up</a></li><li class="my-2"><a class="text-dark" href="/">Sign In</a></li></ul></div><div><p class="h5 mb-4" style="font-weight:600">Help</p><ul style="list-style:none; cursor:pointer"><li class="my-2"><a class="text-dark" href="/">Support</a></li><li class="my-2"><a class="text-dark" href="/">Sign Up</a></li><li class="my-2"><a class="text-dark" href="/">Sign In</a></li></ul></div></div><small class="text-center mt-5">© Devwares, 2020. All rights reserved.</small></div></CDBFooter>
Example 2
html
<CDBFooter class="shadow"><div class="d-flex flex-column mx-auto py-5" style="width:80%"><div class="d-flex justify-content-between"><div class="align-self-center"><CDBLink class="d-flex align-items-center p-0 text-dark"><img alt="logo" src="../../../assets/img/pages/logo.png" width="30px" /><span class="ml-3 h5 font-weight-bold">Devwares</span></CDBLink><div class="mt-5"><CDBBtn [flat]=true color="dark"><CDBIcon [fab]=true icon="facebook-f"></CDBIcon></CDBBtn><CDBBtn [flat]=true color="dark" class="mx-3"><CDBIcon [fab]=true icon="twitter"></CDBIcon></CDBBtn><CDBBtn [flat]=true color="dark"><CDBIcon [fab]=true icon="instagram"></CDBIcon></CDBBtn></div></div><div><p class="h5 mb-4" style="font-weight:600">Devwares</p><ul style="list-style:none; cursor:pointer"><li class="my-2"><a class="text-dark" href="/">Resources</a></li><li class="my-2"><a class="text-dark" href="/">About Us</a></li><li class="my-2"><a class="text-dark" href="/">Contact</a></li><li class="my-2"><a class="text-dark" href="/">Blog</a></li></ul></div><div><p class="h5 mb-4" style="font-weight:600">Help</p><ul style="list-style:none; cursor:pointer"><li class="my-2"><a class="text-dark" href="/">Support</a></li><li class="my-2"><a class="text-dark" href="/">Sign Up</a></li><li class="my-2"><a class="text-dark" href="/">Sign In</a></li></ul></div><div><p class="h5 mb-4" style="font-weight:600">Help</p><ul style="list-style:none; cursor:pointer"><li class="my-2"><a class="text-dark" href="/">Support</a></li><li class="my-2"><a class="text-dark" href="/">Sign Up</a></li><li class="my-2"><a class="text-dark" href="/">Sign In</a></li></ul></div></div><small class="text-center mt-5">© Devwares, 2020. All rights reserved.</small></div></CDBFooter>
Example 3
html
<CDBFooter class="shadow"><div class="d-flex flex-column mx-auto py-5" style="width:80%"><div class="d-flex justify-content-between"><div><CDBLink class="d-flex align-items-center p-0 text-dark"><img alt="logo" src="../../../assets/img/pages/logo.png" width="30px" /><span class="ml-3 h5 font-weight-bold">Devwares</span></CDBLink><p class="my-3" style="width:250px">We are creating High Quality Resources and tools to Aiddevelopers during the developement of their projects</p></div><div><p class="h5 mb-4" style="font-weight:600">Devwares</p><ul style="list-style:none; cursor:pointer"><li class="my-2"><a class="text-dark" href="/">Resources</a></li><li class="my-2"><a class="text-dark" href="/">About Us</a></li><li class="my-2"><a class="text-dark" href="/">Contact</a></li><li class="my-2"><a class="text-dark" href="/">Blog</a></li></ul></div><div><p class="h5 mb-4" style="font-weight:600">Help</p><ul style="list-style:none; cursor:pointer"><li class="my-2"><a class="text-dark" href="/">Support</a></li><li class="my-2"><a class="text-dark" href="/">Sign Up</a></li><li class="my-2"><a class="text-dark" href="/">Sign In</a></li></ul></div><div><p class="h5 mb-4" style="font-weight:600">Help</p><ul style="list-style:none; cursor:pointer"><li class="my-2"><a class="text-dark" href="/">Support</a></li><li class="my-2"><a class="text-dark" href="/">Sign Up</a></li><li class="my-2"><a class="text-dark" href="/">Sign In</a></li></ul></div></div><div class="text-center mt-4"><div class="mb-4"><CDBBtn [flat]=true color="dark"><CDBIcon [fab]=true icon="facebook-f" ></CDBIcon></CDBBtn><CDBBtn [flat]=true color="dark" class="mx-3"><CDBIcon [fab]=true icon="twitter" ></CDBIcon></CDBBtn><CDBBtn [flat]=true color="dark"><CDBIcon [fab]=true icon="instagram" ></CDBIcon></CDBBtn></div><small>© Devwares, 2020. All rights reserved.</small></div></div></CDBFooter>
Example 4
html
<CDBFooter class="shadow"><div class="d-flex flex-column mx-auto py-5" style="width:80%"><div class="d-flex justify-content-between"><div class="align-self-center"><CDBLink class="d-flex align-items-center p-0 text-dark"><img alt="logo" src="../../../assets/img/pages/logo.png" width="30px" /><span class="ml-4 h5 font-weight-bold">Devwares</span></CDBLink></div><div><p class="h5 mb-4" style="font-weight:600">Devwares</p><ul style="list-style:none; cursor:pointer"><li class="my-2"><a class="text-dark" href="/">Resources</a></li><li class="my-2"><a class="text-dark" href="/">About Us</a></li><li class="my-2"><a class="text-dark" href="/">Contact</a></li><li class="my-2"><a class="text-dark" href="/">Blog</a></li></ul></div><div><p class="h5 mb-4" style="font-weight:600">Help</p><ul style="list-style:none; cursor:pointer"><li class="my-2"><a class="text-dark" href="/">Support</a></li><li class="my-2"><a class="text-dark" href="/">Sign Up</a></li><li class="my-2"><a class="text-dark" href="/">Sign In</a></li></ul></div><div><p class="h5 mb-4" style="font-weight:600">Help</p><ul style="list-style:none; cursor:pointer"><li class="my-2"><a class="text-dark" href="/">Support</a></li><li class="my-2"><a class="text-dark" href="/">Sign Up</a></li><li class="my-2"><a class="text-dark" href="/">Sign In</a></li></ul></div></div><div class="d-flex justify-content-between align-items-center mt-4"><small>© Devwares, 2020. All rights reserved.</small><div><CDBBtn [flat]=true color="dark"><CDBIcon [fab]=true icon="facebook-f" ></CDBIcon></CDBBtn><CDBBtn [flat]=true color="dark" class="mx-3"><CDBIcon [fab]=true icon="twitter" ></CDBIcon></CDBBtn><CDBBtn [flat]=true color="dark"><CDBIcon [fab]=true icon="instagram" ></CDBIcon></CDBBtn></div></div></div></CDBFooter>
Example 5
html
<CDBFooter class="shadow"><div class="d-flex justify-content-between align-items-center mx-auto py-4" style="width:80%"><CDBLink class="d-flex align-items-center p-0 text-dark"><img alt="logo" src="../../../assets/img/pages/logo.png" width="30px" /><span class="ml-4 h5 font-weight-bold">Devwares</span><small class="ml-2">© Devwares, 2020. All rights reserved.</small></CDBLink><div><CDBBtn [flat]=true color="dark"><CDBIcon [fab]=true icon="facebook-f" ></CDBIcon></CDBBtn><CDBBtn [flat]=true color="dark" class="mx-3"><CDBIcon [fab]=true icon="twitter" ></CDBIcon></CDBBtn><CDBBtn [flat]=true color="dark"><CDBIcon [fab]=true icon="instagram" ></CDBIcon></CDBBtn></div></div></CDBFooter>
Example 6
html
<CDBFooter class="shadow"><div class="d-flex flex-column mx-auto py-5" style="width:80%"><div class="d-flex justify-content-between"><div class="align-self-center"><CDBLink class="d-flex align-items-center p-0 text-dark"><img alt="logo" src="../../../assets/img/pages/logo.png" width="30px" /><span class="ml-4 h5 font-weight-bold">Devwares</span></CDBLink></div><div class="d-flex justify-content-between" style="width:40%"><div><p class="h5 mb-4" style="font-weight:600">Devwares</p><ul style="list-style:none; cursor:pointer"><li class="my-2"><a class="text-dark" href="/">Resources</a></li><li class="my-2"><a class="text-dark" href="/">About Us</a></li><li class="my-2"><a class="text-dark" href="/">Contact</a></li><li class="my-2"><a class="text-dark" href="/">Blog</a></li></ul></div><div><p class="h5 mb-4" style="font-weight:600">Help</p><ul style="list-style:none; cursor:pointer"><li class="my-2"><a class="text-dark" href="/">Support</a></li><li class="my-2"><a class="text-dark" href="/">Sign Up</a></li><li class="my-2"><a class="text-dark" href="/">Sign In</a></li></ul></div></div></div><div class="d-flex justify-content-between align-items-center mt-4"><small>© Devwares, 2020. All rights reserved.</small><div><CDBBtn [flat]=true color="dark"><CDBIcon [fab]=true icon="facebook-f" ></CDBIcon></CDBBtn><CDBBtn [flat]=true color="dark" class="mx-3"><CDBIcon [fab]=true icon="twitter" ></CDBIcon></CDBBtn><CDBBtn [flat]=true color="dark"><CDBIcon [fab]=true icon="instagram" ></CDBIcon></CDBBtn></div></div></div></CDBFooter>
Example 7
html
<CDBFooter class="shadow"><div class="d-flex justify-content-between align-items-center mx-auto py-4" style="width:80%"><CDBLink class="d-flex align-items-center p-0 text-dark"><img alt="logo" src="../../../assets/img/pages/logo.png" width="30px" /><span class="ml-4 h5 font-weight-bold">Devwares</span></CDBLink><small>© Devwares, 2020. All rights reserved.</small><div><CDBBtn [flat]=true color="dark"><CDBIcon [fab]=true icon="facebook-f" ></CDBIcon></CDBBtn><CDBBtn [flat]=true color="dark" class="mx-3"><CDBIcon [fab]=true icon="twitter" ></CDBIcon></CDBBtn><CDBBtn [flat]=true color="dark"><CDBIcon [fab]=true icon="instagram" ></CDBIcon></CDBBtn></div></div></CDBFooter>
API
Here in this section you will find information about required modules and available inputs, outputs, methods and events of this component.
Contrast Footer Bootstrap Modules used
import {FooterModule } from 'cdbangular';
API Reference: Contrast Footer Inputs
The table below shows the possible input of the Footer component.
| Name | Type | Default | Description | Example |
|---|---|---|---|---|
| class | String | Adds custom classes | class="myClass" | |
| color | String | Defines component's color | color="blue" |