2

Previously We used bootstrap version 3+. Now we using 4.1.0. When I try to Align using pull-right and pull-left , its not working. Even I tried with float- right/ float left its not working. Click here to see image (I mentioned in the Image where it displaying and where I want it to be displayed)

Codes here:

<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>

In above code, I tried with pull-right and pull-left at first, then after few google search I used float-left and float-right.still My expected result not come. kindly help

For @soheilPs reference I add image here

Ben
  • 143
  • 1
  • 4
  • 12

2 Answers2

4

Check the changelog: https://getbootstrap.com/docs/4.0/migration/#utilities

Added .float-{sm,md,lg,xl}-{left,right,none} classes for responsive floats and removed .pull-left and .pull-right since they’re redundant to .float-left and .float-right.

So in your case it should be

class="float-sm-right"
Rence
  • 2,900
  • 2
  • 23
  • 40
1

you can use ml-auto and mr-auto

<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 mr-auto">Home</div>
  <div class="header_text ml-auto">Company Name</div>
  <div class="navbar-custom-menu ">
    <ul class="nav navbar-nav">
      <li class="dropdown user user-menu">
        <a href="#" class="dropdown-toggle ml-auto" 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>
mssoheil
  • 110
  • 1
  • 14
  • Hi Thank you. Ur one working for me. but to my left and to my right Home and Company name display like next line . I dont know how to add picture here so ,I edit my qstn and add that picture for ur reference – Ben May 09 '18 at 08:24
  • I'm glad that it helped. – mssoheil May 09 '18 at 08:29
  • I appreciate if you help me to make it display like single line – Ben May 09 '18 at 08:33
  • there might be a conflict somewhere in your code, when I test it it works fine in one line: https://jsfiddle.net/mssoheil88/2cj7yjdj/ – mssoheil May 09 '18 at 08:55
  • ya dnt knw why.. will check my self later. Thanks for your help. – Ben May 09 '18 at 10:40