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

Guys, any help? Should be simple for css folks :)

Akshay Lokur
– Akshay Lokur

2017-09-29 07:40:13 +00:00
Commented Sep 29, 2017 at 7:40 — Akshay Lokur
– Akshay Lokur, Commented Sep 29, 2017 at 7:40

Akshay Lokur · Accepted Answer · 2017-10-02 04:00:55Z

14

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:

answered Oct 2, 2017 at 4:00

Akshay Lokur

7,64615 gold badges49 silver badges69 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

2Who · Accepted Answer · 2025-05-08 00:22:09Z

5

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

edited May 8 at 0:22

2Who

217 bronze badges

answered Nov 7, 2021 at 13:34

Krish

1492 silver badges6 bronze badges

Collectives™ on Stack Overflow

React Bootstrap adjust width of text inputs

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related