Responsive bootstrap buttons?

Question

css

Hello. Bootstrap has different button sizes btn-xs,sm,md,lg how to make the xs button on the small screen and on the big md for example? Without js.

Answer 1

@media (max-width: 767px) {
        /*xs*/
        .btn {
            padding: 1px 5px;
            font-size: 12px;
            line-height: 1.5;
            border-radius: 3px;
        }
    }
    @media (min-width: 768px) and (max-width: 991px) {
        /*sm*/
        .btn {
            padding: 5px 10px;
            font-size: 12px;
            line-height: 1.5;
            border-radius: 3px;
        }
    }
    @media (min-width: 992px) and (max-width: 1199px) {
        /*md*/
        .btn {
            padding: 6px 12px;
            font-size: 14px;
            line-height: 1.42857143;
            border-radius: 4px;
        }
    }
    @media (min-width: 1200px) {
        /*lg*/
        .btn {
            padding: 10px 16px;
            font-size: 18px;
            line-height: 1.3333333;
            border-radius: 6px;
        }
    }