Bootstrap btn-toolbar justified buttons (like btn-group btn-group-justified)

Question

End goal: Have X buttons covering full width of the div (justified) with margin between each button. So like '.btn-group .btn-group-justified', but with margin. Bootply

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="btn-group btn-group-justified" role="group">
    <div class="btn-group" role="group">
        <button type="button" class="btn btn-default">Yes</button>
    </div>
    <div class="btn-group" role="group">
        <button type="button" class="btn btn-default">No</button>
    </div>
</div>

While searching, I found this SO solution: https://stackoverflow.com/a/33315549/5003918

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="btn-toolbar">
    <button type="button" id="btnSubmit" class="btn btn-success btn-sm">Yes</button>
    <button type="button" id="btnCancel" class="btn btn-danger btn-sm">No</button>
</div>

This gives me the desired margin between the buttons, but does not give me the justified feature.

If I try to add '.btn-block' to the buttons, then they become width width, but each on a different line.

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="btn-toolbar text-center">
    <button type="button" id="btnSubmit" class="btn btn-primary btn-sm btn-block"><i class='glyphicon glyphicon-ok'></i> Yes</button>
    <button type="button" id="btnCancel" class="btn btn-primary btn-sm btn-block"><i class='glyphicon glyphicon-remove'></i> No</button>
</div>

There is a similar SO question, but does not have a solution.

Bootply

Conga Conga · Accepted Answer · 2017-06-29T18:41:22

Is this what you are after? It requires some CSS styling to add space between the buttons.

.btn-group {
  padding-left: 5px;
  padding-right: 5px;
}

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="btn-group-justified" role="group">
    <div class="btn-group" role="group">
        <button type="button" class="btn btn-primary">Yes</button>
    </div>
    <div class="btn-group" role="group">
        <button type="button" class="btn btn-primary">No</button>
    </div>
</div>

Bootstrap btn-toolbar justified buttons (like btn-group btn-group-justified)

1 Answers