Button Group Justified

by 3axap

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
<div id="bgj_example" class="container">
    <h1>Button Group Justified</h1>
    <p>If I have a 5 buttons, and they contain a bit long text, is there any built-in bootstrap classes prepared to make this look nicer in smaller device? Maybe like make it 2 columns?</p>
    <div class="btn-group btn-group-justified">
        <a href="#" class="btn btn-primary">My Cart</a>
        <a href="#" class="btn btn-primary">Personal Details</a>
        <a href="#" class="btn btn-primary">Delivery Details</a>
        <a href="#" class="btn btn-primary">Delivery Method</a>
        <a href="#" class="btn btn-primary">Confirm Order</a>
    </div>
    <p>Try to resize me to 320px<br/>Current Viewport Width: <span id="viewport_size"></span></p>
</div>

JavaScript

$(document).ready(function(){
    $("#viewport_size").text( $(window).width() + "px" );
});
$(window).resize(function(){
    $("#viewport_size").text( $(window).width() + "px");
});