title: Bootstrap: <button> vs <a> in the nav bar. Why they look different?
body: <p>i'm creating my first site with Bootstrap and i'm dealing with a login/logout button in the nav bar.</p>
  
  <p>Here is my HTML code:</p>
  
  <pre><code>      &lt;ul class="nav navbar-nav navbar-right"&gt;
          &lt;li&gt;&lt;a href="#"&gt;Item1&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Item2&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Item3&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Item4&lt;/a&gt;&lt;/li&gt;
          &lt;?php
            if (isset($_SESSION['logged_in']) &amp;&amp; $_SESSION['logged_in'] === TRUE) {
          ?&gt;
              &lt;li&gt;&lt;a href="logout.php" class="btn btn-primary navbar-btn" type="button" role="logout"&gt;Logout&lt;/a&gt;&lt;/li&gt;    
          &lt;?php
            } else {
          ?&gt;
                &lt;li&gt;&lt;button class="btn btn-success navbar-btn" type="button" data-toggle="modal" data-target="#signInModal"&gt;Login&lt;/button&gt;&lt;/li&gt;
          &lt;?php
            }
          ?&gt;
        &lt;/ul&gt;
  </code></pre>
  
  <p>Please have a look at how they appear:</p>
  
  <p><img src="https://i.stack.imgur.com/86laG.png" alt="enter image description here"></p>
  
  <p><img src="https://i.stack.imgur.com/X3bl2.png" alt="enter image description here"></p>
  
  <p>What could be the problem? Why logout button became bigger?</p>
  
  <p>In addition, please have a look at what happens if i view them in a small screen/window:</p>
  
  <p><img src="https://i.stack.imgur.com/8HkWt.png" alt="enter image description here"></p>
  
  <p><img src="https://i.stack.imgur.com/JblRV.png" alt="enter image description here"></p>
  
  <p>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.</p>
  
  <p>What could be the matter?</p>