Bootstrap multiline button groups

Question

I have three bootstrap button groups with 3 buttons each. I would like them to come below each other so that it becomes a grid of size 3 X 3. Also there should not be any space between two button rows. What's the best way to do it.

        <div class="btn-group" role="group">
            <button type="button" class="btn btn-default btn-sm">
                <i class="fa fa-arrow-up fa-rotate-315"></i>
            </button>
            <button type="button" class="btn btn-default btn-sm"">
                <i class="fa fa-arrow-up"></i>
            </button>
            <button type="button" class="btn btn-default btn-sm">
                <i class="fa fa-arrow-up fa-rotate-45"></i>
            </button>
        </div>
        <div class="btn-group" role="group">
            <button type="button" class="btn btn-default btn-sm">
                <i class="fa fa-arrow-left"></i>
            </button>
            <button type="button" class="btn btn-default btn-sm">
                <i class="fa fa-home"></i>
            </button>
            <button type="button" class="btn btn-default btn-sm">
                <i class="fa fa-arrow-right"></i>
            </button>
        </div>
        <div class="btn-group" role="group">
            <button type="button" class="btn btn-default btn-sm">
                <i class="fa fa-arrow-down fa-rotate-45"></i>
            </button>
            <button type="button" class="btn btn-default btn-sm">
                <i class="fa fa-arrow-down"></i>
            </button>
            <button type="button" class="btn btn-default btn-sm">
                <i class="fa fa-arrow-down fa-rotate-315"></i>
            </button>
        </div>

Answer 1

You can use display: table; to the btn-group class. may be it will work.

.btn-group{
     display: table;
}