Feature Request: .input-group-between
Created by: 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 rightborder
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
.