Bootstrap v4 drops the .btn-group-justified
class, see https://github.com/twbs/bootstrap/issues/17631
How to justify the button for:
<div class="btn-group btn-group-justified" role="group" aria-label="Justified button group"> <a class="btn btn-primary" href="#" role="button">Left</a> <a class="btn btn-primary" href="#" role="button">Middle</a> <a class="btn btn-primary" href="#" role="button">Right</a> </div>
Due to the specific HTML and CSS used to justify buttons (namely display: table-cell ), the borders between them are doubled. In regular button groups, margin-left: -1px is used to stack the borders instead of removing them.
Answer: Use the text-center Class You can simply use the built-in class . text-center on the wrapper element to center align buttons or other inline elements in Bootstrap. It will work in both Bootstrap 3 and 4 versions.
Answer: Use the text-right Class You can simply use the class . text-right on the containing element to right align your Bootstrap buttons within a block box or grid column. It will work in both Bootstrap 3 and 4 versions.
For anyone finding this after Bootstrap 4 Beta was released...
<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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With