Button group overflowing on small viewport

Question

I want to create a group button in a <td> element that'll behave the same on both small and large screens.

This is what I currently have.

<div class="btn-group" role="group">
    <button type="button" class="edit btn btn-warning btn-sm">
        <span class="glyphicon glyphicon-edit" aria-hidden="true"></span>
    </button>
    <button type="button" class="delete btn btn-danger btn-sm">
    <span class="glyphicon glyphicon-trash" aria-hidden="true"></span>
    </button>
</div>

Here's an screenshot to explain what I mean.

Answer 1

apply minimum width to btn-group class on small screen media query