I'm looking to make block buttons that fill the entire div. In React, I'm using the react-bootstrap package to achieve this. Below is the code snippet I have implemented:
<Container>
<Row className="justify-content-center">
<Col xs={10} sm={5} md={3}>
<Form className="form-container">
<Form.Group controlId="formEmail" className="form-element">
<Form.Label>Enter Email Address</Form.Label>
<Form.Control type="email" placeholder="Email Address"></Form.Control>
</Form.Group>
<Form.Group controlId="formPwd" className="form-element">
<Form.Label>Enter Password</Form.Label>
<Form.Control type="password" placeholder="Password"></Form.Control>
</Form.Group>
<Form.Group className="form-element">
<Button variant="outline-primary" type="submit" block>Login</Button>
</Form.Group>
</Form>
</Col>
</Row>
</Container>
However, the button created does not have a block type appearance. Here is the current output generated:- https://i.sstatic.net/9Jvgx.png
I would like the button to be the same width as the text fields above it. How can I achieve this with a block button?