Bootstrap: vs in the nav bar. Why they look different?

Question

i'm creating my first site with Bootstrap and i'm dealing with a login/logout button in the nav bar.

Here is my HTML code:

      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Item1</a></li>
        <li><a href="#">Item2</a></li>
        <li><a href="#">Item3</a></li>
        <li><a href="#">Item4</a></li>
        <?php
          if (isset($_SESSION['logged_in']) && $_SESSION['logged_in'] === TRUE) {
        ?>
            <li><a href="logout.php" class="btn btn-primary navbar-btn" type="button" role="logout">Logout</a></li>    
        <?php
          } else {
        ?>
              <li><button class="btn btn-success navbar-btn" type="button" data-toggle="modal" data-target="#signInModal">Login</button></li>
        <?php
          }
        ?>
      </ul>

Please have a look at how they appear:

What could be the problem? Why logout button became bigger?

In addition, please have a look at what happens if i view them in a small screen/window:

This time i have view problems in both cases: in the first case the login button should be aligned with the previous items; in the second case it is wrong at all.

What could be the matter?

Answer 1

The likely culprit is that the default navbar anchor styles are adding in extra padding, which makes your logout "button" appear bigger. Here are styles in the bootstrap.css file likely causing the issue:

.nav > li > a {
  position: relative;
  display: block;
  padding: 10px 15px;
}

.navbar-nav > li > a {
  padding-top: 10px;
  padding-bottom: 10px;
  line-height: 20px;
}

.navbar-btn {
  margin-top: 8px;
  margin-bottom: 8px;
}

It also explains why it is expanding in the responsive mode, as that is technically what the other items in the nav are doing (you just don't see it because they are the same color).

My suggestion would be to:

1) switch the anchor to a button, something like this stackoverflow article suggests.

<form action="logout.php">
<button class="btn btn-primary navbar-btn" type="submit" role="logout">Logout</button>
</form>

-OR-

2) override the styles by creating a custom style sheet to be included in your header after the bootstrap.css file. In that style sheet, you adjust the styles for the elements mentioned above until you get the desired look.

Hope this helps.