Navbar list alignment issues in bootstrap - html

Question

<div class="container"> <!--main div-->
<div>
<nav class="navbar navbar-light bg-light">
<img id="logo" src="logo_white_background.jpg"></img>
<ul class="navbar-nav list-unstyled">
<li class="nav-item">
<button>Login</button><!--Login Link-->
</li>
<li class="nav-item ml-2">
<button>Explore Live Experiments</button><!--Current Available Live Courses Link-->
</li>
</ul>
</nav>
</div>
</div>
</body>
This code works fine to give me the desired navbar. However the login and the explore experiments button don't align to the right. In Spite of trying to add mr-auto and mr-right to the ul. Tried doing custom css align right but no response. How do i make the two buttons go the right of the nav bar?

Answer 1

Can you please check the below code? Hope it will work for you. If you add bootstrap 4 then it's working fine and you want to set the button in the same line then you have to add flex-direction in .navbar-nav so it's work as per your requirement.
Please refer to this link: https://jsfiddle.net/yudizsolutions/syakr3j5/
.navbar-nav {
flex-direction: row !important;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container">
<!--main div-->
<div>
<nav class="navbar navbar-light bg-light">
<img id="logo" src="logo_white_background.jpg">
<ul class="navbar-nav list-unstyled d-flex">
<li class="nav-item">
<button>Login</button>
<!--Login Link-->
</li>
<li class="nav-item ml-2">
<button>Explore Live Experiments</button>
<!--Current Available Live Courses Link-->
</li>
</ul>
</nav>
</div>
</div>

Answer 2

<nav class="navbar navbar-light bg-light d-flex">
<img id="logo" src="logo_white_background.jpg"></img>
<ul class="navbar-nav list-unstyled ml-auto">
<li class="nav-item">
<button>Login</button><!--Login Link-->
</li>
<li class="nav-item ml-2">
<button>Explore Live Experiments</button><!--Current Available Live Courses Link-->
</li>
</ul>
</nav>
add d-flex class on <nav> and ml-auto on <ul>