在小屏幕上删除bootstrap .btn-group

Question

I am using below HTML tags to generate list of buttons and using .btn-group to group the buttons together.

<div class="btn-group mt-30">
    <a class="btn btn-border-d btn-circle" href="#">
        exmaple 1
    </a>
    <a class="btn btn-border-d btn-circle" href="#">
        example 2
    </a>
    <a class="btn btn-border-d btn-circle" href="#">
        example 3
    </a>
</div>

which generates the view like

But on viewing the page on small device like mobile, the view is rendered as

On small devices, I want to remove .btn-group class because on small devices, I want to render each button in a new line like

Removing .btn-group from div renders view as shown in 3rd image.

How can I apply .btn-group on large devices only, ie, with md or lg and diable it on sm , xs ?

Answer 1

You should overwrite .btn-group .btn on small devices:

@media (max-width: 760px) {
    .btn-group .btn.btn-circle {
        border-radius: 10px;
        display: block;
        float: none;
    }
}

Answer 2

@Justinas' answer is probably better for this case, but if you wanted to actually have different markup for the different sized displays, you could use Bootstrap's Responsive Utilities .

<div class="btn-group mt-30 hidden-sm hidden-xs">
    <a class="btn btn-border-d btn-circle" href="#">
        exmaple 1
    </a>
    <a class="btn btn-border-d btn-circle" href="#">
        example 2
    </a>
    <a class="btn btn-border-d btn-circle" href="#">
        example 3
    </a>
</div>

And on small devices:

<div class="visible-sm-block visible-xs-block">
    <a class="btn btn-border-d btn-circle" href="#">
        exmaple 1
    </a>
    <a class="btn btn-border-d btn-circle" href="#">
        example 2
    </a>
    <a class="btn btn-border-d btn-circle" href="#">
        example 3
    </a>
</div>