# Form layout Form

# Inline forms

Use <Form inline> instead of <Form>. JSX strips whitespace between lines, so you will need to manually add spaces. Additionally, Bootstrap assigns inline form controls width: auto by default, so you may need to set custom widths.


            const formInstance = (
              <Form inline>
                <FormGroup controlId="formInlineName">
                  <ControlLabel>Name</ControlLabel>
                  {' '}
                  <FormControl type="text" placeholder="Jane Doe" />
                </FormGroup>
                {' '}
                <FormGroup controlId="formInlineEmail">
                  <ControlLabel>Email</ControlLabel>
                  {' '}
                  <FormControl type="email" placeholder="jane.doe@example.com" />
                </FormGroup>
                {' '}
                <Button type="submit">
                  Send invitation
                </Button>
              </Form>
            );

            
          

# Horizontal forms

Use <Form horizontal> instead of <Form>, then use <Col>s to align labels and controls. Do not use <Row> here, as <FormGroup> will already serve as a grid row in a horizontal form.


            const formInstance = (
              <Form horizontal>
                <FormGroup controlId="formHorizontalEmail">
                  <Col componentClass={ControlLabel} sm={2}>
                    Email
                  </Col>
                  <Col sm={10}>
                    <FormControl type="email" placeholder="Email" />
                  </Col>
                </FormGroup>

                <FormGroup controlId="formHorizontalPassword">
                  <Col componentClass={ControlLabel} sm={2}>
                    Password
                  </Col>
                  <Col sm={10}>
                    <FormControl type="password" placeholder="Password" />
                  </Col>
                </FormGroup>

                <FormGroup>
                  <Col smOffset={2} sm={10}>
                    <Checkbox>Remember me</Checkbox>
                  </Col>
                </FormGroup>

                <FormGroup>
                  <Col smOffset={2} sm={10}>
                    <Button type="submit">
                      Sign in
                    </Button>
                  </Col>
                </FormGroup>
              </Form>
            );

            
          

# Props

Form (only needed for horizontal or inline forms)

NameTypeDefaultDescription
bsClassstring'form'Base CSS class and prefix for the component. Generally one should only change bsClass to provide new, non-Bootstrap, CSS styles for a component.
componentClasselementType'form'
allowAutoCompletebooleanfalseTurns on auto complete in form controls. Disabled by default.
horizontalbooleanfalse
inlinebooleanfalse