Usage of Columns in dash bootstrap components example

Question

The (for instance) "horizontal form" code example of the Form component of the dash bootstrap components documentation (https://dash-bootstrap-components.opensource.faculty.ai/docs/components/form/) looks like this:

# ...
email_input = dbc.Row(
    [
        dbc.Label("Email", html_for="example-email-row", width=2),
        dbc.Col(
            dbc.Input(
                type="email", id="example-email-row", placeholder="Enter email"
            ),
            width=10,
        ),
    ],
    className="mb-3",
)
# ...

Why is the Input component in a Col, but the Label is not?

Answer 1

From dbc docs:

Create a horizontal form by using the Row component. Be sure to specify width on the Label component, and wrap your inputs in Col components.

Label act as "col-type" element when width parameter is specified. So when width=2, width of the label will be two columns and rest of them (10) will be filled by dbc.Col() (in your example you have width=10 but you can omit this parameter).

See the example from Bootstrap docs, uses similar approach (https://getbootstrap.com/docs/5.1/forms/form-control/#readonly-plain-text). Label has col-sm-2 col-form-label classes.