Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.

Utilities

We recommend sticking to margin-bottom utilities, and using a single direction throughout the form for consistency.

import React from 'react';
import { Button, Form, InputGroup } from 'react-bootstrap';

const FormUtilities = () => {
  return (
    <Form>
        <Form.Group className="mb-3" controlId="formGroupExampleInput">
            <Form.Label>Example label</Form.Label>
            <Form.Control type="text" placeholder="Example input placeholder" />
        </Form.Group>
        <Form.Group className="mb-3" controlId="formGroupExampleInput2">
            <Form.Label>Another label</Form.Label>
            <Form.Control type="text" placeholder="Another input placeholder" />
        </Form.Group>
    </Form>
  );
}

export default FormUtilities;

<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.

Form grid

More complex forms can be built using the grid components. Use these for form layouts that require multiple columns, varied widths, and additional alignment options.

Preview

Jsx

import React from 'react';
import { Col, Form, Row } from 'react-bootstrap'

const FormGridExample = () => {
  return (
    <Form>
        <Row>
            <Col>
                <Form.Control placeholder="First name" />
            </Col>
            <Col>
                <Form.Control placeholder="Last name" />
            </Col>
        </Row>
    </Form>
  );
}

export default FormGridExample;

<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.

Complex Form Grid

More complex layouts can also be created with the grid system.

Preview

Jsx

import React from 'react';
import { Col, Form, Row } from 'react-bootstrap'

const FormGridComplexExample = () => {
  return (
    <Form>
        <Row className="mb-3">
            <Form.Group as={Col} controlId="formGridEmail">
                <Form.Label>Email</Form.Label>
                <Form.Control type="email" placeholder="Enter email" />
            </Form.Group>

            <Form.Group as={Col} controlId="formGridPassword">
                <Form.Label>Password</Form.Label>
                <Form.Control type="password" placeholder="Password" />
            </Form.Group>
        </Row>

        <Form.Group className="mb-3" controlId="formGridAddress1">
            <Form.Label>Address</Form.Label>
            <Form.Control placeholder="1234 Main St" />
        </Form.Group>

        <Form.Group className="mb-3" controlId="formGridAddress2">
            <Form.Label>Address 2</Form.Label>
            <Form.Control placeholder="Apartment, studio, or floor" />
        </Form.Group>

        <Row className="mb-3">
            <Form.Group as={Col} controlId="formGridCity">
                <Form.Label>City</Form.Label>
                <Form.Control />
            </Form.Group>

            <Form.Group as={Col} controlId="formGridState">
                <Form.Label>State</Form.Label>
                <Form.Select defaultValue="Choose...">
                    <option>Choose...</option>
                    <option>...</option>
                </Form.Select>
            </Form.Group>

            <Form.Group as={Col} controlId="formGridZip">
                <Form.Label>Zip</Form.Label>
                <Form.Control />
            </Form.Group>
        </Row>

        <Form.Group className="mb-3" id="formGridCheckbox">
            <Form.Check type="checkbox" label="Check me out" />
        </Form.Group>

        <Button variant="primary" type="submit">
            Sign in
        </Button>
    </Form>

  );
}

export default FormGridComplexExample;

<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.

Horizontal form

Create horizontal forms with the grid by adding as=Row to form groups and using Col to specify the width of your labels and controls. Be sure to add the column prop to your FormLabels as well so they’re vertically centered with their associated form controls.

At times, you maybe need to use margin or padding utilities to create that perfect alignment you need. For example, we’ve removed the padding-top on our stacked radio inputs label to better align the text baseline.

Preview

Jsx

import React from 'react';
import { Button, Col, Form, Row } from 'react-bootstrap';

const HorizontalFormExample = () => {
  return (
    <Form>
      <Form.Group as={Row} className="mb-3" controlId="formHorizontalEmail">
        <Form.Label column sm={2}>
          Email
        </Form.Label>
        <Col sm={10}>
          <Form.Control type="email" placeholder="Email" />
        </Col>
      </Form.Group>

      <Form.Group as={Row} className="mb-3" controlId="formHorizontalPassword">
        <Form.Label column sm={2}>
          Password
        </Form.Label>
        <Col sm={10}>
          <Form.Control type="password" placeholder="Password" />
        </Col>
      </Form.Group>
      <fieldset>
        <Form.Group as={Row} className="mb-3">
          <Form.Label as="legend" column sm={2}>
            Radios
          </Form.Label>
          <Col sm={10}>
            <Form.Check
              type="radio"
              label="first radio"
              name="formHorizontalRadios"
              id="formHorizontalRadios1"
            />
            <Form.Check
              type="radio"
              label="second radio"
              name="formHorizontalRadios"
              id="formHorizontalRadios2"
            />
            <Form.Check
              type="radio"
              label="third radio"
              name="formHorizontalRadios"
              id="formHorizontalRadios3"
            />
          </Col>
        </Form.Group>
      </fieldset>
      <Form.Group as={Row} className="mb-3" controlId="formHorizontalCheck">
        <Col sm={{ span: 10, offset: 2 }}>
          <Form.Check label="Remember me" />
        </Col>
      </Form.Group>

      <Form.Group as={Row} className="mb-3">
        <Col sm={{ span: 10, offset: 2 }}>
          <Button type="submit">Sign in</Button>
        </Col>
      </Form.Group>
    </Form>

  );
}

export default HorizontalFormExample;

<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.

Inline forms

Set column width in Row just like - <Row lg='auto'> to create responsive horizontal layouts.

Preview

Jsx

import React from 'react';
import { Button, Col, Form, InputGroup, Row } from 'react-bootstrap';

const InlineForm = () => {
  return (
    <Form>
        <Row lg="auto" className="align-items-center">
            <Col sm={12} className="my-1">
                <Form.Label htmlFor="inlineFormInputGroupUsername" visuallyHidden>
                    Username
                </Form.Label>
                <InputGroup>
                    <InputGroup.Text>@</InputGroup.Text>
                    <Form.Control
                        id="inlineFormInputGroupUsername"
                        placeholder="Username"
                    />
                </InputGroup>
            </Col>
            <Col sm={12} className="my-1">
                <Form.Select defaultValue="Choose...">
                    <option>Choose...</option>
                    <option value={1}>1</option>
                    <option value={2}>2</option>
                    <option value={3}>3</option>
                </Form.Select>
            </Col>
            <Col sm={12} className="my-1">
                <Form.Check
                    type="checkbox"
                    id="autoSizingCheck2"
                    label="Remember me"
                />
            </Col>
            <Col sm={12} className="my-1">
                <Button type="submit">Submit</Button>
            </Col>
        </Row>
    </Form>
  );
}

export default InlineForm;

<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.

Form with icon

Place an icon inside add-on on either side of an input. You may also place one on right side of an input.

Preview

Jsx

import React from 'react';
import { Button, Form, FormGroup, InputGroup } from 'react-bootstrap';

const FormWithIcons = () => {
  return (
    <Form>
        <FormGroup className="mb-3">
            <Form.Label htmlFor="exampleInputuname_1">User Name</Form.Label>
            <InputGroup>
                <InputGroup.Text><i className="fa fa-user" /></InputGroup.Text>
                <Form.Control type="text" id="exampleInputuname_1" placeholder="Username" />
            </InputGroup>
        </FormGroup>
        <FormGroup className="mb-3">
            <Form.Label htmlFor="exampleInputEmail_1">Email address</Form.Label>
            <InputGroup>
                <InputGroup.Text><i className="fa fa-inbox" /></InputGroup.Text>
                <Form.Control type="email" id="exampleInputEmail_1" placeholder="Enter email" />
            </InputGroup>
        </FormGroup>
        <FormGroup className="mb-3">
            <Form.Label htmlFor="exampleInputpwd_1">Password</Form.Label>
            <InputGroup>
                <InputGroup.Text><i className="fa fa-lock" /></InputGroup.Text>
                <Form.Control type="password" id="exampleInputpwd_1" placeholder="Enter email" />
            </InputGroup>
        </FormGroup>
        <FormGroup className="mb-3">
            <Form.Label htmlFor="exampleInputpwd_2">Confirm Password</Form.Label>
            <InputGroup>
                <InputGroup.Text><i className="fa fa-lock" /></InputGroup.Text>
                <Form.Control type="password" id="exampleInputpwd_2" placeholder="Enter email" />
            </InputGroup>
        </FormGroup>
        <FormGroup className="mb-3">
            <Form.Label>Gender</Form.Label>
            <Form.Check
                type="radio"
                label="M"
                name="radio_1"
                id="radio_1"
            />
            <Form.Check
                type="radio"
                label="F"
                name="radio_2"
                id="radio_2"
                defaultChecked
            />
        </FormGroup>
        <FormGroup className="mb-3">
            <Form.Check label="Remember me" defaultChecked />
        </FormGroup>
        <Button variant="primary" type="submit" className="me-1">Submit</Button>
        <Button variant="light" type="submit">Cancel</Button>
    </Form>

  );
}

export default FormWithIcons;

<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.

Form Element

Utilities

Form grid

Complex Form Grid

Horizontal form

Inline forms

Form with icon