CODEWITHSUNDEEP
cssbootstrap-4flexboxreact-bootstrap
GameX
GameX

Reputation: 67

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?

Upvotes: 2

Views: 1794

Answers (3)

Saurabh Mistry
Saurabh Mistry

Reputation: 13699

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

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

enter image description here

Upvotes: 0

Jamshid Akbarov
Jamshid Akbarov

Reputation: 65

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

Upvotes: 1

C-B
C-B

Reputation: 33

You must add the link

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/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

Upvotes: 2

Related Questions