title: bootstrap navigation bar: location of logout button and username when logged in
body: <p>I've made navigation bar with bootstrap 4.4.1 version.
  When I logged in with system, logout button and username(Welcome, (username)!) comes left.
  They should go very right side like login button.
  I tried to insert no-link button or ul tag or li tag, but as a length of username change, it's location changes. When I used those things and username gets more than 6 letters, then whole navbar was broken with two lines.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta charset="utf-8"&gt;
  &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
  &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
  &lt;meta name="description" content=""&gt;
  &lt;meta name="author" content=""&gt;
  &lt;title&gt;&lt;/title&gt;
  &lt;link href="http://localhost/rentcar/bootstrap- 
  4.1.1/dist/css/bootstrap.min.css" rel="stylesheet" type="text/css"&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;?php  
  session_start();//session starts here  
  ?&gt;  &lt;nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark mb-4"&gt;
  
    &lt;a class="navbar-brand" href="index.php"&gt;&lt;img src="images/logo.jpg" 
  width="30" height="30"&gt; KY Rentalcar&lt;/a&gt; 
    &lt;button class="navbar-toggler" type="button" data-toggle="collapse" data- 
   target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria- 
   expanded="false" aria-label="Toggle navigation"&gt;
      &lt;span class="navbar-toggler-icon"&gt;&lt;/span&gt;
    &lt;/button&gt;
    &lt;div class="collapse navbar-collapse" id="navbarsCollapse"&gt;
      &lt;ul class="navbar-nav mr-auto"&gt;
        &lt;li class="nav-item"&gt;
          &lt;a class="nav-link" href="index.php?page=car_price"&gt;Cars&lt;/a&gt;
        &lt;/li&gt;
        &lt;li class="nav-item"&gt;
          &lt;a class="nav-link" href="index.php?page=selectReview"&gt;Review&lt;/a&gt;
        &lt;/li&gt;
        &lt;li class="nav-item"&gt;
          &lt;a class="nav-link" href="map.php"&gt;Pickup Station&lt;/a&gt;
        &lt;/li&gt; 
        &lt;li class="nav-item"&gt;
     &lt;a class="nav-link" href="index.php?page=selectChatView"&gt;
      Chat&lt;/a&gt;
        &lt;/li&gt;
      &lt;?php
      if (!isset($_SESSION['username'])){
      ?&gt;
      &lt;/ul&gt;
         &lt;a href="index.php?page=loginView"&gt;
          &lt;button class="btn btn-outline-success my-2 my-sm-0"&gt;
          Login
          &lt;/button&gt;
        &lt;/a&gt;
      &lt;?php
      }else if ($_SESSION['status']=='customer'){
      ?&gt;
      &lt;li class="nav-item"&gt;
          &lt;a class="nav-link" href="index.php?page=selectMy_pageView"&gt;My 
      Information&lt;/a&gt;
        &lt;/li&gt;
      &lt;li class="nav-item"&gt;
          &lt;a class="nav-link" href="index.php? 
     page=selectMy_reservationView"&gt;My Reservation&lt;/a&gt;
        &lt;/li&gt;
      &lt;li class="nav-item"&gt;
          &lt;a class="nav-link" href="index.php?page=insertReservationView"&gt;New 
      Reservation&lt;/a&gt;
        &lt;/li&gt;
  
      &lt;ul&gt;  
      &lt;li class="nav-link disabled" style="color:white;"&gt;
         &lt;?php
           if (isset($_SESSION['username'])){
            echo "Welcome, ".$_SESSION['username']."!";
          }
         ?&gt;
        &lt;span class="sr-only"&gt;(current)&lt;/span&gt;
       &lt;/li&gt;
       &lt;/ul&gt;
  
        &lt;ul&gt;
         &lt;a href="index.php?page=logoutDo"&gt;
          &lt;button class="btn btn-outline-success my-2 my-sm-0"&gt;
          Logout
          &lt;/button&gt;
        &lt;/a&gt;
        &lt;/ul&gt;
      &lt;?php
      }else if ($_SESSION['status']=='admin'){
      ?&gt;
      &lt;li class="nav-item"&gt;
          &lt;a class="nav-link" href="index.php?page=selectCar_typeView"&gt;Car 
      Type Management&lt;/a&gt;
        &lt;/li&gt; 
      &lt;li class="nav-item"&gt;
          &lt;a class="nav-link" href="index.php? 
      page=selectCustomerView"&gt;Customer Data&lt;/a&gt;
         &lt;/li&gt;
      &lt;li class="nav-item"&gt;
          &lt;a class="nav-link" href="index.php? 
      page=selectReservationView"&gt;Reservation Data&lt;/a&gt;
       &lt;/li&gt;
  
  
      &lt;ul&gt;  
      &lt;li class="nav-link disabled" style="color:white;"&gt;
         &lt;?php
           if (isset($_SESSION['username'])){
            echo "Welcome, ".$_SESSION['username']."!";
          }
         ?&gt;
        &lt;span class="sr-only"&gt;(current)&lt;/span&gt;
       &lt;/li&gt;
       &lt;/ul&gt;
  
        &lt;ul&gt;
         &lt;a href="index.php?page=logoutDo"&gt;
          &lt;button class="btn btn-outline-success my-2 my-sm-0"&gt;
          Logout
          &lt;/button&gt;
        &lt;/a&gt;
        &lt;/ul&gt;
      &lt;?php
      }
      ?&gt;
      &lt;/div&gt;
     &lt;/nav&gt;   
     &lt;!-- Bootstrap core JavaScript
     ================================================== --&gt;
     &lt;!-- Placed at the end of the document so the pages load faster --&gt;
    &lt;script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" 
    integrity="sha384- 
    q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
    crossorigin="anonymous"&gt;&lt;/script&gt;
    &lt;script&gt;window.jQuery || document.write('&lt;script 
    src="http://localhost/rentcar/bootstrap-4.1.1/assets/js/vendor/jquery- 
     slim.min.js"&gt;&lt;\/script&gt;')&lt;/script&gt;
    &lt;script src="http://localhost/rentcar/bootstrap- 
    4.1.1/assets/js/vendor/popper.min.js"&gt;&lt;/script&gt;
   &lt;script 
   src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"&gt; 
     &lt;/script&gt;
  &lt;script src="http://localhost/rentcar/bootstrap- 
      4.1.1/dist/js/bootstrap.min.js"&gt;&lt;/script&gt;
   &lt;/body&gt;
   &lt;/html&gt;
  </code></pre>