title: How to adjust the width of the form control in React-Bootstrap
body: <p><a href="https://i.stack.imgur.com/eJp2Y.png" rel="nofollow noreferrer">Navigation Bar</a></p>
  
  <p>The width of the searchbar does not change unless I explicitly set its width but doing this will also affect how it looks when the window size is small.</p>
  
  <p>I tried using a container with only 1 column but the width still does not fill the entire row.</p>
  
  <p>How do I change the width of the searchbar?</p>
  
  <p>NAVIGATION BAR:</p>
  
  <pre><code>    &lt;Navbar style={{ position: 'sticky' }} bg="zocalo-blue" variant="dark" expand="lg" fixed="top"&gt;
          &lt;Navbar.Brand className="mr-0"&gt;
              Test
          &lt;/Navbar.Brand&gt;
          &lt;Navbar.Toggle aria-controls="responsive-navbar-nav" size="sm"/&gt;
          &lt;Navbar.Collapse id="responsive-navbar-nav"&gt;
          &lt;Nav className="justify-content-center flex-md-grow-1"&gt;
            &lt;SearchBar /&gt;
          &lt;/Nav&gt;
          &lt;Nav className="ml-auto align-top"&gt;
            &lt;CartIcon /&gt;
            &lt;User /&gt;
          &lt;/Nav&gt;
          &lt;/Navbar.Collapse&gt;
      &lt;/Navbar&gt;
  </code></pre>
  
  <p>SEARCH BAR:</p>
  
  <pre><code>  &lt;Form className="mb-0" inline&gt;
        &lt;Form.Group as={Row} controlId="search-materials"&gt;
          &lt;InputGroup&gt;
            &lt;FormControl type="text" placeholder="Search" className="searchbar"/&gt;
            &lt;InputGroup.Append&gt;
              &lt;Button variant="zocalo-orange"&gt;
                &lt;div&gt;
                  &lt;i className="fa fa-search fa-lg"&gt;&lt;/i&gt;
                &lt;/div&gt;
              &lt;/Button&gt;
            &lt;/InputGroup.Append&gt;
          &lt;/InputGroup&gt;
        &lt;/Form.Group&gt;
    &lt;/Form&gt;
  </code></pre>