Twitter Bootstrap 3: how to use media queries?

bootstrap media queries
media query
bootstrap 3 media queries less
media queries bootstrap 3
bootstrap 3.4 1 media queries
media query css for all devices
bootstrap responsive
how to make website responsive using media queries

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?

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){}

Update 2019-02-11: BS3 info is still accurate as of version 3.4.0, updated BS4 for new grid, accurate as of 4.3.0.

Default Sizes for Twitter Bootstrap's Media Queries ― Scotch.io, I love Twitter's Bootstrap. I find that when developing with it, either Bootstrap 2 (​2.3.2) or Bootstrap 3, that I always need to apply custom styles at  The bootstrap documentation is a little unclear. Using these @ parameters for min-width is in fact less syntax, not CSS.. You should use the customize utility in Bootstrap (see Media queries breakpoints) to set up what you want these screen-xxx parameters to be (e.g. set screen-sm to be 768px).

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) {

}

Overview · Bootstrap, With Bootstrap 3, we've rewritten the project to be mobile friendly from the start. Instead We use the following media queries in our Less files to create the key  It's basically what I use when creating a new website or webapp. I've also provided links to Github for quick access. Bootstrap 3 Media Query Breakpoints. Bootstrap 3 is a mobile-first front-end framework. I've included the correct order for the Media Queries below, but I've also included at the bottom of them the non-mobile first breakpoints

If you're using LESS or SCSS/SASS and you're using a LESS/SCSS version of Bootstrap, you can use variables as well, provided you have access to them. A LESS translation of @full-decent's answer would be as follows:

@media(max-width: @screen-xs-max){}
@media(min-width: @screen-sm-min){}  /* deprecated: @screen-tablet, or @screen-sm */
@media(min-width: @screen-md-min){}  /* deprecated: @screen-desktop, or @screen-md */
@media(min-width: @screen-lg-min){}  /* deprecated: @screen-lg-desktop, or @screen-lg */

There are also variables for @screen-sm-max and @screen-md-max, which are 1 pixel less than @screen-md-min and @screen-lg-min, respectively, typically for use with @media(max-width).

EDIT: If you're using SCSS/SASS, variables start with a $ instead of a @, so it'd be $screen-xs-max etc.

CSS · Bootstrap, We use the following media queries in our Less files to create the key breakpoints in our grid system. /* Extra small devices (phones, less than 768px) */ /* No  You can use matchMedia and a wrapper library enquire.js which registers media queries and emits events when they are matched/unmatched. Usage Let's use these Bootstrap CSS media queries as an example taken from the docs .

These are the values from Bootstrap3:

/* Extra Small */
@media(max-width:767px){}

/* Small */
@media(min-width:768px) and (max-width:991px){}

/* Medium */
@media(min-width:992px) and (max-width:1199px){}

/* Large */
@media(min-width:1200px){}

twitter-bootstrap-3 - Media queries, The Bootstrap documentation contains LESS definitions for its media queries, but not the old-school CSS values – use the below if you are using  Bootstrap Utility classes using media Queries Bootstrap v4 has various utility classes which display or hide the content on the viewport of the device via media query. These utility classes help in faster mobile-friendly development. Bootstrap 4.0.0 also includes other utility classes which help to toggle content when they are printed.

Here are two examples.

Once the viewport becomes 700px wide or less make all h1 tags 20px.

@media screen and ( max-width: 700px ) {
  h1 {
     font-size: 20px;
  }
}

Make all the h1's 20px until the viewport reaches 700px or larger.

@media screen and ( min-width: 700px ) {
  h1 {
     font-size: 20px;
  }
}

Hope this helps :0)

Default sizes for Twitter Bootstrap 3 media queries, Day after day lots of people start using Bootstrap. 【 Grid System 】 and 【 Media Queries 】 are Bootstrap 3 breakpoints – check it out! Media query is a CSS technique introduced in CSS3. It uses the @media rule to include a block of CSS properties only if a certain condition is true.

The Grid System And Media Queries Breakpoints Of Bootstrap 3, Well organized and easy to understand Web building tutorials with lots of examples of how to use HTML, CSS, JavaScript, SQL, PHP, Python, Bootstrap, Java  Bootstrap | Media queries We use a handful of media queries for delivering different styles sheet to different devices, to create sensible breakpoints for our layouts and interfaces. These breakpoints are mostly based on minimum viewport widths and allow us to scale up elements as the viewport changes.

Responsive Web Design Media Queries, How to use modal closing event in Twitter Bootstrap ? Design and Implement Calculator using jQuery · How to use SASS to create new set of color styles in  Bootstrap 3 Media Query Breakpoints. Bootstrap 3 is a mobile-first front-end framework. I’ve included the correct order for the Media Queries below, but I’ve also included at the bottom of them the non-mobile first breakpoints in case some people aren’t used to the mobile-first methodology since technically both will work.

Bootstrap, Use media queries and pseudo-elements for design and give your mobile users a responsive Introduction to Responsive Web Design: Pseudo-Elements, Media Queries, and More difference between twitter bootstrap 3 and media queries. Bootstrap Icons. For the first time ever, Bootstrap has its own open source SVG icon library, designed to work best with our components and documentation. Bootstrap Icons are designed to work best with Bootstrap components, but they’ll work in any project.

Comments
  • google "media queries" then check how bootstrap has them set up
  • Just 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>
  • +1 for ordering queries by increasing screen sizes, staying consistent with BS3's mobile-first methodology.
  • What about 480px (@screen-xs)? Did that appear later? Got it from here.
  • To be consistent with BS3 use the default screen-size variables per each viewport. See: stackoverflow.com/a/24921600/2817112
  • @brejoc BS3+ is "mobile-first" - the "XS" (mobile) view is the default view in BS3+ ...
  • Here high voted answer uses only min-width , but you have used max-width also , so what is the difference ?, is it necessary ?
  • How does bootstrap know if the phone is in portrait mode?
  • @SuperUberDuper it doesn't. It just deals with elements according to the viewport's horizontal size rather than screen layout.
  • Shouldnt the order be from LOW-to-HIGH?
  • When i want to edit data on .grid.less always is overwrite from main style. Is there any solution or i just need all the style that i have added on the media queries to add !important ?
  • I'm not able to get this to work. The compiler complains if I use anything besides a hard-coded number.
  • @JesseGoodfellow the example above uses LESS syntax; if you're using SASS/SCSS github.com/twbs/bootstrap-sass/blob/master/vendor/assets/…, you'd want $screen-xs-max etc. (And if you're using LESS/SCSS locally but importing the CSS version of Bootstrap, you're out of luck altogether.)
  • @screen-tablet, @screen-desktop, and @screen-lg-desktop have been deprecated. Might be time to update your already-awesome answer. ;-)