question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Feature Request: .input-group-between

See original GitHub issue

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

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Reactions:3
  • Comments:7 (6 by maintainers)

github_iconTop GitHub Comments

7reactions
Krambcommented, Dec 29, 2017

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

1reaction
vanillajonathancommented, Mar 22, 2019

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

Read more comments on GitHub >

github_iconTop Results From Across the Web

Input group - Bootstrap
Input group. Easily extend form controls by adding text, buttons, or button groups on either side of textual inputs, custom selects, and custom...
Read more >
Bootstrap Input group - examples & tutorial
Responsive Input group built with the latest Bootstrap 5. Extends an input by adding an icon, text, button, or a button group you...
Read more >
Bootstrap: How to place button next to input-group
I can't work out (conforming to "proper bootstrap") how to get a button to sit next to an input-group within a div.
Read more >
Input groups - Bootstrap - University of Houston
Input groups. Extend form controls by adding text or buttons before, after, or on both sides of any text-based <input> . Use .input-group...
Read more >
Input Group · Issue #1478 · vmware/clarity - GitHub
The only issue I'm currently having is setting up an input group like in bootstrap, I am trying to use this in login...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found