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.
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>