CODEWITHSUNDEEP
htmltwitter-bootstraptwitter-bootstrap-3
user1352057
user1352057

Reputation: 3182

Twitter Bootstrap - Issue with Footer positioning

Question Background:

I'm currently putting a basic page together using the Bootstrap framework in an ASP.NET MVC project.

Question issue:

I'm implementing a footer on the page using a NavBar class that is positioned statically at the bottom of the page. This works fine, but I'm left with a gap - as denoted by the red and yellow arrow in the image below' between the footer and the bottom of the page. I want the footer to go to the bottom of the page, how do I implement this?

enter image description here

Code:

Here is the current layout of the page:

<html>
<head>
<meta charset="utf-8" />
<link href="\Bootstrap\css\bootstrap.css" rel="stylesheet" />
<link href="\Bootstrap\css\bootstrap-responsive.css" rel="stylesheet" />
<link href="\Bootstrap\css\bootstrap-responsive.min.css" rel="stylesheet" />
<script src="\Scripts\jquery-2.1.1.min.js"></script>
<script src="\Bootstrap\js\bootstrap.js"></script>
<title>
    Hello!
</title>
</head>
<body>
<nav class="navbar navbar-inverse navbar-static-top">
    <div class="navbar-inner">
        <a class="brand">Test Site</a>

        <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </a>

        <div class="nav-collapse collapse">
            <ul class="nav">
                <li><a href="/Articles/List">Articles</a></li>
                <li><a href="/Blogs/All">Blog</a></li>
                <li><a href="/About">About</a></li>
                <li class="dropdown">
                    <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                        Test drop down
                        <b class=" caret"></b>
                    </a>
                    <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownmenu">
                        <li><a href="http://www.google.com">Google</a></li>
                        <li><a href="http://www.amazon.com">Amazon</a></li>
                        <li><a href="http://www.aol.com">AOL</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</nav>

<div class="container">

    <div class="row-fluid">
        <div id="slidingCarousel" class="carousel slide">
            <div class="carousel-inner">
                <div class="item">
                    <img src="/Content/NewPana1.jpg" />
                    <div class="carousel-caption">
                        <h4>Pic1</h4>
                        <p>This is a pic</p>
                    </div>
                </div>
                <div class="item">
                    <img src="/Content/NewPana2.jpg" />
                    <div class="carousel-caption">
                        <h4>Pic2</h4>
                        <p>This is a pic</p>
                    </div>
                </div>
                <div class="item">
                    <img src="/Content/NewPana3.jpg" />
                    <div class="carousel-caption">
                        <h4>Pic3</h4>
                        <p>This is a pic</p>
                    </div>
                </div>
            </div>
            <a class="carousel-control left" href="#slidingCarousel" data-slide="prev">&lsaquo;</a>
            <a class="carousel-control right" href="#slidingCarousel" data-slide="next">&rsaquo;</a>
        </div>
    </div>
    <script>
        $(function () {
            $('.carousel').carousel({
                interval: 7000
            });
        });
    </script>

    <div class="row-fluid">
        <div class="span12">
            <div class="img-rounded">
                <div class="hero-unit HeroUnitBackground">
                    <h1>Test</h1>
                    <p>Paragraph FTW</p>
                    <p><a class="btn btn-primary btn-large">Learn more</a></p>
                </div>
            </div>
        </div>
    </div>
    <div class="row-fluid">
        <div class="span4">
            <h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h2><br />
            Vivamus dictum ultricies nunc, nec egestas nisi molestie vel.
            Sed sed tortor et nibh tincidunt vulputate. Cum sociis natoque penatibus et magnis
            dis parturient montes, nascetur ridiculus mus. Duis porta, elit in pretium blandit,
            felis enim auctor felis, quis porta augue tortor vel felis. Maecenas metus sapien,
            laoreet eu magna id, interdum dapibus ligula. Sed vestibulum lectus lacus, ac varius quam fermentum et.
            <br /><br />
        </div>

        <div class="span4">
            <h2>Sed pulvinar nisi ut neque rhoncus, at aliquam mi scelerisque.</h2><br />
            Suspendisse ac tempor tortor. Curabitur libero urna, scelerisque quis commodo ac,
            sodales eu metus. Mauris rhoncus sit amet risus et eleifend. Mauris consectetur velit dui,
            ut molestie risus porta nec. Mauris egestas in risus a scelerisque. Aliquam blandit,
            ante adipiscing iaculis vehicula, magna mi imperdiet purus, convallis dignissim nisi velit nec justo.
            Nullam et leo non lectus pretium tincidunt. Morbi congue enim eu aliquam tempor. Sed in imperdiet felis,
            sed placerat arcu. Aliquam ligula orci, suscipit non lorem non, aliquet congue sapien.
            <br /><br />
        </div>

        <div class="span4">
            <h2>Nullam laoreet nisi ac ipsum semper, ornare auctor justo.</h2><br />
            Suspendisse ac tempor tortor. Curabitur libero urna, scelerisque quis commodo ac,
            sodales eu metus. Mauris rhoncus sit amet risus et eleifend. Mauris consectetur velit dui,
            ut molestie risus porta nec. Mauris egestas in risus a scelerisque. Aliquam blandit,
            ante adipiscing iaculis vehicula, magna mi imperdiet purus, convallis dignissim nisi velit nec justo.
            Nullam et leo non lectus pretium tincidunt. Morbi congue enim eu aliquam tempor. Sed in imperdiet felis,
            sed placerat arcu. Aliquam ligula orci, suscipit non lorem non, aliquet congue sapien.
            <br /><br />
        </div>
    </div>

    <div class="row-fluid">
        <div class=" span12"><img class="img-rounded" src="/Content/NewPana4.jpg">     </div>
    </div>
    <div class="row-fluid">

        <div class="span6">
            <h2>
                Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit
            </h2>
            Morbi sollicitudin, leo at tristique hendrerit, lacus purus posuere eros,
            quis feugiat mauris nisl ut eros. Aliquam id dapibus turpis, ut laoreet neque.
            Curabitur elit arcu, congue ac augue in, tempor pharetra ante. Nulla eu iaculis lorem.
            Nullam convallis nibh vel vulputate convallis. Suspendisse eget sollicitudin quam.
            Suspendisse eu mi enim. Fusce mollis nec eros sit amet interdum. Donec non euismod arcu.
            Integer porta, arcu eget porttitor feugiat, lorem ante congue sem, nec aliquet neque mauris id nulla.<br /><br />
            <div class=" text-center">
                <img class="img-rounded" src="\Content\Land1.jpg" />
            </div>
            <br /><br />
        </div>
        <div class="span6">
            <div class="FooterBackground">
                <h2>
                    Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit
                </h2>
                Morbi sollicitudin, leo at tristique hendrerit, lacus purus posuere eros,
                quis feugiat mauris nisl ut eros. Aliquam id dapibus turpis, ut laoreet neque.
                Curabitur elit arcu, congue ac augue in, tempor pharetra ante. Nulla eu iaculis lorem.
                Nullam convallis nibh vel vulputate convallis. Suspendisse eget sollicitudin quam.
                Suspendisse eu mi enim. Fusce mollis nec eros sit amet interdum. Donec non euismod arcu.
                Integer porta, arcu eget porttitor feugiat, lorem ante congue sem, nec aliquet neque mauris id nulla.<br /><br />
            </div>
            <div class=" text-center">
                <img class="img-rounded" src="\Content\Land2.jpg" />
                <br /><br />
            </div>
        </div>
    </div>
</div>
<nav class="navbar navbar-inverse navbar-static-bottom">
    <div class="navbar-inner">
        Test
    </div>
</nav>
</body>
</html>

Upvotes: 0

Views: 95

Answers (4)

user1352057
user1352057

Reputation: 3182

Managed to sort this in the end.

this is the end result:

enter image description here

Found an example on the web using the <footer></footer> tag.

The css for the footer tag:

 footer {
        color: #666;
        background: #222;
        padding: 17px 0 18px 0;
        border-top: 1px solid #000;
        height: 160px;
    }

Upvotes: 0

Jason
Jason

Reputation: 122

there is a panel-footer in bootstrap css. you might want to consider using that.

.panel-footer {
  padding: 10px 15px;
  background-color: #f5f5f5;
  border-top: 1px solid #dddddd;
  border-bottom-right-radius: 3px;
  border-bottom-left-radius: 3px;
}

Upvotes: 1

jme11
jme11

Reputation: 17407

The .navbar class has a 20px margin by default. You'll need to override that just for your bottom nav. I would add margin-bottom: 0 to your nav.navbar-static-bottom class.

Upvotes: 1

Hristo Georgiev
Hristo Georgiev

Reputation: 2519

EDITED

Try adding a class to the footer like this :

HTML

 <nav class="navbar navbar-inverse navbar-static-bottom customFooter">

CSS

 .customFooter {


 margin-bottom: 0;


}

Upvotes: 1

Related Questions