Footer
Bootstrap 5 Footer component
Basic example
A basic example of the simple footer with text, links and copyright section.
The background color is set via CSS class .bg-body-tertiary. 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.
Advanced example
An advanced example of Bootstrap Footer.
Components used: Floating social buttons, inline outline form, text, 4 column grid with links inside and copyright section.
We also applied a background that change with theme by using .bg-body-tertiary class.
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.
Links
You can adjust the number of the columns by using grid system.
Text
For more advanced text options have a look at the Typography docs or Text utilities docs .
Images
For more advanced images options have a look at the Images docs .
Iframe (embeds)
For more advanced iframe options have a look at the Embeds docs .
Icons
For more advanced icon options have a look at the Icons docs and Buttons docs.
Call to action
An example of Call to Action scheme within the Footer.
Forms
Simple usage of the inline form within the Footer and with use of the grid. By default it's left aligned.
For more advanced icon options have a look at the Forms docs and Grid docs.
Form centered
An example of centered form within the Footer.
For more advanced icon options have a look at the Horizontal alignment docs.
Colors
As mentioned before - the background color is set via CSS class .bg-primary. 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 color to change the color of the text to white and we set .text-white class in the links as well.
You can also use our Footer Generator to test different color variants.
Footer generatorAlignment
By default, all elements inside the Footer are left-aligned on every screen size. However, you can easily change it and center it on all screen sizes or only on the specific breakpoint.
For more advanced icon options have a look at the Alignment docs.
You can also use our Footer Generator to test different alignment variants.
Footer generatorLeft-aligned
Default left-aligned Footer
Always centered
Add .text-center class to the footer element to center the content.
Centered on small
To center elements of the Footer only on small screens add .text-center .text-md-start classes to the footer element.
With these classes, elements will only be centered on screens smaller than 768 px wide. On larger screens, they will be left-aligned by default.
To learn more about Bootstrap breakpoints read Breakpoints docs.