Button Group - Prevent Buttons from Splitting or Wrapping in small spaces

Stack Overflow post 24678558

by bizamajig

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<div class="col-sm-4 col-sm-offset-4">
    <div id="switch-forms" class="btn-group btn-group-justified">
        <div class="btn-group">
            <button type="button" id="login_click" class="btn btn-default active" data-toggle="collapse"  data-target=".class1">Login</button>
        </div>

        <div class="btn-group">
            <button type="button" id="register_click" class="btn btn-default" data-toggle="collapse" data-target=".class1">Register</button>
        </div>
    </div>
</div>
<div class="col-sm-4 col-sm-offset-4">
    <div class="class1 collapse in">123</div>
    <div class="class1 collapse">321</div>
</div>

CSS

#register_form { display: none; }

JavaScript

$('#switch-forms .btn').on('click', function() {
    $('#switch-forms .btn').removeClass('active');
    $(this).addClass('active');
});