Exploring new frontiers with Bootstrap in Angular. I have successfully integrated a Bootstrap template navbar into my html-site. The navbar consists of text items in an ordered list and a search button along with a related form. My goal is to align the text items on the left side and the search button/input form on the right side.
Attempts like using nav navbar-nav navbar-left from this discussion on Stack Overflow: Bootstrap NavBar with left, center and right aligned items didn't yield results.
Anyone have suggestions on how to properly align the elements on the right and left sides? Your help is greatly appreciated.
The html-code:
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse" id="navbarSupportedContent">
<ul class="nav navbar-nav navbar-left" id="text">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
SOLUTION:
To resolve the alignment issue, I adjusted the width of the navbar to 100%. Prior to this change, the navbar width was constrained, hindering the left/right alignment of elements. Utilizing the mr-auto class in the <ul> tag set the margin left/right automatically.
HTML:
<div class="navbar-collapse collapse navbar-adjustment" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto" id="text">
CSS:
.navbar-adjustment{
width: 100%;
}