bootstrap form button is outside of the form div-CodePudding

I am using bootstrap and reactJS.

Please consider the following snippet:

<Form>
    <!--some stuff-->
    <Button type='submit'>
</Form>

the button is rendered outside my form as shown below :

How can I bring my button inside of my form please ? I am using sass , so I can override bootstrap propreties if needed.

CodePudding user response：

Just wrap it with a FormGroup and add a minHeight to it:

<FormGroup style={{ minHeight: "50px" }} className="mb-2">
  <Button className="float-end" type="submit" variant="outline-primary">
    Submit
  </Button>
</FormGroup>

CodePudding user response：

You can wrap everything in a div like so

<FormWrapper class='form-wrapper'>
 <Form>
    <!--some stuff-->
 </Form>
 <Button type='submit'>
</FormWrapper>

CSS as so

.form-wrapper{
//styles here
}