Mysterious whitespace in between Bootstrap2 Navbar and row underneath

Question

I am using Bootstrap's Navbar and Bootsrap's grid to display a Navbar with a image immediately underneath the Navbar. However, for some reason there is whitespace between this Navbar and the image. When I use firebug to investigate the location of the whitespace, it looks like the Navbar is top-aligned within its containing . I have tried to fix this by using CSS to bottom-align the navbar, to no avail.

How can I eliminate this whitespace?

<!-- Top Navigation Bar -->
<div class="row" id="rowTopLinkNavBar">
    <div class="span6 offset3" id="divTopLinkNavBar">
        <div class="navbar" id="topLinkNavBar">
            <div class="navbar-inner" style="font-size: 16px;">
                <ul class="nav">
                    <li class="active"><a href="#">Home</a></li>
                    <li class="divider"><a href="#">PROJECTS</a></li>
                    <li class="divider"><a href="#">ABOUT US</a></li>
                    <li class="divider"><a href="#">THE TEAM</a></li>
                    <li class="divider"><a href="#">EVENTS</a></li>
                    <li class="divider"><a href="#">MEETINGS</a></li>
                    <li><a href="#">RESOURCES</a></li>
                </ul>
            </div>
        </div>
    </div>
</div>

<!--Background Image-->
<div class="row" id="rowBackgroundImg">
    <div class="span6 offset3" id="backgroundImg">
    <!-- background image is set in CSS -->
    </div>
</div>

Here is my desperate attempt at fixing this issue using CSS:

#backgroundImg
{
    color: #ff0000;
    background-color: #000000;
    /*width: 709px;
    height: 553px;*/
    background: url('../images/someImage.jpg') no-repeat;
    background-size: 100%;
    height: 700px;
    border-radius: 0px;
    background-position: center;
    vertical-align: top;
    background-position: top;
}



#divTopLinkNavBar
{
    vertical-align: bottom;
}

#topLinkNavBar
{
    padding-bottom: 0px;
}
#rowBackgroundImg
{
    padding-top: 0px;
}

.navbar
{
    vertical-align: bottom;
}

Nickname

jsfiddle.net/U7rRR – Nickname

putting my content below the navbar in a .row fixed this mysterious whitespace for me – Early

Answer 1

You may want to override the margin-bottom: 20px from navbar :

.navbar {
    margin-bottom: 0;
}

Something like that : http://jsfiddle.net/q4M2G/ (the !important is here just to override the style of the CDN version of bootstrap I'm using in the jsfiddle but you should not need to use it if your style correctly overrides bootstrap styles)

Multiform

Same fix to remove the space under a table – Rella

This worked for me too. I was using a FooTable beneath the NavBar and the 20px space looked kinda ugly. Thanks @Multiform – Harold

Answer 2

Why you put classes: span12 offset3 ?

Bootstrap has 12 columns default. so if you didn't changed it try to put:

span9 offset3 or just span12.

Sarisarid

You're right. I edited the question to reflect what these spans should have been: span6 with offset3. Thanks for pointing that out – Nickname

Does not fix also your white gap? Can you provide a jsFiddle? – Sarisarid

I see everything correct just removing offset3 like I previously told to you to do... jsfiddle.net/dFzUN/1 – Sarisarid