Skip to content

Feature Request: .input-group-between #25120

@rkieru

Description

@rkieru

With Beta 3 bringing .input-group-append and .input-group-prepend it seems like an opportune moment for one additional group structure: -between. This pattern would ideally be for situations where multiple input fields need to be more visually connected. Such patterns might include:

  • Inputting dimensions: [width][x][height]
  • Inputting time: [hour][:][minutes] or [mm][/][yyyy]

Currently this pattern can be achieved with existing CSS; with the exception that you get either a double border on the left or right of the input field depending on whether you used -prepend or -append. Adding this additional class would be as simple as:

  • Modifying class declarations for ..input-group-append, .input-group-prepend { } to include the new wrapper.
  • Removing the border-radius as well as the left and right border of .input-group-between .input-group-text { }

I have created an example on CodePen to illustrate the current implementation (using both .input-group-prepend and .input-group-append) which results in the aforementioned double-border, as well as the proposed .input-group-between.

https://codepen.io/rkieru/pen/Mrmagb

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