How to make Footer Section in Bootstrap-5

Footer-Section-in-Boostrap-5

How to make Footer Section in Bootstrap-5

Footer Section in Bootstrap 5:- The footer serves as an supplementary navigation method on websites, housing links, buttons, company details, copyright information, terms of use, and various other essential elements.

Since the official Bootstrap documentation lacks examples for footers, we have constructed them using the containers, rows, and columns offered by the Bootstrap web framework.

In Bootstrap 5, creating a footer involves structuring content within <footer> tags using the grid system (container, row, col-*). Customize styles with utility classes (bg-*, text-*) for colors and typography. Integrate components like Font Awesome icons for social links. Ensure responsiveness with Bootstrap’s grid (col-md-*, col-sm-*, col-*). A well-designed footer enhances navigation, provides essential information, and ensures a seamless user experience across all devices.

Before copying and pasting any of the code below, be sure to add a Bootstrap link and script to your HTML template.

HTML Code

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />

        <title>Footer Design</title>
        <link rel="stylesheet" href="css/style.css" />
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous" />
        <link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css" />
        <link
            rel="stylesheet"
            href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css"
            integrity="sha512-5A8nwdMOWrSz20fDsjczgUidUBR8liPYU+WymTZP1lmY9G6Oc7HlZv156XqnsgNUzTyMefFTcsFH/tnJE/+xBg=="
            crossorigin="anonymous"
        />
    </head>
    <body>
        <div class="py-5" id="footer">
            <div class="container">
                <div class="row">
                    <div class="col-md-4">
                        <img src="img/logo-white.png" alt="" class="img-fluid" />
                        <p class="text-white mt-4">Lorem ipsum dolor sit amet consectetur adipisicing elit. Non ducimus ea doloribus, nam dolores reiciendis eius numquam quia hic quisquam nisi culpa earum, ut magnam.</p>
                    </div>
                    <div class="col-md-2" id="footer-content1">
                        <h4 class="text-white">Explore</h4>
                        <ul class="mt-4">
                            <li><a href="" class="text-white">Home</a></li>
                            <li class="my-2"><a href="" class="text-white">About us</a></li>
                            <li class="my-2"><a href="" class="text-white my-2">Services</a></li>
                            <li class="my-2"><a href="" class="text-white my-2">Blogs</a></li>
                            <li class="my-2"><a href="" class="text-white my-2">Gallery</a></li>
                            <li><a href="" class="text-white">Contact us</a></li>
                        </ul>
                    </div>
                    <div class="col-md-2" id="footer-content1">
                        <h4 class="text-white">Resources</h4>
                        <ul class="mt-4">
                            <li class="my-2"><a href="" class="text-white">Team</a></li>
                            <li class="my-2"><a href="" class="text-white my-2">Contact us</a></li>
                            <li class="my-2"><a href="" class="text-white my-2">FAQ</a></li>
                            <li class="my-2"><a href="" class="text-white my-2">Blogs</a></li>
                            <li class="my-2"><a href="" class="text-white my-2">Services</a></li>
                            <li class="my-2"><a href="" class="text-white">Blog</a></li>
                        </ul>
                    </div>
                    <div class="col-md-4" id="footer-content2">
                        <h4 class="text-white">Address</h4>
                        <ul class="mt-4">
                            <li>
                                <span><i class="fa fa-location-arrow"></i></span>
                                <p>175 5th Ave Premium Area, New York, NY 10010, United States</p>
                            </li>
                            <li class="my-2">
                                <span><i class="fa fa-phone"></i></span>
                                <p>+1 (123) 456 7890</p>
                            </li>
                            <li>
                                <span><i class="fa fa-envelope"></i></span>
                                <p>hello@dibiz.com</p>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <div class="copy-right bg-dark py-2">
            <div class="container">
                <p class="text-white text-center mt-2">2021 Dibiz is Proudly Powered by EnvyTheme</p>
            </div>
        </div>

        <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.6.0/dist/umd/popper.min.js" integrity="sha384-KsvD1yqQ1/1+IA7gi3P0tyJcT3vR+NdBTt13hSJ2lnve8agRGXTTyNaBYmCR/Nwi" crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.min.js" integrity="sha384-nsg8ua9HAw1y0W1btsyWgBklPnCUAFLuTMS2G72MMONqmOymq585AcH49TLBQObG" crossorigin="anonymous"></script>
    </body>
</html>

Use Font Awesome Icons:-

In addition, many of these footers include social media links represented by icons. Several of these footer examples incorporate Font Awesome, an open-source project offering an extensive collection of over 1,000 vector icons and social media logos, enhancing the visual appeal and functionality of the Footer Section in Bootstrap 5.

fontawesome

CSS Code

#footer{
	width: 100%;
	background-color: #000;
}
#footer-content2 ul li{
	display: flex;
	color: #fff;
}

#footer-content2 ul li span {
    margin-right: 15px;
    font-size: 22px;
    /* align-self: center; */
    /* align-items: center; */
    margin-top: 4px;
}
#footer-content1 ul li a{
	list-style: none;
	text-decoration: none;
	margin-left: 0;
	padding-left: 0px;
	font-weight: 500;
}

Conclusion

Creating a footer section in Bootstrap 5 entails organizing content within <footer> tags and utilizing Bootstrap’s grid system (container, row, col-*). Customize the appearance with utility classes (bg-*, text-*) for color schemes and typography. Enhance functionality by integrating components such as Font Awesome icons for social links. Ensure optimal display across devices with Bootstrap’s responsive grid (col-md-*, col-sm-*, col-*). A well-crafted footer in Bootstrap 5 enriches navigation, delivers crucial information, and maintains a unified user experience.