After upgrading from Bootstrap version 3+ to 4.1.0, I encountered an issue with aligning elements using pull-right and pull-left, as well as float-right and float-left. The problem persists despite my efforts. Here is an image (https://i.sstatic.net/Z6ba3.jpg) illustrating where the content is currently displayed and where I would like it to be displayed.
Below are the relevant snippets of code:
<nav class="navbar navbar-static-top">
<a href="#" class="sidebar-toggle" data-toggle="offcanvas" role="button">
<span class="sr-only">Toggle navigation</span>
</a>
<div class="header_text float-left ">Home</div>
<div class="header_text float-right">Company Name</div>
<div class="navbar-custom-menu ">
<ul class="nav navbar-nav">
<li class="dropdown user user-menu">
<a href="#" class="dropdown-toggle float-right" data-toggle="dropdown"> <img src="./Images/user2-160x160.jpg" class="user-image" alt="User Image"> <span class="hidden-sm">Welcome</span> </a>
<ul class="dropdown-menu">
</ul>
</li>
</ul>
</div>
</nav>
Despite trying both pull-right and pull-left initially, followed by float-left and float-right after some research, the desired outcome is still not achieved. Any assistance would be greatly appreciated.
For reference, here is an image for @soheilPs: https://i.sstatic.net/5XGgF.jpg