Footer

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.

import React from "react";
import { CDBFooter, CDBFooterLink, CDBBtn, CDBIcon, CDBContainer } from "cdbreact";
export const Footer = () => {
  return (
    <CDBContainer>
        <CDBFooter className="shadow">
            <div className="d-flex flex-column mx-auto py-5" style={{width:"80%"}}>
                <div className="d-flex justify-content-between flex-wrap">
                    <div>
                        <CDBFooterLink href="/" className="d-flex align-items-center p-0 text-dark">
                            <img alt="logo" src="/img/logo.png" width="30px"/>
                            <span className="ml-3 h5 font-weight-bold">Devwares</span>
                        </CDBFooterLink>
                        <p className="my-3" style={{width:"250px"}}>We are creating High Quality Resources and tools to Aid developers during the developement of their projects</p>
                        <div className="mt-4">
                          <CDBBtn size="sm" flat color="dark">
                            <CDBIcon fab icon="facebook-f"/>
                          </CDBBtn>
                          <CDBBtn size="sm" flat color="dark" className="mx-3">
                            <CDBIcon fab icon="twitter"/>
                          </CDBBtn>
                          <CDBBtn size="sm" flat color="dark">
                            <CDBIcon fab icon="instagram"/>
                          </CDBBtn>
                        </div>
                    </div>
                    <div>
                        <p className="h5 mb-4" style={{fontWeight:"600"}}>Devwares</p>
                        <ul style={{listStyle:"none", cursor:"pointer", padding:"0"}}>
                            <CDBFooterLink href="/">Resources</CDBFooterLink>
                            <CDBFooterLink href="/">About Us</CDBFooterLink>
                            <CDBFooterLink href="/">Contact</CDBFooterLink>
                            <CDBFooterLink href="/">Blog</CDBFooterLink>
                        </ul>
                    </div>
                    <div>
                        <p className="h5 mb-4" style={{fontWeight:"600"}}>Help</p>
                        <ul style={{listStyle:"none", cursor:"pointer", padding:"0"}}>
                            <CDBFooterLink href="/">Support</CDBFooterLink>
                            <CDBFooterLink href="/">Sign Up</CDBFooterLink>
                            <CDBFooterLink href="/">Sign In</CDBFooterLink>
                        </ul>
                    </div>
                    <div>
                        <p className="h5 mb-4" style={{fontWeight:"600"}}>Help</p>
                        <ul style={{listStyle:"none", cursor:"pointer", padding:"0"}}>
                            <CDBFooterLink href="/">Support</CDBFooterLink>
                            <CDBFooterLink href="/">Sign Up</CDBFooterLink>
                            <CDBFooterLink href="/">Sign In</CDBFooterLink>
                        </ul>
                    </div>
                </div>
                <small className="text-center mt-5">&copy; Devwares, 2020. All rights reserved.</small>
            </div>
        </CDBFooter>
    </CDBContainer>
  );
};

Example 2

import React from "react";
import { CDBFooter, CDBFooterLink, CDBBtn, CDBIcon, CDBContainer } from "cdbreact";
export const Footer = () => {
  return (
    <CDBContainer>
        <CDBFooter className="shadow">
            <div className="d-flex flex-column mx-auto py-5" style={{width:"80%"}}>
                <div className="d-flex justify-content-between flex-wrap">
                    <div className="align-self-center">
                        <CDBFooterLink href="/" className="d-flex align-items-center p-0 text-dark">
                            <img alt="logo" src="/img/logo.png" width="30px"/>
                            <span className="ml-3 h5 font-weight-bold">Devwares</span>
                        </CDBFooterLink>
                        <div className="mt-5">
                          <CDBBtn size="sm" flat color="dark" >
                            <CDBIcon fab icon="facebook-f"/>
                          </CDBBtn>
                          <CDBBtn size="sm" flat color="dark" className="mx-3">
                            <CDBIcon fab icon="twitter"/>
                          </CDBBtn>
                          <CDBBtn size="sm" flat color="dark">
                            <CDBIcon fab icon="instagram"/>
                          </CDBBtn>
                        </div>
                    </div>
                    <div>
                        <p className="h5 mb-4" style={{fontWeight:"600"}}>Devwares</p>
                        <ul style={{listStyle:"none", cursor:"pointer", padding:"0"}}>
                            <CDBFooterLink href="/">Resources</CDBFooterLink>
                            <CDBFooterLink href="/">About Us</CDBFooterLink>
                            <CDBFooterLink href="/">Contact</CDBFooterLink>
                            <CDBFooterLink href="/">Blog</CDBFooterLink>
                        </ul>
                    </div>
                    <div>
                        <p className="h5 mb-4" style={{fontWeight:"600"}}>Help</p>
                        <ul style={{listStyle:"none", cursor:"pointer", padding:"0"}}>
                            <CDBFooterLink href="/">Support</CDBFooterLink>
                            <CDBFooterLink href="/">Sign Up</CDBFooterLink>
                            <CDBFooterLink href="/">Sign In</CDBFooterLink>
                        </ul>
                    </div>
                    <div>
                        <p className="h5 mb-4" style={{fontWeight:"600"}}>Help</p>
                        <ul style={{listStyle:"none", cursor:"pointer", padding:"0"}}>
                            <CDBFooterLink href="/">Support</CDBFooterLink>
                            <CDBFooterLink href="/">Sign Up</CDBFooterLink>
                            <CDBFooterLink href="/">Sign In</CDBFooterLink>
                        </ul>
                    </div>
                </div>
                <small className="text-center mt-5">&copy; Devwares, 2020. All rights reserved.</small>
            </div>
        </CDBFooter>
    </CDBContainer>
  );
};

Example 3

import React from "react";
import { CDBFooter, CDBFooterLink, CDBBtn, CDBIcon, CDBContainer } from "cdbreact";
export const Footer = () => {
  return (
    <CDBContainer>
        <CDBFooter className="shadow">
            <div className="d-flex flex-column mx-auto py-5" style={{width:"80%"}}>
                <div className="d-flex justify-content-between flex-wrap">
                    <div>
                        <CDBFooterLink href="/" className="d-flex align-items-center p-0 text-dark">
                            <img alt="logo" src="/img/logo.png" width="30px"/>
                            <span className="ml-3 h5 font-weight-bold">Devwares</span>
                        </CDBFooterLink>
                        <p className="my-3" style={{width:"250px"}}>We are creating High Quality Resources and tools to Aid developers during the developement of their projects</p>
                    </div>
                    <div>
                        <p className="h5 mb-4" style={{fontWeight:"600"}}>Devwares</p>
                        <ul style={{listStyle:"none", cursor:"pointer", padding:"0"}}>
                            <CDBFooterLink href="/">Resources</CDBFooterLink>
                            <CDBFooterLink href="/">About Us</CDBFooterLink>
                            <CDBFooterLink href="/">Contact</CDBFooterLink>
                            <CDBFooterLink href="/">Blog</CDBFooterLink>
                        </ul>
                    </div>
                    <div>
                        <p className="h5 mb-4" style={{fontWeight:"600"}}>Help</p>
                        <ul style={{listStyle:"none", cursor:"pointer", padding:"0"}}>
                            <CDBFooterLink href="/">Support</CDBFooterLink>
                            <CDBFooterLink href="/">Sign Up</CDBFooterLink>
                            <CDBFooterLink href="/">Sign In</CDBFooterLink>
                        </ul>
                    </div>
                    <div>
                        <p className="h5 mb-4" style={{fontWeight:"600"}}>Help</p>
                        <ul style={{listStyle:"none", cursor:"pointer", padding:"0"}}>
                            <CDBFooterLink href="/">Support</CDBFooterLink>
                            <CDBFooterLink href="/">Sign Up</CDBFooterLink>
                            <CDBFooterLink href="/">Sign In</CDBFooterLink>
                        </ul>
                    </div>
                </div>
                <div className="text-center mt-4">
                    <div className="mb-4">
                      <CDBBtn size="sm" flat color="dark" >
                        <CDBIcon fab icon="facebook-f"/>
                      </CDBBtn>
                      <CDBBtn size="sm" flat color="dark" className="mx-3">
                        <CDBIcon fab icon="twitter"/>
                      </CDBBtn>
                      <CDBBtn size="sm" flat color="dark">
                        <CDBIcon fab icon="instagram"/>
                      </CDBBtn>
                    </div>
                    <small>&copy; Devwares, 2020. All rights reserved.</small>
                </div>
            </div>
        </CDBFooter>
   </CDBContainer>
  );
};

Example 4

import React from "react";
import { CDBFooter, CDBFooterLink, CDBBtn, CDBIcon, CDBContainer } from "cdbreact";
export const Footer = () => {
  return (
    <CDBContainer>
        <CDBFooter className="shadow">
            <div className="d-flex flex-column mx-auto py-5" style={{width:"80%"}}>
                <div className="d-flex justify-content-between flex-wrap">
                    <div className="align-self-center">
                        <CDBFooterLink href="/" className="d-flex align-items-center p-0 text-dark">
                            <img alt="logo" src="/img/logo.png" width="30px"/>
                            <span className="ml-4 h5 font-weight-bold">Devwares</span>
                        </CDBFooterLink>
                    </div>
                    <div>
                        <p className="h5 mb-4" style={{fontWeight:"600"}}>Devwares</p>
                        <ul style={{listStyle:"none", cursor:"pointer", padding:"0"}}>
                            <CDBFooterLink href="/">Resources</CDBFooterLink>
                            <CDBFooterLink href="/">About Us</CDBFooterLink>
                            <CDBFooterLink href="/">Contact</CDBFooterLink>
                            <CDBFooterLink href="/">Blog</CDBFooterLink>
                        </ul>
                    </div>
                    <div>
                        <p className="h5 mb-4" style={{fontWeight:"600"}}>Help</p>
                        <ul style={{listStyle:"none", cursor:"pointer", padding:"0"}}>
                            <CDBFooterLink href="/">Support</CDBFooterLink>
                            <CDBFooterLink href="/">Sign Up</CDBFooterLink>
                            <CDBFooterLink href="/">Sign In</CDBFooterLink>
                        </ul>
                    </div>
                    <div>
                        <p className="h5 mb-4" style={{fontWeight:"600"}}>Help</p>
                        <ul style={{listStyle:"none", cursor:"pointer", padding:"0"}}>
                            <CDBFooterLink href="/">Support</CDBFooterLink>
                            <CDBFooterLink href="/">Sign Up</CDBFooterLink>
                            <CDBFooterLink href="/">Sign In</CDBFooterLink>
                        </ul>
                    </div>
                </div>
                <div className="d-flex justify-content-between align-items-center mt-4">
                    <small>&copy; Devwares, 2020. All rights reserved.</small>
                    <div>
                      <CDBBtn size="sm" flat color="dark" >
                        <CDBIcon fab icon="facebook-f"/>
                      </CDBBtn>
                      <CDBBtn size="sm" flat color="dark" className="mx-3">
                        <CDBIcon fab icon="twitter"/>
                      </CDBBtn>
                      <CDBBtn size="sm" flat color="dark">
                        <CDBIcon fab icon="instagram"/>
                      </CDBBtn>
                    </div>
                </div>
            </div>
        </CDBFooter>
    </CDBContainer>
  );
};

Example 5

import React from "react";
import { CDBFooter, CDBFooterLink, CDBBtn, CDBIcon, CDBContainer } from "cdbreact";
export const Footer = () => {
  return (
    <CDBContainer>
        <footer className="shadow">
            <div className="d-flex justify-content-between align-items-center mx-auto py-4 flex-wrap" style={{width:"80%"}}>
                <div className="d-flex align-items-center">
                    <a href="/" className="d-flex align-items-center p-0 text-dark">
                        <img alt="logo" src="/img/logo.png" width="30px"/>
                        <span className="ml-4 h5 mb-0 font-weight-bold">Devwares</span>
                    </a>
                    <span style={{fontSize:"3em", margin:"-2rem 0px -1.5rem 1rem", color:"#C4C4C4"}}>&#8226;</span>
                    <small className="ml-2">&copy; Devwares, 2020. All rights reserved.</small>
                </div>
                <div>
                  <CDBBtn size="sm" flat color="dark" >
                    <i class="fab fa-facebook-f"></i>
                  </CDBBtn>
                  <CDBBtn size="sm" flat color="dark" className="mx-3">
                    <i class="fab fa-twitter"></i>
                  </CDBBtn>
                  <CDBBtn size="sm" flat color="dark">
                    <i class="fab fa-instagram"></i>
                  </CDBBtn>
                </div>
            </div>
        </footer>
    </CDBContainer>
  );
};

Example 6

import React from "react";
import { CDBFooter, CDBFooterLink, CDBBtn, CDBIcon, CDBContainer } from "cdbreact";
export const Footer = () => {
  return (
    <CDBContainer>
        <CDBFooter className="shadow">
            <div className="d-flex flex-column mx-auto py-5" style={{width:"80%"}}>
                <div className="d-flex justify-content-between flex-wrap">
                    <div className="align-self-center">
                        <CDBFooterLink href="/" className="d-flex align-items-center p-0 text-dark">
                            <img alt="logo" src="/img/logo.png" width="30px"/>
                            <span className="ml-4 h5 font-weight-bold">Devwares</span>
                        </CDBFooterLink>
                    </div>
                    <div className="d-flex justify-content-between" style={{width:"40%"}}>
                        <div>
                            <p className="h5 mb-4" style={{fontWeight:"600"}}>Devwares</p>
                            <ul style={{listStyle:"none", cursor:"pointer", padding:"0"}}>
                                <CDBFooterLink href="/">Resources</CDBFooterLink>
                                <CDBFooterLink href="/">About Us</CDBFooterLink>
                                <CDBFooterLink href="/">Contact</CDBFooterLink>
                                <CDBFooterLink href="/">Blog</CDBFooterLink>
                            </ul>
                        </div>
                        <div>
                            <p className="h5 mb-4" style={{fontWeight:"600"}}>Help</p>
                            <ul style={{listStyle:"none", cursor:"pointer", padding:"0"}}>
                                <CDBFooterLink href="/">Support</CDBFooterLink>
                                <CDBFooterLink href="/">Sign Up</CDBFooterLink>
                                <CDBFooterLink href="/">Sign In</CDBFooterLink>
                            </ul>
                        </div>
                    </div>
                </div>
                <div className="d-flex justify-content-between align-items-center mt-4">
                    <small>&copy; Devwares, 2020. All rights reserved.</small>
                    <div>
                      <CDBBtn size="sm" flat color="dark" >
                        <CDBIcon fab icon="facebook-f"/>
                      </CDBBtn>
                      <CDBBtn size="sm" flat color="dark" className="mx-3">
                        <CDBIcon fab icon="twitter"/>
                      </CDBBtn>
                      <CDBBtn size="sm" flat color="dark">
                        <CDBIcon fab icon="instagram"/>
                      </CDBBtn>
                    </div>
                </div>
            </div>
        </CDBFooter>
    </CDBContainer>
  );
};

Example 7

import React from "react";
import { CDBFooter, CDBFooterLink, CDBBtn, CDBIcon, CDBContainer } from "cdbreact";
export const Footer = () => {
  return (
    <CDBContainer>
        <CDBFooter className="shadow">
            <div className="d-flex justify-content-between align-items-center mx-auto py-4 flex-wrap" style={{width:"80%"}}>
                <CDBFooterLink href="/" className="d-flex align-items-center p-0 text-dark">
                    <img alt="logo" src="/img/logo.png" width="30px"/>
                    <span className="ml-4 h5 font-weight-bold">Devwares</span>
                </CDBFooterLink>
                <small>&copy; Devwares, 2020. All rights reserved.</small>
                  <div>
                  <CDBBtn size="sm" flat color="dark" >
                    <CDBIcon fab icon="facebook-f"/>
                  </CDBBtn>
                  <CDBBtn size="sm" flat color="dark" className="mx-3">
                    <CDBIcon fab icon="twitter"/>
                  </CDBBtn>
                  <CDBBtn size="sm" flat color="dark">
                    <CDBIcon fab icon="instagram"/>
                  </CDBBtn>
                </div>
            </div>
        </CDBFooter>
    </CDBContainer>
  );
};

API

In this section you will find advanced information about the Footer component. You will find out which modules are required, what are the possibilities of configuring the component, and what events and methods you can use to work with it.

Contrast Footer Import Statement

You need to import the proper component first before using it.

import { CDBFooter, CDBFooterLink, CDBBtn,  CDBIcon, CDBContainer } from "cdbreact";

API Reference: Contrast Footer Properties

The table below shows the configuration options of the CDBFooter component.

Name	Type	Default	Description	Example
className	String	Adds custom classes	Adds custom classes	<CDBFooter className="myClass" ... />
tag	function or String	footer	Changes default footer tag	<CDBFooter tag="div" ... />
color	String		Defines component's color	<CDBFooter color="blue" .../>

Card

Mask