Twitter Bootstrap 3: how to use media queries?

by

Bootstrap 3

Here are the selectors used in BS3, if you want to stay consistent:

@media(max-width:767px){}
@media(min-width:768px){}
@media(min-width:992px){}
@media(min-width:1200px){}

Note: FYI, this may be useful for debugging:

<span class="visible-xs">SIZE XS</span>
<span class="visible-sm">SIZE SM</span>
<span class="visible-md">SIZE MD</span>
<span class="visible-lg">SIZE LG</span>

Bootstrap 4

Here are the selectors used in BS4. There is no “lowest” setting in BS4 because “extra small” is the default. I.e. you would first code the XS size and then have these media overrides afterwards.

@media(min-width:576px){}
@media(min-width:768px){}
@media(min-width:992px){}
@media(min-width:1200px){}

Bootstrap 5

@media(min-width:576px){}
@media(min-width:768px){}
@media(min-width:992px){}
@media(min-width:1200px){}
@media(min-width:1400px){}

Update 2021-05-20: Info is still accurate as of versions 3.4.1, 4.6.0, 5.0.0.

More Related Contents:

  1. Bootstrap – Removing padding or margin when screen size is smaller
  2. How can I make Bootstrap columns all the same height?
  3. Media Queries: How to target desktop, tablet, and mobile?
  4. Bootstrap dropdown sub menu missing
  5. Center content in responsive bootstrap navbar
  6. Order columns through Bootstrap4
  7. Center an element in Bootstrap Navbar
  8. Customizing Bootstrap CSS template
  9. Common breakpoints for media queries on a responsive site
  10. CSS media query to target only iOS devices [duplicate]
  11. Applying CSS styles only to certain elements
  12. How to set up fixed width for ?
  13. Meaning of numbers in “col-md-4″,” col-xs-1″, “col-lg-2” in Bootstrap
  14. Bootstrap grid with fixed wrapper – Prevent columns from stacking up
  15. Customize Bootstrap 4’s grid-system Breakpoints
  16. Prevent flex item from exceeding parent height and make scroll bar work
  17. Bootstrap 4 – Navbar items outside the collapse
  18. Bootstrap Element 100% Width
  19. Bootstrap change order of columns
  20. Nested rows with bootstrap grid system?
  21. Which are the most important media queries to use in creating mobile responsive design?
  22. Django Forms and Bootstrap – CSS classes and
  23. Offsetting columns is not working (Bootstrap v4.0.0-beta)
  24. Centering the image in Bootstrap
  25. LESS mixin a variable class name
  26. How to control number of items per row using media queries in Flexbox?
  27. Media Query grouping instead of multiple scattered media queries that match
  28. Less and Bootstrap: how to use a span3 (or spanX [any number]) class as a mixin?
  29. Custom CSS being overridden by Bootstrap CSS
  30. Turning off Twitter Bootstrap Navbar Transition animation

Leave a Comment