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 rendered 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 how it renders onto the page I want both of the labels to be inline with the text fields. I have gone over the react-bootstrap docs multiple times. I have copy and pasted their example code for a horizontal form into my code, and it still renders similarly to the image above. Any help would be greatly appreciated. Thanks!
EDIT:
This problem was caused by linking to v4 of bootstrap in my html, linking it to v3 fixed it.
The reason why your implementation doesn't work is because Bootstrap uses Flex. You have to wrap your form elements in a row.
<Form horizontal className="col-sm-6 offset-sm-3" onSubmit={handleSubmit(this.handleFormSubmit.bind(this))}>
<FormGroup>
<Form.Row>
<Col componentClass={ControlLabel} sm={2}>
Username:
</Col>
<Col sm={10}>
<FormControl {...username} type="text" />
</Col>
</Form.Row
</FormGroup>
<FormGroup>
<Form.Row>
<Col componentClass={ControlLabel} sm={2}>
Password:
</Col>
<Col sm={10}>
<FormControl {...password} type="password" />
</Col>
</Form.Row>
</FormGroup>
<FormGroup>
<Col>
<Button type="submit">Submit</Button>
</Col>
</FormGroup>
</Form>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With