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 ponentClass={ControlLabel} sm={2}>
                        Username:
                    </Col>
                    <Col sm={10}>
                        <FormControl {...username} type="text" />
                    </Col>
                </FormGroup>
                <FormGroup>
                    <Col ponentClass={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" ponent={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.

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 ponentClass={ControlLabel} sm={2}>
                        Username:
                    </Col>
                    <Col sm={10}>
                        <FormControl {...username} type="text" />
                    </Col>
                </FormGroup>
                <FormGroup>
                    <Col ponentClass={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" ponent={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.

• javascript
• reactjs
• react-bootstrap

2 Answers 2

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 ponentClass={ControlLabel} sm={2}>
                        Username:
                    </Col>
                    <Col sm={10}>
                        <FormControl {...username} type="text" />
                    </Col>
</Form.Row
                </FormGroup>
                <FormGroup>
<Form.Row>
                    <Col ponentClass={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>

I am using "inline" instead of horizontal and its working.

<Form inline onSubmit={handleSubmit}>
 <Form.Group>
     <Form.Label>Email</Form.Label>
     <Form.Control type="email" name="email" isInvalid={!isEmpty(errors.email)} value={values.email} onChange={handleChange}></Form.Control>
     <Form.Control.Feedback className="font-weight-bold" type="invalid" role="alert"> {errors.email}</Form.Control.Feedback>
 </Form.Group>
 <Form.Group>
     <Form.Label>Password</Form.Label>
     <Form.Control type="password" name="password" value={values.password} isInvalid={!isEmpty(errors.password)} onChange={handleChange}></Form.Control>
     <Form.Control.Feedback className="font-weight-bold" type="invalid" role="alert"> {errors.password}</Form.Control.Feedback>

 </Form.Group>
 <Form.Group className="text-center">
     <Button type="button" variant="primary" className="mt-3" onClick={submitForm}>Login</Button>
 </Form.Group>
</Form>