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.

minefield_tester · Accepted Answer · 2021-04-01 11:00:55Z

1

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

answered Apr 1, 2021 at 11:00

minefield_tester

1031 gold badge3 silver badges13 bronze badges

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

2 Comments

mozart Over a year ago

I tried adding classes as well but that doesnt seem to work.

minefield_tester Over a year ago

Hmm, try wrapping the code inside of the form component into a Container.

Collectives™ on Stack Overflow

Centering React Bootstrap rows

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related