Now, you may be wondering that since we have installed the React-Bootstrap and we have added the reference of React-Bootstrap in our project by using import statement, won't they conflict with each other? No, they will not. React-Bootstrap is compatible with the existing Bootstrap styles, so we don't need to worry about any conflicts.

Look at this code for the Add Ticket component render method:

<form>
    <FieldGroup id="formControlsEmail" type="email" label="Email 
    address" placeholder="Enter email" />
    <FormGroup controlId="formControlsSelect">
        <ControlLabel>Issue Type</ControlLabel>
        <FormControl componentClass="select" placeholder="select">
            <option value="select">select</option>
            <option value="other">...</option>
        </FormControl>
    </FormGroup>
    <FormGroup controlId="formControlsSelect">
        <ControlLabel>Assign Department</ControlLabel>
        <FormControl componentClass="select" placeholder="select">
            <option value="select">select</option>
            <option value="other">...</option>
        </FormControl>
    </FormGroup>
    <FormGroup controlId="formControlsTextarea">
        <ControlLabel>Textarea</ControlLabel>
        <FormControl componentClass="textarea" placeholder="textarea" 
        />
    </FormGroup>
</form>

As you can see in the preceding code, it looks cleaner than the Twitter Bootstrap component, because we can import the individual component from React-Bootstrap rather than including the entire library, such as import { Button } from 'react-bootstrap';.

Here's the list of Supported Form Controls:

• <FieldGroup> for custom component

• <FormControl> for <input>, <textarea>, and <select>

• <Checkbox> for checkbox

• <Radio> for radio

• FormControl.Static (For Static text)

• HelpBlock

Now it's up to you whether you want use React-Bootstrap or normal JSX components with Bootstrap styling.

For more detail, check out https://react-bootstrap.github.io/components/forms/.