Bootstrap: Feature Request: .input-group-between

[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

[Kramb]

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

[rkieru]

@Kramb - I had not considered simply applying both classes to the wrapper; that's a great solution within the existing CSS... but do you think it is a little confusing in terms of comprehension? Defining something as both an append and a prepend seems less coherent than offering the clarity of a distinct class.

[mdo]

Moving to a single class for that is dependent on how complex the selectors get. We might end up with that dual-class situation, but hopefully not :). Will look into it more after v4.0 ships.

[vanillajonathan]

Can we add a example that uses both .input-group-prepend and .input-group-append to the documentation?

[vanillajonathan]

Moving to a single class for that is dependent on how complex the selectors get. We might end up with that dual-class situation, but hopefully not :). Will look into it more after v4.0 ships.

@mdo Now that v4.0 have shipped, have you looked into it?

[vanillajonathan]

@mdo, Now with Bootstrap 4.5.0 released that updated the documentation and with pull request #30180 merged maybe it is time to revisit this?