Creating block buttons using Bootstrap in ReactJS

Question

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:-

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

C-B · Accepted Answer · 2021-06-20 11:35:39Z

2

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:

answered Jun 20, 2021 at 11:35

C-B

335 bronze badges

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

Comments

Jamshid Akbarov · Accepted Answer · 2022-05-09 13:33:34Z

1

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

answered May 9, 2022 at 13:33

Jamshid Akbarov

651 silver badge8 bronze badges

Comments

Saurabh Mistry · Accepted Answer · 2022-11-13 11:47:53Z

0

give className="w-100" means 100% width

<Button variant="primary" className="w-100">
    Submit
</Button>

answered Nov 13, 2022 at 11:47

Saurabh Mistry

13.8k5 gold badges60 silver badges78 bronze badges

Collectives™ on Stack Overflow

Creating block buttons using Bootstrap in ReactJS

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related