CODEWITHSUNDEEP
csstwitter-bootstrapbuttonbootstrap-4border
London Smith
London Smith

Reputation: 1659

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

Upvotes: 2

Views: 4497

Answers (4)

Liero
Liero

Reputation: 27338

Following CSS does it neatly

.btn-group-separators > .btn {
    margin-left: 0 !important;
}
.btn-group-separators > .btn:not(:last-child) {
    margin-right: 2px;
}
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>

<div class="btn-group btn-group-separators">
  <button class="btn btn-secondary">1</button>
  <button class="btn btn-secondary">2</button>
  <button class="btn btn-secondary">3</button>
</div>

Upvotes: 1

user2562940
user2562940

Reputation: 36

Could just add class "btn-outline-secondary" or which ever one suites your needs to each button... so for example:-

<div class="btn-group btn-group-sm">
   <button class="btn btn-light btn-outline-secondary btn-sm">Btn One</button>
   <button class="btn btn-light btn-outline-secondary btn-sm">Btn Two</button>
   <button class="btn btn-light btn-outline-secondary btn-sm">Btn Three</button>
</div>

Upvotes: 0

Jens.Huehn_at_SlideFab.com
Jens.Huehn_at_SlideFab.com

Reputation: 747

An alternative to padaleiana's answer is the following, which is not using HTML button tags. Thus, it avoids problems, when jQuery (or other Javascripts) iterates buttons:

<div class="alert alert-dark m-0 px-0"></div>


<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>
  <div class="alert alert-dark m-0 px-0"></div>
  <button type="button" class="btn btn-secondary">2</button>
  <div class="alert alert-dark m-0 px-0"></div>
  <button type="button" class="btn btn-secondary">3</button>
</div>

Upvotes: 5

padaleiana
padaleiana

Reputation: 1074

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>

Upvotes: 5

Related Questions