I am writing a search box and search submission button, I try several way to make the button and text box in same line, but doesn't work. Here is my code.
return (
<Form onSubmit={submitHandler} inline>
<Form.Control
type='text'
name='q'
onChange={(e) => setKeyword(e.target.value)}
placeholder='Serach product'
className='mr-sm-2 ml-sm-5'
></Form.Control>
<Button type='submit' variant='btn btn-success' className='p-2'>
search
</Button>
</Form>
)
Reactjs version is ^17.0.1 in my package.jason file, but when I use npm info react in cmd it shows me react@18.1.0
Thanks the answer from Mr.Gandhi https://stackoverflow.com/a/72385731/19202374
Change the input and/or the button to be display: inline in the css Or you can just put display flex on the parent container of the input and button.
Wrap your form elements in a div and give a className (ex: flex-container).
return (
<Form onSubmit={submitHandler} inline>
<div className="flex-container">
<Form.Control
type='text'
name='q'
onChange={(e) => setKeyword(e.target.value)}
placeholder='Serach product'
className='mr-sm-2 ml-sm-5'
></Form.Control>
<Button type='submit' variant='btn btn-success' className='p-2'>
search
</Button>
</div>
</Form>
)
After that add below css
.flex-container {
display: flex;
}