I am in the process of creating a navigation bar in bootstrap 4, which includes Login and Sign Up buttons. To get a clear idea of what I'm aiming for, please refer to the images below:
https://i.sstatic.net/ibZKa.png
https://i.sstatic.net/OUWsX.png
Take a look at the code snippet I'm currently working with:
navigation.php
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
<li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
</ul>
</div>
</nav>After implementing the above code, I am seeing the following output: https://i.sstatic.net/vNz87.png
If you have any suggestions or ideas on what I might be doing wrong, please feel free to share. Your input is greatly appreciated.