React Boostrap edit fields does not respect col-N className

Question

I am trying to create form with the 3 label-edit fields, placed horizontally, all 6 components (label-edit-label-edit-label-edit) should be of equal width and equally spaced. My code is this:

package.json:

{
  "name": "react",
  "version": "1.0.0",
  "description": "React example starter project",
  "keywords": ["react", "starter"],
  "main": "src/index.js",
  "dependencies": {
    "react": "17.0.2",
    "react-dom": "17.0.2",
    "react-scripts": "4.0.0",
    "jquery": "^3.3.1",
    "bootstrap": "^4.1.3",
    "popper.js": "^1.14.3"
  },
  "devDependencies": {
    "@babel/runtime": "7.13.8",
    "typescript": "4.1.3"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  },
  "browserslist": [">0.2%", "not dead", "not ie <= 11", "not op_mini all"]
}

And the React component is:

import "./styles.css";
import bootstrap from "bootstrap"; // eslint-disable-line no-unused-vars
import "../node_modules/bootstrap/dist/css/bootstrap.min.css";

export default function App() {
  return (
    <div className="App">
      <div className="form">
        <div className="row">
          <div className="form-group col-4">
            <label for="gen_ref_num" className="col-2 control-label">
              Serie
            </label>
            <input
              type="text"
              className="col-2 form-control"
              id="gen_ref_num"
            />
          </div>
          <div className="form-group col-4">
            <label for="gen_ref_serie" className="col-2 control-label">
              Number
            </label>
            <input
              type="text"
              className="col-2 form-control"
              id="gen_ref_serie"
            />
          </div>
          <div className="form-group col-4">
            <label for="general_reference" className="col-2 control-label">
              Serie/Number
            </label>
            <input
              type="text"
              className="col-2 form-control"
              id="general_reference"
            />
          </div>
        </div>
      </div>
    </div>
  );
}

(code sandbox https://codesandbox.io/s/musing-lehmann-mockr?file=/src/App.js)

But I am failing. How to make edit fields to fill entire 2 col width and how to make labels to be in one row with edit fields?

Answer 1

You can't nest columns like that. Columns have to be direct children of a row. So if you want the label/input to be half of its col-4 container, create another row inside the container and make them both col-6 of that. i.e. instead of this:

<div className="form-group col-4">
  <label for="gen_ref_num" className="col-2 control-label">
    Serie
  </label>
  <input
    type="text"
    className="col-2 form-control"
    id="gen_ref_num"
  />
</div>

You have this:

<div className="form-group col-4">
  <div className="row">
    <label for="gen_ref_num" className="col-6 control-label">
      Serie
    </label>
    <input
      type="text"
      className="col-6 form-control"
      id="gen_ref_num"
    />
  </div>
</div>