Bootstrap 4 form-check alignment with horizontal label

Vertical alignment between a main horizontal label and checkboxes or radio is wrong.

The main label has the .col-form-label class, which adds a padding-top: padding-top: calc(.375rem + 1px)

The radio buttons have no padding top, so they're too high.

I made this pen to show the issue: https://codepen.io/migli/pen/yPKbwL

The pen also includes a simple css proposal to resolve it.

A horizontal label and control vertical alighment issue can be confirmed here as well. (The "Radios" row)
I think we should not solve this by CSS because CSS will be more complex and more difficult to understand the responsive behaveor. When resize a window to mobile size on your codepen, you can see a slightly larger spacing between the label and first checkbox.

To resolve this issue, just add pt-{breakpoint}-0 to .col-form-label (or .col-form-legend).

<form>
  <fieldset class="form-group">
    <div class="row">
      <legend class="col-form-legend col-sm-2 pt-sm-0">Radios</legend>
      <div class="col-sm-10">                 ^^^^^^^
        <div class="form-check">...</div>

The mobile size spacing can be easily solved with a media query (I edited my pen)

My first idea was yours, but If you remove the label's top padding the label is too close from the previous element, it breaks the vertical alignment: https://codepen.io/migli/pen/mqxQjo

I also noticed that the example code was a bit inconsistent.

The main label for radio is <legend class="col-form-legend col-sm-2">Radios</legend> while the checkbox's main label is <div class="col-sm-2">Checkbox</div>

Perhaps we instead advise folks to simply not use that class on form groups with radios and checks? https://codepen.io/anon/pen/BmORRj

it's a possibility, but it breaks the regularity of the vertical alignment of labels.

The regularity of the alignment isn't my concern I think, and I don't imagine it's the concern of anyone else reporting this issue. The more important part is that this one label matches it's inputs.

it's up to you

Override padding on radio input label

Override padding on radio input label (#24899)

chore: sync with twbs (#1)

Remove .col-form-legend in favor of .col-form-label (#24932)

Sync v-4dev with twbs (#4)

merge after v4-beta3 release

Navigation Menu

Repository navigation

Bootstrap 4 form-check alignment with horizontal label #24844

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Bootstrap 4 form-check alignment with horizontal label #24844

Description

Activity

ysds commented on Nov 22, 2017

migliori commented on Nov 22, 2017

mdo commented on Nov 27, 2017

migliori commented on Nov 28, 2017

mdo commented on Nov 28, 2017

migliori commented on Nov 28, 2017

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions