Let's add our components. We will make use of multiple react-bootstrap components:
- FormControl: This component renders form elements and applies Bootstrap's styling to them.
- FormGroup: This component wraps a form control (or set of controls), applying spacing. It is also possible to define a label and display the validation state of FormGroup.
- InputGroup: This component allows to put other elements before or after an input, using InputGroup.Prepend or InputGroup.Append, respectively.
Replace the Container component with the following code:
<Container className='lf-search'> <FormGroup id='searchForm'> <InputGroup size='lg'> <FormControl id='searchText' type='text' placeholder='Artist or song to search for' ...