Bootstrap 4 Footer with Sub Links

Introducing our Bootstrap 4 Footer with Sub Links component, designed to enrich the user experience and provide comprehensive navigation options at the bottom of your website. This footer includes primary links for essential pages and additional sub-links for further exploration of content, enhancing user engagement and interaction.

Built on Bootstrap's robust framework, our Footer with Sub Links features a modern and responsive design that seamlessly integrates with any website layout. Whether you're developing an e-commerce platform, corporate site, or blog, this component ensures a cohesive and informative conclusion to your web pages.

Key Features:

Comprehensive Navigation: Offer primary links to important sections like About Us, Contact, and Services, with additional sub-links for categories, resources, or related content.
Customizable Design: Personalize the footer's appearance using Bootstrap's utility classes, including colors, typography, spacing, and alignment, to match your website's visual identity and branding.
Responsive Layout: Ensure the footer adapts smoothly across various devices, maintaining usability and accessibility on desktops, tablets, and mobile phones.
Easy Integration: Integrate the Bootstrap 4 Footer with the Sub Links component seamlessly into your website's HTML and CSS structure, leveraging Bootstrap's components for efficient deployment and customization.

Enhance user navigation and engagement on your website with our Bootstrap 4 Footer featuring Sub Links. Whether you're guiding users to explore more content or providing additional resources, this footer component offers a versatile and visually appealing solution for concluding your web pages effectively.

Steps to Copy the Code

Step 1: Copy the Code Snippet

Begin by copying the HTML and CSS code snippet provided above. This snippet includes the necessary structure and styles to create a footer with sub-links using Bootstrap 4. Select the code, click the copy button, and paste it into your HTML file where you want the footer to appear.

Step 2: Link Bootstrap CSS

Ensure Bootstrap's CSS is linked correctly in your HTML document. Add the following <link> tag in the <head> section to import Bootstrap's stylesheet:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

This link fetches Bootstrap's CSS file from the official Bootstrap CDN, ensuring your footer inherits Bootstrap's styling.

Step 3: Customize and Make it Yours

Personalize the footer to align with your website's design and content requirements. Modify the footer links, sub-links, colors, styles, and layout using Bootstrap's built-in classes or custom CSS. Adjust footer content such as copyright information, social media icons, or additional navigation elements to enhance user engagement and navigation.

Code Explanation

HTML Code

Main Content Container

<div class="container">
  <h1>Content Goes Here</h1>
  <p>This is just a sample content.</p>
</div>

<div class="container">: This div sets up a Bootstrap container, which centers its content horizontally and adjusts its width based on the viewport size.
Inside the container:
- <h1>Content Goes Here</h1>: Heading level 1 with the text "Content Goes Here".
- <p>This is just a sample content.</p>: Paragraph with the text "This is just a sample content."

Footer Section

<footer class="text-center bg-dark text-white py-4 fixed-bottom">
  <div class="container">
    <p>© 2024 Your Website</p>
    <ul class="list-inline">
      <li class="list-inline-item"><a href="#">Home</a></li>
      <li class="list-inline-item"><a href="#">About</a></li>
      <li class="list-inline-item"><a href="#">Services</a></li>
      <li class="list-inline-item"><a href="#">Contact</a></li>
    </ul>
    <p>Designed with <span class="text-danger">♥</span> by Faraz</p>
  </div>
</footer>

<footer class="text-center bg-dark text-white py-4 fixed-bottom">: This sets up a footer section using Bootstrap classes.
- text-center: Centers the text horizontally within the footer.
- bg-dark: Applies a dark background color to the footer.
- text-white: Sets the text color to white.
- py-4: Adds padding (py-4 represents padding on the y-axis, top and bottom, with size 4).
- fixed-bottom: Fixes the footer to the bottom of the viewport.

Container within Footer

<div class="container">: Another Bootstrap container inside the footer, ensuring content alignment and proper spacing within the fixed-bottom footer.

Footer Content

<ul class="list-inline">: This ul element with the list-inline class creates an inline list of navigation links.
<li class="list-inline-item"><a href="#">Home</a></li>: Each li with the list-inline-item class represents an item in the inline list.
<a href="#">Home</a>: Anchor tag (a) acting as a link to the "Home" page (# is a placeholder link).
Similar li elements follow for "About", "Services", and "Contact".
<p>Designed with <span class="text-danger">♥</span> by Faraz</p>: Paragraph indicating that the website was designed with a heart symbol (❤️) by someone named Faraz. The heart symbol is styled with the Bootstrap class text-danger, which gives it a red color.

CSS Code

Styling Links within Footer List

footer ul li a {
  color: #fff;
}

footer ul li a: This CSS selector targets anchor (a) elements (<a>) that are nested inside list item (li) elements (<li>) within unordered lists (ul) within <footer> tags (<footer>).
color: #fff;: Sets the color of the text inside these anchor (<a>) elements to white (#fff), which is a hexadecimal color code representing white.

Hover Effect on Links

footer ul li a:hover {
  text-decoration: underline;
}

footer ul li a:hover: This selector specifies the styling when the anchor (<a>) elements inside list items (<li>) within unordered lists (<ul>) inside <footer> tags (<footer>) are hovered over by the mouse pointer (:hover).
text-decoration: underline;: Applies an underline (text-decoration) to the anchor (<a>) elements when they are hovered over, providing a visual indication to users that the links are interactive.