Bootstrap 4 Button Group wrapping fix border-radius

Question

I'm using Bootstrap 4.3.1 if that makes any difference.

I have a button group that looks like this:

<div class="row mt-3">
    <div class="col text-center">
        <div id="alphabetGroup" class="btn-group flex-wrap" role="group">
            <button id="btnHash" type="button" class="btn btn-outline-dark">#</button>
            <button id="btnA" type="button" class="btn btn-outline-dark">A</button>
            <button id="btnB" type="button" class="btn btn-outline-dark">B</button>
            <button id="btnC" type="button" class="btn btn-outline-dark">C</button>
            <button id="btnD" type="button" class="btn btn-outline-dark">D</button>
            <button id="btnE" type="button" class="btn btn-outline-dark">E</button>
            <button id="btnF" type="button" class="btn btn-outline-dark">F</button>
            <button id="btnG" type="button" class="btn btn-outline-dark">G</button>
            <button id="btnH" type="button" class="btn btn-outline-dark">H</button>
            <button id="btnI" type="button" class="btn btn-outline-dark">I</button>
            <button id="btnJ" type="button" class="btn btn-outline-dark">J</button>
            <button id="btnK" type="button" class="btn btn-outline-dark">K</button>
            <button id="btnL" type="button" class="btn btn-outline-dark">L</button>
            <button id="btnM" type="button" class="btn btn-outline-dark">M</button>
            <button id="btnN" type="button" class="btn btn-outline-dark">N</button>
            <button id="btnO" type="button" class="btn btn-outline-dark">O</button>
            <button id="btnP" type="button" class="btn btn-outline-dark">P</button>
            <button id="btnQ" type="button" class="btn btn-outline-dark">Q</button>
            <button id="btnR" type="button" class="btn btn-outline-dark">R</button>
            <button id="btnS" type="button" class="btn btn-outline-dark">S</button>
            <button id="btnT" type="button" class="btn btn-outline-dark">T</button>
            <button id="btnU" type="button" class="btn btn-outline-dark">U</button>
            <button id="btnV" type="button" class="btn btn-outline-dark">V</button>
            <button id="btnW" type="button" class="btn btn-outline-dark">W</button>
            <button id="btnX" type="button" class="btn btn-outline-dark">X</button>
            <button id="btnY" type="button" class="btn btn-outline-dark">Y</button>
            <button id="btnZ" type="button" class="btn btn-outline-dark">Z</button>
        </div>
    </div>
</div>

When looking on desktop, or any device that has a wide enough screen, it looks like this:

Alphabet Button Group

Now, when you go to a smaller screen, or mobile, it wraps around and instead looks like this:

Wrapped Button Group

I'm fine with how this looks, however there is something I would like to change:

• I can make the top-left (first button) and bottom-right (last button) have the proper rounded corners, but how would I do this to the bottom-left and top-right buttons? Depending on the width of the window, the buttons themselves are not always the same, and I don't want to force group splitting (multiple groups at set breakpoints, etc).

Here's a JSFiddle you can play around with. For some reason it doesn't justify the buttons like in my own code, but it doesn't really matter - if you make the results pane thinner you can see the button group wrap, and the left side should be justified with the top line. If you can make that first line have border-bottom-left-radius then something similar should be able to be applied to the top right as well.

https://jsfiddle.net/cglatot/yu6w4rkv/1/

Answer 1

#alphabetGroup button:first-child
  {
   border-radius: 8px 0 0 8px;
  }
  #alphabetGroup button:last-child
  {
    border-radius: 0 8px 8px 0;
  }

try something like this..