CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Vodokan
Vodokan

Reputation: 793

Remove space between container and navigation

I have a simple container which has navbar in it. Here is the code http://www.bootply.com/wPtXYaqV6m

I was expecting no space between the container and the navigation. How do I get rid of that space?

Upvotes: 0

Views: 3188

Answers (5)

Arpita
Arpita

Reputation: 1398

add following style in your code

.navbar.navbar-default {border-width:0px}

Upvotes: 0

m4n0
m4n0

Reputation: 32255

The white space you are mentioning is a border and not really blank space. Override the CSS to remove the border and make it transparent.

/* CSS used here will be applied after bootstrap.css */

.container {
  background: red;
}
.navbar {
  margin-left: -15px;
  margin-right: -15px;
}
.navbar-default {
  border-bottom-color: transparent !important; /* !important added for SO snippet, avoid it */
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet" />
<div class="container">

  <div class="navbar navbar-default " style="background: green">
    <div class="navbar-header">
      <a 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>
      </a>
    </div>
    <!-- //navbar-header -->
    <div class="navbar-collapse collapse">
      <ul class="nav navbar-nav">
        <li><a href="1">Home</a>
        </li>
        <li><a href="2">Book</a>
        </li>
        <li><a href="3">Hotels</a>
        </li>
        <li><a href="4">Day trips</a>
        </li>
        <li><a href="5">Ski+Snowboard Hire &amp; Lift Pass+School</a>
        </li>
        <li><a href="6">Car Hire</a>
        </li>
        <li><a href="7">About</a>
        </li>
        <li><a href="8">Contact</a>
        </li>

      </ul>
    </div>
    <!-- //navbar-collapse -->
  </div>
  <!-- end navbar -->
</div>
<!-- //container -->

Upvotes: 0

Ishimdar Ahamad
Ishimdar Ahamad

Reputation: 202

I think its border space space, if I am right what you think

.navbar-default {
    background-color: #f8f8f8;
    /* border-color: #e7e7e7; */
}

Upvotes: 0

jackJoe
jackJoe

Reputation: 11148

That's because navbar has a border (bootstrap.min.css):

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

You can override it by specifying no borders in your own CSS file:

.navbar {
    border: 0px;
}

Upvotes: 1

Amit singh
Amit singh

Reputation: 2036

If you want to fill the container with the navbar than increase height of the navbar

OR

If you want that white space betwenn container and navbar than simply remove border of navbar

Upvotes: 0

Related Questions