Create footer using CSS in Bootstrap

Last Reply one month ago By dharmendr

Posted one month ago

How can i create a footer just like the one in the image below

https://imgur.com/gallery/oL79D8S

https://flic.kr/ps/3UAHER

Posted one month ago

HiGeorge616,

You can use bootstrap footer.

Refer below code.

HTML

<div class="container text-center">
    <h1>Main Content Here</h1>
</div>
<footer class="page-footer font-small bg-light">
    <div class="container text-center text-md-left">
        <div class="row">
            <div class="col-md-3 mx-auto">
                <h5 class="font-weight-bold mt-3 mb-4">Header 1</h5>
                <ul class="list-unstyled">
                    <li><a href="#">Link 1</a></li>
                    <li><a href="#">Link 2</a></li>
                    <li><a href="#">Link 3</a></li>
                    <li><a href="#">Link 4</a></li>
                </ul>
            </div>
            <hr class="clearfix w-100 d-md-none" />
            <div class="col-md-3 mx-auto">
                <h5 class="font-weight-bold mt-3 mb-4">Header 2</h5>
                <ul class="list-unstyled">
                    <li><a href="#">Link 1</a></li>
                    <li><a href="#">Link 2</a></li>
                    <li><a href="#">Link 3</a></li>
                    <li><a href="#">Link 4</a></li>
                </ul>

            </div>
            <hr class="clearfix w-100 d-md-none" />
            <div class="col-md-3 mx-auto">
                <h5 class="font-weight-bold mt-3 mb-4">Header 3</h5>
                <ul class="list-unstyled">
                    <li><a href="#">Link 1</a></li>
                    <li><a href="#">Link 2</a></li>
                    <li><a href="#">Link 3</a></li>
                    <li><a href="#">Link 4</a></li>
                </ul>
            </div>
            <hr class="clearfix w-100 d-md-none" />
            <div class="col-md-3 mx-auto">
                <h5 class="font-weight-bold mt-3 mb-4">Header 4</h5>
                <ul class="list-unstyled">
                    <li><a href="#">Link 1</a></li>
                    <li><a href="#">Link 2</a></li>
                    <li><a href="#">Link 3</a></li>
                    <li><a href="#">Link 4</a></li>
                </ul>
            </div>
        </div>
    </div>
    <div class="footer-copyright text-center py-3">
        © Copyright <%=DateTime.Now.Year %> <a href="http://www.excelasoft.com/">Excelasoft Solutions</a>
    </div>
</footer>