Search code examples
csstwitter-bootstrapbuttonbootstrap-4border

Bootstrap button groups with separators

How to get Bootstrap button groups with a border line separator between each button?

<div class="btn-group" role="group" aria-label="Button group with nested dropdown">
  <button type="button" class="btn btn-secondary">1</button>
  <button type="button" class="btn btn-secondary">2</button>
</div>

https://getbootstrap.com/docs/4.6/components/button-group

The @padaleiana solution is working fine! I used a btn-light disabled button as separator.

enter image description here

Solution

  • Workaround:

    Create a button with mr-0, ml-0, pl-0 and pr-0 classes (margin and padding left and right = 0), and with disabled attribute (otherwise the "separator" will not appear!)

    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="btn-group" role="group" aria-label="Button group with nested dropdown">
  <button type="button" class="btn btn-secondary">1</button>
  <button type="button" class="btn btn-secondary mr-0 ml-0 pr-0 pl-0" disabled></button>
  <button type="button" class="btn btn-secondary">2</button>
  <button type="button" class="btn btn-secondary mr-0 ml-0 pr-0 pl-0" disabled></button>
  <button type="button" class="btn btn-secondary">3</button>
</div>