Topic: Cannot align search form to the right
                  
                  davout
                  free
                  asked 5 years ago
                
Newbie question...
I have a navbar where I want to right align both a search form and a set of nav bar actions. I've tried various things, but can't get the search form to right align next to the actions. Any suggestions?
<!--Navbar-->
<!-- Search form -->
<form class="form-inline waves-light ml-md-auto mr-1" mdbWavesEffect>
  <div class="md-form my-0" style="margin-right: 20px">
    <input class="form-control mr-sm-2" placeholder="Search" type="text" placeholder="Search" aria-label="Search">
    <button class="my-0 waves-light" color="primary" mdbBtn mdbWavesEffect outline="true" size="sm" type="button">Search</button>
  </div>
</form>
<ul class="navbar-nav ml-auto">
  <li class="nav-item" routerLinkActive="active">
    <a class="nav-link waves-light" mdbWavesEffect [routerLink]="['user']"><mdb-icon fas icon="user"></mdb-icon> User: [Ian Hayes]<span class="sr-only">(current)</span></a>
  </li>
  <li class="nav-item" routerLinkActive="active">
    <a class="nav-link waves-light" mdbWavesEffect [routerLink]="['user']"><mdb-icon fas icon="users"></mdb-icon> Tenant: [Ian Hayes]<span class="sr-only">(current)</span></a>
  </li>
  <li class="nav-item" routerLinkActive="active">
    <a class="nav-link waves-light" mdbWavesEffect [routerLink]="['user']"><mdb-icon fas icon="envelope"></mdb-icon> Contact<span class="sr-only">(current)</span></a>
  </li>
  <li class="nav-item" routerLinkActive="active">
    <a class="nav-link waves-light" mdbWavesEffect [routerLink]="['user']"><mdb-icon fas icon="question-circle"></mdb-icon> Help<span class="sr-only">(current)</span></a>
  </li>
  <!-- Dropdown -->
  <li class="nav-item dropdown" dropdown>
  <a class="nav-link dropdown-toggle waves-light" dropdownToggle mdbWavesEffect mdbWavesEffect type="button">
    <mdb-icon fas icon="cog"></mdb-icon>
    My account<span class="caret"></span></a>
  <div *dropdownMenu class="dropdown-menu dropdown dropdown-primary" role="menu">
    <a class="dropdown-item waves-light" href="#" mdbWavesEffect>Preferences</a>
    <a class="dropdown-item waves-light" href="#" mdbWavesEffect>Account</a>
    <a class="dropdown-item waves-light" href="#" mdbWavesEffect>History</a>
    <div class="divider dropdown-divider"></div>
    <a class="dropdown-item waves-light" href="#" mdbWavesEffect>Log out</a>
  </div>
  </li>
</ul>
<!-- Links -->
                      
                        Add comment
                      
                    
                  
                
                      
                      Konrad Stępień
                      staff
                        answered 5 years ago
                    
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status
              Answered
Specification of the issue
              - ForumUser: Free
 - Premium support: No
 - Technology: MDB Angular
 - MDB Version: 8.8.1
 - Device: PC
 - Browser: Chrome
 - OS: Windows 10
 - Provided sample code: No
 - Provided link: No