Switch Form Layout Depending on Screen Size

[titouandk]

Prerequisites

• I have searched for duplicate or closed feature requests
• I have read the contributing guidelines

Proposal

It would be nice to be able to easily adapt forms layout depending on screen size.

Labels would be on the side of inputs on large screens:

Labels would be on top of inputs on small screens:

Current implementation

The above example, switching between those 2 layouts, has been implemented as follows:

<div class="mb-3 mb-md-1 row">
  <label for="selectRole" class="col-form-label col-12 col-md-3 text-md-end">
    Role
  </label>
  <div class="col-12 col-md-9">
    <select id="selectRole" class="form-select">
      <option value="admin">Admin</option>
    </select>
  </div>
</div>

The problem

This way of doing things requires to use col-form-label instead of form-label on our label. This adds an extra-padding to the top of the label, breaking the spacing when the label is displayed on top of the input.

video.mov

Proposed solution

An ideal solution would be to allow the behavior of our label to change based on the screen size. Our label could behave like a form-label on vertical layouts (small screens), and behave like a col-form-label only on horizontal layouts (larger screens).

Maybe by adding a breakpoint parameter in the class name: col-md-form-label. The behavior of the label would be form-label until the md breakpoint, and col-form-label above it.

Motivation and context

Adapting forms to mobile devices.