CODEWITHSUNDEEP
twitter-bootstraptwitter-bootstrap-4buttongroup
Michael
Michael

Reputation: 4390

Justified .btn-group with Bootstrap v4-alpha-5

The question asked here addresses justified button group in < alpha-3. It doesn't work in alpha-5 (and I think in alpha-4 also).

From what I gather from the issues list, it has been removed and won't be back.

I'm using SCSS and and potentially flexbox if this provides a better solution.

I would like to use the toggle-state radio-buttons

<div class="btn-group" data-toggle="buttons">
    <label class="btn btn-primary active">
        <input type="radio" name="options" id="option1" autocomplete="off" checked> Radio 1 (preselected)
    </label>
    <label class="btn btn-primary">
        <input type="radio" name="options" id="option2" autocomplete="off"> Radio 2
    </label>
    <label class="btn btn-primary">
        <input type="radio" name="options" id="option3" autocomplete="off"> Radio 3
    </label>
</div>

Is anyone able to provide a solution?

Upvotes: 2

Views: 2147

Answers (2)

falselight
falselight

Reputation: 850

<div class="btn-group d-flex" role="group">
   <a href="" class="btn btn-secondary w-100">Previous</a>
   <a href="" class="btn btn-secondary w-100">Next</a>
</div>

Read https://getbootstrap.com/docs/4.0/migration/#button-group

Upvotes: 6

Kishore Kumar
Kishore Kumar

Reputation: 12874

You can alway add custom css to your code, if its missing

.btn-group-justified {
    display: table;
    width: 100%;
    table-layout: fixed;
    border-collapse: separate;
}
.btn-group-justified .btn,
.btn-group-justified .btn-group {
    float: none;
    display: table-cell;
    width: 1%;
}
.btn-group-justified .btn .btn,
.btn-group-justified .btn-group .btn {
    width: 100%;
}
.btn-group-justified .btn .dropdown-menu,
.btn-group-justified .btn-group .dropdown-menu {
    left: auto;
}

Upvotes: -1

Related Questions