Centering React Bootstrap rows

Question

    <Form>
      <Row>
        <Col></Col>
        <Col>
          <h4>Demo Login</h4>
          <Form.Group controlId="formGroupEmail">
            <Form.Label>Email address</Form.Label>
            <Form.Control type="email" placeholder="Enter email" />
          </Form.Group>
          <Form.Group controlId="formGroupPassword">
            <Form.Label>Password</Form.Label>
            <Form.Control type="password" placeholder="Password" />
          </Form.Group>
          <Button variant="primary" type="submit">
            Login In
          </Button>
        </Col>
        <Col></Col>
      </Row>
    </Form>

How can I center this row on the screen?. The current items or columns are centered but I can't seem to find a way to center the row itself. I tried adding an inline style of 'align-items: enter' but that doesn't seem to work. Not even sure if I centered the columns correctly as well.

Answer 1

Try adding: className="align-items-end" to the row component and see if that works.