Media Query to Match Bootstrap -xs, -sm, etc. modifiers?

Question

I'm trying to write a media query to match the same items that are being shown/hidden using hidden-xs or visible-sm. What sort of media query can do this? Or how can I conditionally center something (for example) based on those modifiers?

Answer 1

Based on your Bootstrap helper class, logically you can use the below media query.

.hidden-xs targets elements within 768px and hides it, .visible-md will target above 768px and within 992px.

Visible-sm

@media (min-width: 768px) and (max-width: 992px) {
  .center-block {
    display: block;
    margin-left: auto;
    margin-right: auto;
  }
}

Hidden-xs

@media (max-width: 768px) {
  .center-block {
    display: block;
    margin-left: auto;
    margin-right: auto;
  }
}