Topic: Cannot align search form to the right
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 -->
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.
Answered
- User: 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