CODEWITHSUNDEEP
javascriptcssreactjsreact-bootstrap
user13319825
user13319825

Reputation:

React bootstrap form is not rendering as expected

I am trying to create a bootstrap controlled form. I am using React-bootstrap's <Form> component. I just copied and pasted the code from the react bootstrap website into my code editor. I got an unexpected result.

React Bootstrap Forms

import React from 'react';
// bootstrap components
import Form from 'react-bootstrap/Form';
import Button from 'react-bootstrap/Button';

class Test extends React.Component{
    render(){
        return (
            <Form>
                <Form.Group controlId="formBasicEmail">
                    <Form.Label>Email address</Form.Label>
                    <Form.Control type="email" placeholder="Enter email" />
                    <Form.Text className="text-muted">
                        We'll never share your email with anyone else.
                    </Form.Text>
                </Form.Group>

                <Form.Group controlId="formBasicPassword">
                    <Form.Label>Password</Form.Label>
                    <Form.Control type="password" placeholder="Password" />
                </Form.Group>
                <Form.Group controlId="formBasicCheckbox">
                    <Form.Check type="checkbox" label="Check me out" />
                </Form.Group>
                <Button variant="primary" type="submit">
                    Submit
                </Button>
            </Form>
        )
    }
}

export default Test;

RESULT:

result

You can see how button has been rendered on the left side. Checkbox and muted text has also rendered on the left side. There is a border-radius has applied, which is not expected.

NOTE: I am not using any external style. I am rendering this single component.

Upvotes: 0

Views: 1167

Answers (1)

Adam Farver
Adam Farver

Reputation: 48

Do you have all the dependencies installed? Looks like CSS isn't added.

npm install bootstrap react-bootstrap

You'll also need to have the CSS imported in your src/index.js or src/app.js.

import 'bootstrap/dist/css/bootstrap.min.css'

Upvotes: 1

Related Questions