How can I get spacing between buttons in a justified button group?-CodePudding

I am trying to add spacing between buttons in a Bootstrap button group. I understand this is possible by using a button toolbar instead, however, I cannot work out how to make that justified (ie. fill a width of 100%). This is a feature I need and, as far as I can work out, is only possible with button groups.

The code below creates a bar of buttons that are attached to one another with no spacing. I would like them to appear inline as individual buttons, spaced equally, with widths proportionate to the length of the text.

.btn-group {
  width: 100%;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1 K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2 l" crossorigin="anonymous">

<div  role="group" id="indicative">
  <button type="button"  id="indicative-present">present</button>
  <button type="button"  id="indicative-preterite">preterite</button>
  <button type="button"  id="indicative-imperfect">imperfect</button>
  <button type="button"  id="indicative-conditional">conditional</button>
  <button type="button"  id="indicative-future">future</button>
</div>

CodePudding user response：

Welcome to flexbox!

Also, to make things a little less cramped...

Spacing utilities

And for the sake of this demo...

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1 K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2 l" crossorigin="anonymous">

<div  id="indicative">
  <button type="button" id="indicative-present"
    >present</button>
  <button type="button" id="indicative-preterite"
    >preterite</button>
  <button type="button" id="indicative-imperfect" 
    >imperfect</button>
  <button type="button" id="indicative-conditional" 
    >conditional</button>
  <button type="button" id="indicative-future" 
    >future</button>
</div>