Making my navbar form search field full width

Question

I have this navbar below and I'd like to make the search field in the form full width, so it expands as much of the navbar as possible without pushing anything else out of the way.

How would I do this?

I've tried a couple of different things like setting the width of different elements but nothing seems to work.

<nav class="navbar navbar-expand-md navbar-dark bg-primary">
  <div class="container">
    <a class="navbar-brand" [routerLink]="['/home']">Web App</a>

    <form class="form-inline">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
    </form>

    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#test" aria-expanded="false">        <span class="navbar-toggler-icon"></span>      </button>

    <div class="collapse navbar-collapse" id="test">
      <ul *ngIf="!loggedIn()" class="navbar-nav ml-auto">
        <li class="nav-item">
          <a class="nav-link" [routerLink]="['/register']">Register</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" [routerLink]="['/login']">Login</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

Answer 1

This can be achieved with display:flex; and wrapping the relevant elements in divs. I set the first and second div to flex-shrink:1;, which means they shrink to the content of the div. Then I have added flex-grow: 1;to the second div so it fills the remaining space.

I also added width:100%; to the input field.

.flex {
  display:flex;
}
.flex > div {
  padding:0 5px;
  flex-shrink:1;
}
.flex > div:nth-child(2) {
  flex-grow: 1;
}
input {
  width:100%;
}
.collapse {
  display:none;
}

<nav class="navbar navbar-expand-md navbar-dark bg-primary">
  <div class="container flex">
    <div>
      <a class="navbar-brand" [routerLink]="['/home']">Web App</a>
    </div>
    <div>
    <form class="form-inline">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
    </form>
    </div>
    <div>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#test" aria-expanded="false">        <span class="navbar-toggler-icon">Menu</span>      </button>

      <div class="collapse navbar-collapse" id="test">
        <ul *ngIf="!loggedIn()" class="navbar-nav ml-auto">
          <li class="nav-item">
            <a class="nav-link" [routerLink]="['/register']">Register</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" [routerLink]="['/login']">Login</a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</nav>

Answer 2

Add with and float on the below element:

<ul class="navbar-nav mr-auto">

CSS:

width: 100px;
float: right;

The float you set does not work as the width of the element is 100%. You can also set text-align: center but depends how you want your text starts.

To align it properly now, use margin-right and margin-left to display it right where you want.

Edit: To have full width search bar:

form, input {
  width: 100%;
}

Edit 2:

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<nav class="navbar navbar-expand-md navbar-dark bg-primary">
	<div class="container">
		<div class="row w-100">
			<a class="col-2 navbar-brand" [routerLink]="['/home']" style="max-width:100px">Web App</a>

			<form class="col form-inline">
				<input class="form-control mr-sm-2 w-100" type="search" placeholder="Search" aria-label="Search">
      </form>
      
      <button class="col-1 navbar-toggler" type="button" data-toggle="collapse" data-target="#test" aria-expanded="false" style="min-width:50px">        
        <span class="navbar-toggler-icon"></span>      
      </button>      
      
      <div class="col-1 collapse navbar-collapse" id="test">
         <ul *ngIf="!loggedIn()" class="navbar-nav ml-auto">
            <li class="nav-item">                
              <a class="nav-link" [routerLink]="['/register']">Register</a>              
            </li>
            <li class="nav-item">                
              <a class="nav-link" [routerLink]="['/login']">Login</a>              
            </li>
         </ul>
      </div>
      </div>
   </div>
</nav>