Feature Request: .input-group-between
See original GitHub issueWith 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
.
Issue Analytics
- State:
- Created 6 years ago
- Reactions:3
- Comments:7 (6 by maintainers)
Combining both
.input-group-append
and.input-group-prepend
on the.input-group-text
wrapper produces the same result.input-group-text Between Two Inputs
Can we add a example that uses both
.input-group-prepend
and.input-group-append
to the documentation?