Twitter Bootstrap 3: how to use media queries?

Question

I'm using Bootstrap 3 to build a responsive layout where I want to adjust a few font sizes according to the screen size. How can I use media queries to make this kind of logic?

Answer 1

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.

Answer 2

Based on bisio's answer and the Bootstrap 3 code, I was able to come up with a more accurate answer for anyone just looking to copy and paste the complete media query set into their stylesheet:

/* Large desktops and laptops */ @media (min-width: 1200px) {  }  /* Landscape tablets and medium desktops */ @media (min-width: 992px) and (max-width: 1199px) {  }  /* Portrait tablets and small desktops */ @media (min-width: 768px) and (max-width: 991px) {  }  /* Landscape phones and portrait tablets */ @media (max-width: 767px) {  }  /* Portrait phones and smaller */ @media (max-width: 480px) {  }