React-Bootstrap horizontal form not working
I am trying to create a form using react-bootstrap and cannot figure out how to use the horizontal form layout. Below is my code for signin.js.
import React, {Component} from 'react';
import {reduxForm} from 'redux-form';
import {Form, FormGroup, FormControl, ControlLabel, Col, Button} from 'react-bootstrap';
class Signin extends Component{
handleFormSubmit({username,password}){
console.log(username,password);
}
render(){
const {handleSubmit, fields: {username,password}}=this.props;
return(
<Form horizontal className="col-sm-6 offset-sm-3" onSubmit={handleSubmit(this.handleFormSubmit.bind(this))}>
<FormGroup>
<Col componentClass={ControlLabel} sm={2}>
Username:
</Col>
<Col sm={10}>
<FormControl {...username} type="text" />
</Col>
</FormGroup>
<FormGroup>
<Col componentClass={ControlLabel} sm={2}>
Password:
</Col>
<Col sm={10}>
<FormControl {...password} type="password" />
</Col>
</FormGroup>
<FormGroup>
<Col>
<Button type="submit">Submit</Button>
</Col>
</FormGroup>
</Form>
);
}
}
export default reduxForm({
form: 'signin',
fields: ['username','password']
})(Signin);
This is how it is done in app.js:
import React, {Component} from 'react';
import {Route} from 'react-router-dom';
import Signin from '../auth/signin';
export default class App extends Component{
render(){
return(
<div>
<Route exact path="/signin" component={Signin} />
</div>
);
}
}
This is shown on the page I want both labels to be embedded in textboxes. I went to the react-bootstrap docs several times. I have a copy and paste of their example code for a horizontal form in my code and it still displays similar to the image above. Any help would be greatly appreciated. Thank!
EDIT:
This issue was caused by linking to v4 bootstrap in my html linking to v3 patched.
+3
source to share