🤩
Windframe Import Update is finally here.

Footer

React Bootstrap 5 Footer

The React Bootstrap 5 Footer adds further navigation to the webpage. It can contain links, business information, copyrights, buttons, forms, and a variety of other items.

You can also change the color of the footer by adding one of our color palette classes. The Contrast React Bootstrap 5 Footer component provides many predefined styles for various footer layouts. These layouts, like other React Bootstrap 5 components, are adaptable, responsive, and simple to use.

How do I create a footer in bootstrap 5 react?

A footer is a component that is used at the end of a website which normally contains a copyrights notice and a link to privacy and sometimes other informations such as sitemap, logo, contact information, social media icons, and an email sign-up form. However, a react bootstrap 5 footer or Contrast react footer contains this informations on them in different design forms. Making it a wonderful design for your last element on your webpage.

Importing the React Bootstrap 5 Footer Component

You begin by importing CDBFooter into your project to use the React Bootstrap 5 Footer component.

js
import { CDBFooter } from 'cdbreact';

Example 1

This is the default footer layout. Alongside our CDBFooter component, we also import the CDBFooterLink component to create links in our footer. We also import the CDBBtn for creating buttons and CDBIcon to use icons in our footer.

js
import React from 'react';
import { CDBFooter, CDBFooterLink, CDBBox, CDBBtn, CDBIcon } from 'cdbreact';
export const Footer = () => {
return (
<CDBFooter className="shadow">
<CDBBox display="flex" flex="column" className="mx-auto py-5" style={{ width: '90%' }}>
<CDBBox display="flex" justifyContent="between" className="flex-wrap">
<CDBBox>
<a href="/" className="d-flex align-items-center p-0 text-dark">
<img alt="logo" src="logo" width="30px" />
<span className="ml-3 h5 font-weight-bold">Devwares</span>
</a>
<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>
<CDBBox display="flex" className="mt-4">
<CDBBtn flat color="dark">
<CDBIcon fab icon="facebook-f" />
</CDBBtn>
<CDBBtn flat color="dark" className="mx-3">
<CDBIcon fab icon="twitter" />
</CDBBtn>
<CDBBtn flat color="dark" className="p-2">
<CDBIcon fab icon="instagram" />
</CDBBtn>
</CDBBox>
</CDBBox>
<CDBBox>
<p className="h5 mb-4" style={{ fontWeight: '600' }}>
Devwares
</p>
<CDBBox flex="column" style={{ cursor: 'pointer', padding: '0' }}>
<CDBFooterLink href="/">Resources</CDBFooterLink>
<CDBFooterLink href="/">About Us</CDBFooterLink>
<CDBFooterLink href="/">Contact</CDBFooterLink>
<CDBFooterLink href="/">Blog</CDBFooterLink>
</CDBBox>
</CDBBox>
<CDBBox>
<p className="h5 mb-4" style={{ fontWeight: '600' }}>
Help
</p>
<CDBBox flex="column" style={{ cursor: 'pointer', padding: '0' }}>
<CDBFooterLink href="/">Support</CDBFooterLink>
<CDBFooterLink href="/">Sign Up</CDBFooterLink>
<CDBFooterLink href="/">Sign In</CDBFooterLink>
</CDBBox>
</CDBBox>
<CDBBox>
<p className="h5 mb-4" style={{ fontWeight: '600' }}>
Products
</p>
<CDBBox flex="column" style={{ cursor: 'pointer', padding: '0' }}>
<CDBFooterLink href="/">Windframe</CDBFooterLink>
<CDBFooterLink href="/">Loop</CDBFooterLink>
<CDBFooterLink href="/">Contrast</CDBFooterLink>
</CDBBox>
</CDBBox>
</CDBBox>
<small className="text-center mt-5">&copy; Devwares, 2020. All rights reserved.</small>
</CDBBox>
</CDBFooter>
);
};

Example 2

js
import React from 'react';
import { CDBFooter, CDBFooterLink, CDBBtn, CDBIcon, CDBContainer } from 'cdbreact';
export const Footer = () => {
return (
<CDBFooter className="shadow">
<CDBBox display="flex" flex="column" className="mx-auto py-5" style={{ width: '90%' }}>
<CDBBox display="flex" justifyContent="between" className="flex-wrap">
<CDBBox alignSelf="center">
<a href="/" className="d-flex align-items-center p-0 text-dark">
<img alt="logo" src="logo" width="30px" />
<span className="ml-3 h5 font-weight-bold">Devwares</span>
</a>
<CDBBox className="mt-5" display="flex">
<CDBBtn flat color="dark" className="p-2">
<CDBIcon fab icon="facebook-f" />
</CDBBtn>
<CDBBtn flat color="dark" className="mx-3 p-2">
<CDBIcon fab icon="twitter" />
</CDBBtn>
<CDBBtn flat color="dark" className="p-2">
<CDBIcon fab icon="instagram" />
</CDBBtn>
</CDBBox>
</CDBBox>
<CDBBox>
<p className="h5 mb-4" style={{ fontWeight: '600' }}>
Devwares
</p>
<CDBBox display="flex" flex="column" style={{ cursor: 'pointer' }}>
<CDBFooterLink href="/">Resources</CDBFooterLink>
<CDBFooterLink href="/">About Us</CDBFooterLink>
<CDBFooterLink href="/">Contact</CDBFooterLink>
<CDBFooterLink href="/">Blog</CDBFooterLink>
</CDBBox>
</CDBBox>
<CDBBox>
<p className="h5 mb-4" style={{ fontWeight: '600' }}>
Products
</p>
<CDBBox display="flex" flex="column" style={{ cursor: 'pointer' }}>
<CDBFooterLink href="/">Windframe</CDBFooterLink>
<CDBFooterLink href="/">Loop</CDBFooterLink>
<CDBFooterLink href="/">Contrast</CDBFooterLink>
</CDBBox>
</CDBBox>
<CDBBox>
<p className="h5 mb-4" style={{ fontWeight: '600' }}>
Help
</p>
<CDBBox display="flex" flex="column" style={{ cursor: 'pointer' }}>
<CDBFooterLink href="/">Support</CDBFooterLink>
<CDBFooterLink href="/">Sign Up</CDBFooterLink>
<CDBFooterLink href="/">Sign In</CDBFooterLink>
</CDBBox>
</CDBBox>
</CDBBox>
<small className="text-center mt-5">&copy; Devwares, 2022. All rights reserved.</small>
</CDBBox>
</CDBFooter>
);
};

Example 3

js
import React from 'react';
import { CDBFooter, CDBFooterLink, CDBBtn, CDBIcon, CDBContainer } from 'cdbreact';
export const Footer = () => {
return (
<CDBFooter className="shadow">
<CDBBox display="flex" flex="column" className="mx-auto py-5" style={{ width: '90%' }}>
<CDBBox display="flex" justifyContent="between" className="flex-wrap">
<CDBBox>
<a href="/" className="d-flex align-items-center p-0 text-dark">
<img alt="logo" src="logo" width="30px" />
<span className="ml-3 h5 font-weight-bold">Devwares</span>
</a>
<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>
</CDBBox>
<CDBBox>
<p className="h5 mb-4" style={{ fontWeight: '600' }}>
Devwares
</p>
<CDBBox flex="column" display="flex" style={{ cursor: 'pointer', padding: '0' }}>
<CDBFooterLink href="/">Resources</CDBFooterLink>
<CDBFooterLink href="/">About Us</CDBFooterLink>
<CDBFooterLink href="/">Contact</CDBFooterLink>
<CDBFooterLink href="/">Blog</CDBFooterLink>
</CDBBox>
</CDBBox>
<CDBBox>
<p className="h5 mb-4" style={{ fontWeight: '600' }}>
Help
</p>
<CDBBox display="flex" flex="column" style={{ cursor: 'pointer', padding: '0' }}>
<CDBFooterLink href="/">Support</CDBFooterLink>
<CDBFooterLink href="/">Sign Up</CDBFooterLink>
<CDBFooterLink href="/">Sign In</CDBFooterLink>
</CDBBox>
</CDBBox>
<CDBBox>
<p className="h5 mb-4" style={{ fontWeight: '600' }}>
Products
</p>
<CDBBox display="flex" flex="column" style={{ cursor: 'pointer', padding: '0' }}>
<CDBFooterLink href="/">Windframe</CDBFooterLink>
<CDBFooterLink href="/">Loop</CDBFooterLink>
<CDBFooterLink href="/">Contrast</CDBFooterLink>
</CDBBox>
</CDBBox>
</CDBBox>
<CDBBox
display="flex"
justifyContent="center"
style={{ width: '100%' }}
className="mx-auto mt-4"
>
<CDBBtn flat color="dark" className="p-2">
<CDBIcon fab icon="facebook-f" />
</CDBBtn>
<CDBBtn flat color="dark" className="mx-3 p-2">
<CDBIcon fab icon="twitter" />
</CDBBtn>
<CDBBtn flat color="dark" className="p-2">
<CDBIcon fab icon="instagram" />
</CDBBtn>
</CDBBox>
<small className="text-center mt-5">&copy; Devwares, 2022. All rights reserved.</small>
</CDBBox>
</CDBFooter>
);
};

Example 4

js
import React from 'react';
import { CDBFooter, CDBFooterLink, CDBBtn, CDBIcon, CDBContainer } from 'cdbreact';
export const Footer = () => {
return (
<CDBFooter className="shadow">
<CDBBox display="flex" flex="column" className="mx-auto py-5" style={{ width: '90%' }}>
<CDBBox display="flex" justifyContent="between" className="flex-wrap">
<CDBBox>
<a href="/" className="d-flex align-items-center p-0 text-dark">
<img alt="logo" src="logo" width="30px" />
<span className="ml-3 h5 font-weight-bold">Devwares</span>
</a>
<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>
</CDBBox>
<CDBBox>
<p className="h5 mb-4" style={{ fontWeight: '600' }}>
Devwares
</p>
<CDBBox flex="column" display="flex" style={{ cursor: 'pointer', padding: '0' }}>
<CDBFooterLink href="/">Resources</CDBFooterLink>
<CDBFooterLink href="/">About Us</CDBFooterLink>
<CDBFooterLink href="/">Contact</CDBFooterLink>
<CDBFooterLink href="/">Blog</CDBFooterLink>
</CDBBox>
</CDBBox>
<CDBBox>
<p className="h5 mb-4" style={{ fontWeight: '600' }}>
Help
</p>
<CDBBox display="flex" flex="column" style={{ cursor: 'pointer', padding: '0' }}>
<CDBFooterLink href="/">Support</CDBFooterLink>
<CDBFooterLink href="/">Sign Up</CDBFooterLink>
<CDBFooterLink href="/">Sign In</CDBFooterLink>
</CDBBox>
</CDBBox>
<CDBBox>
<p className="h5 mb-4" style={{ fontWeight: '600' }}>
Products
</p>
<CDBBox display="flex" flex="column" style={{ cursor: 'pointer', padding: '0' }}>
<CDBFooterLink href="/">Windframe</CDBFooterLink>
<CDBFooterLink href="/">Loop</CDBFooterLink>
<CDBFooterLink href="/">Contrast</CDBFooterLink>
</CDBBox>
</CDBBox>
</CDBBox>
<CDBBox
display="flex"
justifyContent="center"
alignItems="center"
style={{ width: '100%' }}
className="mx-auto mt-4"
>
<small className="text-center" style={{ width: '50%' }}>
&copy; Devwares, 2022. All rights reserved.
</small>
<CDBBtn flat color="dark" className="p-2">
<CDBIcon fab icon="facebook-f" />
</CDBBtn>
<CDBBtn flat color="dark" className="mx-3 p-2">
<CDBIcon fab icon="twitter" />
</CDBBtn>
<CDBBtn flat color="dark" className="p-2">
<CDBIcon fab icon="instagram" />
</CDBBtn>
</CDBBox>
</CDBBox>
</CDBFooter>
);
};

Example 5

logoDevwares© Devwares, 2022. All rights reserved.
js
import React from 'react';
import { CDBFooter, CDBFooterLink, CDBBtn, CDBIcon, CDBContainer } from 'cdbreact';
export const Footer = () => {
return (
<CDBFooter className="shadow">
<CDBBox
display="flex"
justifyContent="between"
alignItems="center"
className="mx-auto py-4 flex-wrap"
style={{ width: '80%' }}
>
<CDBBox display="flex" alignItems="center">
<a href="/" className="d-flex align-items-center p-0 text-dark">
<img
alt="logo"
src="data:image/png;base64,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"
width="30px"
/>
<span className="ml-4 h5 mb-0 font-weight-bold">Devwares</span>
</a>
<small className="ml-2">&copy; Devwares, 2022. All rights reserved.</small>
</CDBBox>
<CDBBox display="flex">
<CDBBtn flat color="dark" className="p-2">
<CDBIcon fab icon="facebook-f" />
</CDBBtn>
<CDBBtn flat color="dark" className="mx-3 p-2">
<CDBIcon fab icon="twitter" />
</CDBBtn>
<CDBBtn flat color="dark" className="p-2">
<CDBIcon fab icon="instagram" />
</CDBBtn>
</CDBBox>
</CDBBox>
</CDBFooter>
);
};

Example 6

js
import React from 'react';
import { CDBFooter, CDBFooterLink, CDBBtn, CDBIcon, CDBContainer } from 'cdbreact';
export const Footer = () => {
return (
<CDBFooter className="shadow">
<CDBBox display="flex" flex="column" className=" mx-auto py-5" style={{ width: '80%' }}>
<CDBBox display="flex" justifyContent="between" className="flex-wrap">
<CDBBox>
<a href="/" className="d-flex align-items-center p-0 text-dark">
<img
alt="logo"
src="data:image/png;base64,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"
width="30px"
/>
<span className="ml-3 h5 font-weight-bold">Devwares</span>
</a>
</CDBBox>
<CDBBox display="flex" style={{ width: '50%' }} justifyContent="between">
<CDBBox>
<p className="h5 mb-4" style={{ fontWeight: '600' }}>
Devwares
</p>
<CDBBox flex="column" display="flex" style={{ cursor: 'pointer', padding: '0' }}>
<CDBFooterLink href="/">Resources</CDBFooterLink>
<CDBFooterLink href="/">About Us</CDBFooterLink>
<CDBFooterLink href="/">Contact</CDBFooterLink>
<CDBFooterLink href="/">Blog</CDBFooterLink>
</CDBBox>
</CDBBox>
<CDBBox>
<p className="h5 mb-4" style={{ fontWeight: '600' }}>
Products
</p>
<CDBBox display="flex" flex="column" style={{ cursor: 'pointer', padding: '0' }}>
<CDBFooterLink href="/">Windframe</CDBFooterLink>
<CDBFooterLink href="/">Loop</CDBFooterLink>
<CDBFooterLink href="/">Contrast</CDBFooterLink>
</CDBBox>
</CDBBox>
</CDBBox>
</CDBBox>
<CDBBox display="flex" className="mt-4" justifyContent="between">
<small className="ml-2">&copy; Devwares, 2022. All rights reserved.</small>
<CDBBox display="flex">
<CDBBtn flat color="dark" className="p-2">
<CDBIcon fab icon="facebook-f" />
</CDBBtn>
<CDBBtn flat color="dark" className="mx-3 p-2">
<CDBIcon fab icon="twitter" />
</CDBBtn>
<CDBBtn flat color="dark" className="p-2">
<CDBIcon fab icon="instagram" />
</CDBBtn>
</CDBBox>
</CDBBox>
</CDBBox>
</CDBFooter>
);
};

Example 7

© Devwares, 2022. All rights reserved.
js
import React from 'react';
import { CDBFooter, CDBFooterLink, CDBBtn, CDBIcon, CDBContainer } from 'cdbreact';
export const Footer = () => {
return (
<CDBFooter className="shadow">
<CDBBox
display="flex"
justifyContent="between"
alignItems="center"
className="mx-auto py-4 flex-wrap"
style={{ width: '80%' }}
>
<CDBBox display="flex" alignItems="center">
<a href="/" className="d-flex align-items-center p-0 text-dark">
<img
alt="logo"
src="data:image/png;base64,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"
width="30px"
/>
<span className="ml-4 h5 mb-0 font-weight-bold">Devwares</span>
</a>
</CDBBox>
<CDBBox>
<small className="ml-2">&copy; Devwares, 2022. All rights reserved.</small>
</CDBBox>
<CDBBox display="flex">
<CDBBtn flat color="dark" className="p-2">
<CDBIcon fab icon="facebook-f" />
</CDBBtn>
<CDBBtn flat color="dark" className="mx-3 p-2">
<CDBIcon fab icon="twitter" />
</CDBBtn>
<CDBBtn flat color="dark" className="p-2">
<CDBIcon fab icon="instagram" />
</CDBBtn>
</CDBBox>
</CDBBox>
</CDBFooter>
);
};

Contrast React Bootstrap 5 Footer Props

This tutorial will expand on your knowledge of the props available for use with the Contrast React Bootstrap 5 Footer component. You'll learn what these props do, what their default values are, and how you'd use them in your code.

The table below displays the various prop options for the CDBFooter component.

NameTypeDefaultDescriptionExample
classNameStringAdds custom classesAdds custom classes<CDBFooter className="myClass" ... />
tagfunction or StringfooterChanges default footer tag<CDBFooter tag="div" ... />
colorStringDefines component's color<CDBFooter color="blue" .../>

In this tutorial we also use the CDBBtn and the CDBIcon component, check out our docs to find out more.

Trying to build out all user interfaces and components for your website or web app from scratch can become a very tedious task. A huge reason why we created Contrast Bootstrap to help reduce the amount of time we spend doing that, so we can focus on building some other aspects of the project. Contrast Bootstrap PRO consists of a UI Kit featuring over 10000+ component variants. Together with a template of 5 admin dashboards and 23+ additional multipurpose pages template for building almost any type of website or web app. You can view a demo and learn more about Contrast by clicking here.Download the free react template

ad-banner

Contrast Bootstrap PRO was built using the most popular CSS framework Bootstrap to help build your next landing, admin SAAS, prelaunch etc project with a clean, prebuilt and well documented template and UI components.Learn more about Contrast