CODEWITHSUNDEEP
twitter-bootstrapcsstwitter-bootstrap-3
Caverman
Caverman

Reputation: 3707

Mysterious spacing under navbar in Bootstrap 3.3.5

I’m just starting to really get my hands dirty with Bootstrap to mimic a current site I have. I’m pretty much there except for an issue with about a 15px gap between my navbar and the body content. The way I'm interpreting the code is I have a container class that holds my navbar and right below it would be the body content. I created a new "container-content" just so I could put a border around it and give it a contrasting background color. I also included the "body-content" but that's just the built in class that puts left/right padding.

I'm not seeing what would cause there to be a gap between the bottom of the navbar and the start of where I want my body content.

There must be some kind of margin-bottom or something similar in the navbar class. If I remove my navbar container then the body content goes right below my header.

Anyone know of how I can get rid of that margin or padding it's putting in?

My shared _Layout.cshtml 

<div class="container">
        <div class="navbar navbar-inverse" style="border-radius:0;">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li>@Html.ActionLink("Home", "Index", "Home")</li>
                    <li>@Html.ActionLink("Contact Us", "About", "Home")</li>
                </ul>
            </div>
        </div>
        <div class="container-content body-content">
            @RenderBody()
        </div>
    </div>

My Index.cshtml

<div class="body-content-wrapper">
This is where my main body content goes.

    </div>

My Site.css

.body-content {
    padding-left: 15px;
    padding-right: 15px;
}

.body-content-wrapper {
    margin-top: 15px;
    margin-bottom: 25px;
}

.container-content {
  background-color: #f8eed5;
  border: 1px solid black;
}

Upvotes: 0

Views: 270

Answers (1)

Schmalzy
Schmalzy

Reputation: 17324

By default, a non-fixed navbar has 20px of margin-bottom, from the class shown below.

.navbar {
  position: relative;
  min-height: 50px;
  margin-bottom: 20px; 
  border: 1px solid transparent;
}

You should be able to override this like so: 

.navbar {
  margin-bottom: 0; 
}

Upvotes: 1

Related Questions