Bootstrap footer

Bootstrap 5 Footer component

Footer

A footer is an additional navigation component. It can hold links, buttons, company info, copyrights, forms, and many other elements.

Video tutorial


Basic example

A basic example of the simple footer with text, links and copyright section.

The background color is set via CSS class . You can set your own color choosing from MDB color palette or by setting a completely custom color via inline CSS, for example

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 dark background by using class. With such settings, it's necessary to use for typography and links, for buttons, and for the form.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt distinctio earum repellat quaerat voluptatibus placeat nam, commodi optio pariatur est quia magnam eum harum corrupti dicta, aliquam sequi voluptate quas.

© 2020 Copyright: MDBootstrap.com

Show codeEdit in sandbox


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 .

Footer text

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!

Footer text

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!

© 2020 Copyright: MDBootstrap.com

Show codeEdit in sandbox

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.

Buttons

For more advanced icon options have a look at the Buttons docs.

Buttons dark theme

For more advanced icon options have a look at the Colors docs and Theme 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.

Form dark theme

An example of dark theme Footer with the form inside

To use forms properly on a dark background add for typography and links, for buttons, and for the form.

For more advanced icon options have a look at the Colors docs and Theme docs.


Colors

As mentioned before - the background color is set via CSS class . You can set your own color choosing from MDB color palette or by setting a completely custom color via inline CSS, for example

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 color to change the color of the text to white and we replace class in the links to as well.

You can also use our Footer Generator to test different color variants.

Footer generator
Footer Content

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!

© 2020 Copyright: MDBootstrap.com

Show codeEdit in sandbox


Alignment

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 generator

Left-aligned

Default left-aligned Footer

Footer Content

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!

© 2020 Copyright: MDBootstrap.com

Show codeEdit in sandbox

Always centered

Add class to the element to center the content.

Footer Content

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!

© 2020 Copyright: MDBootstrap.com

Show codeEdit in sandbox

Centered on small

To center elements of the Footer only on small screens add classes to the element.

With these classes, elements will only be centered on screens smaller than wide. On larger screens, they will be left-aligned by default.

To learn more about Bootstrap breakpoints read Breakpoints docs.

Footer Content

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!

© 2020 Copyright: MDBootstrap.com

Show codeEdit in sandbox



If you want to support our friends from Tailwind Elements you can also check out the Tailwind footer documentation.

Sours: https://mdbootstrap.com/docs/standard/navigation/footer/

18 Responsive Bootstrap Footer Examples

The official Bootstrap documentation does not provide examples for footers, so we decided to provide 18 Bootstrap footer examples built using the containers, rows, and columns provided by the Bootstrap Web Framework. 

All of these responsive footers contain Bootstrap custom class attributes and were posted on CodePen.

Links to individual user-profiles and CodePens are provided for each Bootstrap footer example below. 

 

Add the Bootstrap4.5 CDN

Bootstrap 4.5.2 starter template using Bootstrap CSS and JS CDNs

Before you copy and paste any of the code below, make sure to add the Bootstrap link and scripts to your HTML template.

The Bootstrap JavaScript and JQuery scripts are optional and are not used in all of the Bootstrap footer examples linked below. 

The CDN above is for the latest version of Bootstrap available at the time of this publication. 

If you prefer to download Bootstrap rather than use the CDNs, click here. 

 


 

Use Font Awesome Icons

Another thing to note is many of these footers contain social media links attached to icons.

Many of these footer examples use Font Awesome, an open-source project with over 1,000 vector icons and social media logos.

 

Sign up for a free Font Awesome account

Create a kit

Sign up for Font Awesome

Create a kit to get started.

 

Add the Font Awesome CDN to your project

Copy and paste your custom Kit Code

Then copy and paste your custom Font Awesome script into the header of your project. This script can be found on the "Kits" tab under the user side navigation bar. 

 

Search for a Font Awesome icon

Facebook Font Awesome icon

Font AwesomeIcons

Now, you can search the Font Awesome catalog of icons and click on one.

 

Copy the Font Awesome HTML code

Font Awesome Facebook icon

Copy the HTML code of the icon, in this case . 

 

Add a Font Awesome icon to your HTML template

footer.html

Then paste the HTML code of the icon in your HTML template.

 


 

Footer made in Bootstrap

By Aviforever

Updated in 2020, this Bootstrap footer features four responsive, Bootstrap columns. Company information, quick links, registration, and contact information are all provided, making it easy to update your site's information.

You can also choose to add a link to a registration form in the footer along with your company email address. 

Image of the codepen footer made in bootstrap

 

CodePen

 


 

Bootstrap Footer Design

By anu.uxe

This footer is written in HTML and SCSS. Bootstrap containers, rows, and columns are used to create a simple three-column layout that responsively turns to one column in smaller viewpoints.

Bootstrap footer design

 

CodePen

 


 

Bootstrap footer example

By Shamim Khan

The footer linked below is a four-column Bootstrap footer with "Stay in Touch", "Latest Events", and "Opening Hour" headers. It is designed to add images and business hours along with two separate email addresses. 

Font awesome icons are used in the HTML code.

Bootstrap footer example

 

CodePen

 


 

Bootstrap footer

By Sebastian Sabadus

Social media links, solutions, developers, and company links are all added to this Bootstrap-based footer. The Privacy & terms plus a sitemap link are also included in this code. 

Be sure to change all of the links to your website and social media URLs.

Bootstrap footer

 

CodePen

 


 

Bootstrap footer

By Ali

This is a darker footer designed to showcase a business's design and coding work. It also features six rounded images that can be used to link social media accounts or employee profile pages.

Replace the with your own image sources.

Bootstrap footer

 

CodePen

 


 

Bootstrap-3 footer

By letmeknowit

This CodePen user offers a responsive Bootstrap footer that links to commonly used social media platforms. Then four columns below the social media links contain additional internal links. 

All of the href attributes are blank so you can add in your own links. Font Awesome icons are used for social media links. 

Bootstrap footer

 

CodePen

 


 

Bootstrap Footer Design 3

By Sherif Hamdy

The Bootstrap footer linked below specifically caught our attention given the subscribe form included on the right side of the footer. 

The Font Awesome CDN is used for social media links, a basic HTML form element, and input fields that create the subscribe form. 

Bootstrap footer design 3

 

CodePen

 

 


 

Responsive Bootstrap Footer

By idesignSMF

This is a simple Bootstrap footer in comparison to the previous Bootstrap footers above given it only has services, about, and company description with a few social media links. 

In smaller viewpoints, the three columns turn into only two rows.

Responsive Bootstrap Footer

 

CodePen

 


 

Bootstrap Footer AV Test

By TonyS

This responsive Bootstrap footer has a featured in the section for media coverage, a subscribe now section, and an awards section.

The HTML code has custom class attribute values that connect to a PNG of the news outlet logos.

Bootstrap Footer AV Test

 

CodePen

 


 

Bootstrap Footer

By Magnus

This is another Bootstrap footer example with products, company, and contact columns. At the bottom of the footer, there are social media, Privacy Policy, and Terms of Use links. 

There is a custom yellow color seen on the link hover. 

Bootstrap footer

 

CodePen

 


 

Bootstrap Footer Example 1

By Manasseh El Bey

With a simple five column design, this Bootstrap footer example works well if you need a quick footer. There is no CSS or social media links.

This code is only in HTML. 

Bootstrap footer example 1

 

CodePen

 


 

Simple Responsive Bootstrap footer

By snakebite

With four responsive columns, this Bootstrap footer has empty links for whatever you need to include in your footer. 

In mobile, a "Top" button appears to push users back to the top of the page.

Simple Responsive Bootstrap footer

 

CodePen

 


 

Bootstrap Footer

By Arthur

This is a more unique footer that looks like the bottom of a polaroid photo. The HTML code is simple and contains Bootstrap containers, rows, and columns.

Bootstrap footer

 

CodePen

 


 

Responsive Footer Bootstrap 4

By Axelaredz

This is a four-column footer with a separate copyright footer. Replace with your business logo, change out the contact information, and update the links. 

Responsive footer bootstrap 4

 

CodePen

 


 

Bootstrap footer

By WebDeveloperCodeRep

This Bootstrap footer has an image behind the links and contact information. The CSS file is featured given that the HTML only places the footer in columns. 

Responsive footer bootstrap

 

CodePen

 


 

Bootstrap 4 Footer and Sub Navigation

By gcjosh

This Bootstrap footer example comes with a sub-navigation that can be linked to different contact pages. 

The footer is designed for a city's website but can easily be changed to fit your website. 

Bootstrap 4 footer

 

CodePen

 


 

Bootstrap 4 footer/collapsible/responsive

By Jettaz

This footer uses Font Awesome icons. It also has a responsive dropdown menu when in mobile viewpoints.

The code uses containers, rows, and columns along with data-toggle attributes. 

Bootstrap 4 footer

 

CodePen

 


 

Bootstrap 4 Footer

By Anoopkumarseth

Similar to a previously linked Bootstrap footer example, this example contains a form for a newsletter subscription along with quick links and social media links. 

Font Awesome icons are used along with Bootstrap 4 responsive columns. 

Bootstrap footer

 

CodePen

 




Sours: https://www.ordinarycoders.com/blog/article/bootstrap-footers
  1. Sushi in state college pa
  2. Sainsmart software download
  3. Black slang language
  4. The ups store charleston
  5. Pci ssf

25 responsive Bootstrap Footers

Footer is an important part of any website and serves as additional navigation. Footer is especially crucial in huge portals with complex navigation and hundreds of links and pages.

Official bootstrap documentation does not contain a Footer component, so we have prepared an impressive collection of free beautiful footer templates with exceptional design. All of them are responsive and compatible with the newest Bootstrap 5.

If you want to learn more about the construction of the Foter and get to know the basic and advanced usage of this component - read 📄 Footer documentation


#1

#1


#2

#2


#3

#3


#4

#4


#5

#5


#6

#6


#7

#7


#8

#8


#9

#9


#10

#10


#11

#11


#12

#12


#13

#13


#14

#14


#15

#15


#16

#16


#17

#17


#18

#18


#19

#19


#20

#20


#21

#21


#22

#22


#23

#23


#24

#24


#25

#25

Sours: https://dev.to/mdbootstrap/25-responsive-bootstrap-footers-1bbm

.

Footer bootstrap

.

.

Now discussing:

.



164 165 166 167 168