bootstrap add a css class in media query

I have a button group div #xxx

In side my css class file , I am trying to write a media query

@media (min-width: 768px) and (max-width: 992px) {
    div#xxx {
         - here I need to add "btn-group-lg" class
    }
}


@media (min-width: 992px) {
     div#xxx {
         - here I need to add "btn-group-sm" class
   
}

I am not able to do so, is there any way of adding a css class inside css file
yadavdepAsked:
Who is Participating?

[Webinar] Streamline your web hosting managementRegister Today

x
 
Alexandre SimõesConnect With a Mentor Manager / Technology SpecialistCommented:
Well, it doesn't work like that.
Unless you want to do that with javascript, your pure css way to do that is to hide/show the groups depending on the media size:
  <body>
    <div class="hidden-xs btn-group btn-group-lg">
      <button type="button" class="btn btn-default">Left</button>
      <button type="button" class="btn btn-default">Middle</button>
      <button type="button" class="btn btn-default">Right</button>
    </div>
    <br/>
    <div class="hidden-lg btn-group btn-group-xs">
      <button type="button" class="btn btn-default">Left</button>
      <button type="button" class="btn btn-default">Middle</button>
      <button type="button" class="btn btn-default">Right</button>
    </div>
  </body>

Open in new window

0
 
Alexandre SimõesManager / Technology SpecialistCommented:
I'm not sure if I understood what you want but...
You're using SASS?
And you have to style a div like: <div id="xxx" class="btn-group-sm">

In SASS you can do:
@media (min-width: 992px) {
     div#xxx {
         &.btn-group-sm {

         }
}

Open in new window

& before the class name means that that class is at the same level as the "container"
0
 
yadavdepAuthor Commented:
I am in an asp.net project and in  an css file I want to add a specific class to my div on a specific screen size .
If the screen is small then I want to add other class  "btn-group-sm"
0
All Courses

From novice to tech pro — start learning today.