Stop btn-group wrapping buttons

Question

I have a small div that contains a bootstrap horizontal btn-group. The buttons are wrapping because the div is not wide enough to fit it.

How can I stop this and keep the buttons all horizontal and horizontally centred?

Problem:

How it should look:

<div class="vd-text-widget" style="position: absolute; background-color: #eee; width: 10%; height: 15%; left: 10%; top: 50%">

    <div class="btn-group btn-group-lg btn-group-horizontal">
        <button class="btn btn-default">
            <span class="glyphicon glyphicon-th-list"></span>
        </button>
        <button class="btn btn-default">
            <span class="glyphicon glyphicon-header"></span>
        </button>
        <button class="btn btn-default">
            <span class="glyphicon glyphicon-link"></span>
        </button>
        <button class="btn btn-default">
            <span class="glyphicon glyphicon-font"></span>
        </button>
        <button class="btn btn-default">
            <span class="glyphicon glyphicon-text-size"></span>
        </button>
    </div>

    <p>abbnnb </p>
</div>

Edit: Using display: -moz-box works on firefox. Will look into other browser solutions. Any ideas how to make it horizontally centred?

Answer 1

This worked for me:

 <div class="btn-group" style="display: flex">