Issue
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/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<div class="btn-group" role="group" id="indicative">
<button type="button" class="btn btn-outline-primary shadow-none disabled" id="indicative-present">present</button>
<button type="button" class="btn btn-outline-primary shadow-none disabled" id="indicative-preterite">preterite</button>
<button type="button" class="btn btn-outline-primary shadow-none disabled" id="indicative-imperfect">imperfect</button>
<button type="button" class="btn btn-outline-primary shadow-none disabled" id="indicative-conditional">conditional</button>
<button type="button" class="btn btn-outline-primary shadow-none disabled" id="indicative-future">future</button>
</div>
Solution
Welcome to flexbox!
Also, to make things a little less cramped...
And for the sake of this demo...
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<div class="d-flex bg-light border py-1" id="indicative">
<button type="button" id="indicative-present"
class="btn btn-outline-primary shadow-none disabled flex-fill mx-1">present</button>
<button type="button" id="indicative-preterite"
class="btn btn-outline-primary shadow-none disabled flex-fill mx-1">preterite</button>
<button type="button" id="indicative-imperfect"
class="btn btn-outline-primary shadow-none disabled flex-fill mx-1">imperfect</button>
<button type="button" id="indicative-conditional"
class="btn btn-outline-primary shadow-none disabled flex-fill mx-1">conditional</button>
<button type="button" id="indicative-future"
class="btn btn-outline-primary shadow-none disabled flex-fill mx-1">future</button>
</div>
Answered By - isherwood
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.