Set CSS class equal BootStrap class with media query

Question

Hoping this is a simple CSS question. I have the following BootStrap button which I want to make smaller for smaller screen sizes (see below). In essence I what to change the class to "btn btn-default btn-xs"

<button type="button" class="btn btn-default btn-sm" id="myButton" >
    <span class="glyphicon glyphicon-envelope"></span>
</button>

I assume I have to use a media query. Can I somehow set my class to be equal to the bootstrap classes by using the ID selector? ( see pseudo code below )

@media only screen and (max-width: 450px) {

    #myButton {
        .btn .btn-default .btn-xs // Inject magic here
    }
}

Thanks

Not sure it's a duplicate. Answers I saw create their own CSS for different media sizes. I was wondering if there was a way to still use the default BootStrap CSS classes such as sm and xs by somehow assigning them via the id selector. — Conor, Jul 12 '17 at 00:08

score 1 · Answer 1 · answered Jul 11 '17 at 23:11

1

There are some great answers to your question here: resize buttons responsively in bootstrap

Personally, I like to make buttons size responsively using the view width attribute.

#myButton {
    width: 20vw;
    padding: 10px;
    }

answered Jul 11 '17 at 23:11

Lizzie K

11
4

Thanks, that link is useful – Conor Jul 12 '17 at 00:10

score 0 · Accepted Answer · answered Jul 11 '17 at 23:13

0

Here is the way that you would control the css of #myButton via @media queries.

<button type="button" class="btn btn-default btn-sm" id="myButton" >
    <span class="glyphicon glyphicon-envelope"></span>
</button>

@media only screen and (max-width: 450px) {

    #myButton {
        font-size: 12px;
    }
}

@media only screen and (max-width: 768px) {

    #myButton {
           font-size: 16px; 
    }
}

answered Jul 11 '17 at 23:13

lit

450
4
14

Thanks, this works for me. – Conor Jul 12 '17 at 00:12

Set CSS class equal BootStrap class with media query

2 Answers2

Linked