4

My react bootstrap code below results in the submit button being out of line with the input fields which have labels overhead - Is there a way to get the submit button in line with the text fields

enter image description here

    return (
        <Form>
            <Form.Row>
                <Form.Group as={Col} controlId="formGridEmail">
                    <Form.Label>Email</Form.Label>
                    <Form.Control type="email" placeholder="Enter email" />
                </Form.Group>

                <Form.Group as={Col} controlId="formGridPassword">
                    <Form.Label>Password</Form.Label>
                    <Form.Control type="password" placeholder="Password" />
                </Form.Group>

                <Form.Group as={Col} controlId="formButton">
                    <Button>Submit</Button>
                </Form.Group>
            </Form.Row>
        </Form>
     );
   }

1 Answer 1

4

Use boostrap's d-flex class. You will simply need align-items-end along with it:

      <Form>
        <Form.Row className="d-flex align-items-end">
          <Form.Group as={Col} controlId="formGridEmail">
            <Form.Label>Email</Form.Label>
            <Form.Control type="email" placeholder="Enter email" />
          </Form.Group>

          <Form.Group as={Col} controlId="formGridPassword">
            <Form.Label>Password</Form.Label>
            <Form.Control type="password" placeholder="Password" />
          </Form.Group>

          <Form.Group as={Col} controlId="formButton">
            <Button>Submit</Button>
          </Form.Group>
        </Form.Row>
      </Form>

Sandbox: https://codesandbox.io/s/mystifying-pasteur-vwewz?file=/src/App.js

Alternatively, you can use mt-x classes on the button and just push it down with the top margin, but I don't recommend that.

Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.