React Bootstrap adjust width of text inputs

Question

I am trying to create a row something like shown below:

Below is my React component code for "Row":

  /*
   * The render method of this component
   */
  render() {
      return (
        <form className="form-inline">
            <FormGroup>
              <InputGroup>
                <InputGroup.Addon>
                <input name="cb" type="checkbox" value={this.state.cb} onChange={this.handleInputChange} />
                </InputGroup.Addon>
                <div>
                <FormControl name="remarks" type="text" value={this.state.remarks} onChange={this.handleInputChange} />
                <FormControl name="amount" type="text" value={this.state.amount} onChange={this.handleInputChange} />
                </div>
              </InputGroup>
            </FormGroup>
        </form>
      );
  }
}

The problem is I want to increase the width of the "input text type" fields, however may be being not a CSS champ, I am not able to increase it. Asking here after quite some time of Googling and frustration :)

Anyone to help? Thanks

Answer 1

And yes I got the solution:

As described here:

May require custom widths: Inputs and selects have width: 100%; applied by default in Bootstrap. Within inline forms, we reset that to width: auto; so multiple controls can reside on the same line. Depending on your layout, additional custom widths may be required.

So, one has to give custom width to all elements to adjust their widths and hence I used following CSS:

.form-inline {
  width: 100%;
}

.form-group {
  width: 90%;
}

.input-group {
  width: 90% !important;
}

.form-control {
  width: 50% !important;
}

span.input-group-addon {
  width: 50px !important;
}

to achieve good looking width for my table:

Answer 2

You can add className='w-50' to the FormControl Component

      <FormControl
        className="w-50"
        name="remarks"
        type="text"
        value={this.state.remarks}
        onChange={this.handleInputChange}
      />
      <FormControl
        className="w-50"
        name="amount"
        type="text"
        value={this.state.amount}
        onChange={this.handleInputChange}
      />

Or you can simply add bootstrap grid to the page

refer the below link for react bootstrap grid

React Bootstrap Grid