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-radiusas well as the left and rightborderof.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.