Skip to content

Custom stacked checkbox label stretches to full width #24888

@jacobmllr95

Description

@jacobmllr95

Operating system and version: Any
Browser and version: Any
Test case: https://getbootstrap.com/docs/4.0/components/forms/#stacked

bootstrap_v4_custom_checkbox_stacked_old

As seen in the picture above, the label of a stacked checkbox stretches to the full with of the parent container. This can cause issues when a user clicks far right from the visible label and accidentally toggles a checkbox or radio.

A simple fix would be to set align-items for the custom-controls-stacked container to flex-start (see picture below).

bootstrap_v4_custom_checkbox_stacked_new

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions