'Creating block buttons using Bootstrap in ReactJS

I want to create simple block buttons, that span the entire div. I am using react-bootstrap package to do this in React. Here is the code I am using:-

<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 resulting button created is not of block type. Here is the output generated:- enter image description here

The button should span the same width as the text areas above. How do I create this block button?

cssbootstrap-4flexboxreact-bootstrap


Solution 1:[1]

You must add the link

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
  integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x"
  crossorigin="anonymous"
/>

in the index.html in a public folder, for the web to support react-bootstrap styles.

The link is taken from the react-bootstrap website:

https://react-bootstrap.netlify.app/getting-started/introduction/

Attached is a picture of the link that needs to be added:

enter image description here

Solution 2:[2]

I also face this problem but I easily solve it. You need to cover your button with div and use d-grid

<div className="d-grid gap-2">
  <Button variant="primary" size="lg">
    Block level button
  </Button>
  <Button variant="secondary" size="lg">
    Block level button
  </Button>

This code simply solve your problem

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 C-B
Solution 2 Jamshid Akbarov

Related Questions