---
title: "Bootstrap 3 Media Queries | Bart Sallé"
description: "Ontdek hoe je met Bootstrap 3 media queries jouw responsieve webdesign perfectioneert. Gebruik aangepaste breakpoints voor elk project!"
url: https://www.bartsalle.nl/blog/bootstrap-3-media-queries/
language: nl
---

[Home](https://www.bartsalle.nl/)/[Blog](https://www.bartsalle.nl/blog/)/Bootstrap 3 Media Queries
CSS

# Bootstrap 3 Media Queries

10 december 2015 CSS

![Bootstrap 3 Media Queries](https://www.bartsalle.nl/beheer/storage/uploads/2026/09/17/media-queries_uid_6aabe1fc53c0b.png)

Uiteraard terug te vinden in Bootstrap zelf maar voor het gemak even opgesomd. Bedenk echter altijd per project of je ze wel nodig hebt. Vaak heb je aan minder genoeg of kun je beter andere breakpoints gebruiken.

Aanrader is [het boekje van Ethan Marcotte](https://www.bartsalle.nl/blog/boek-review-responsive-web-design-door-ethan-marcotte/) over Responsive Webdesign.

```
/*==================================================
=            Bootstrap 3 Media Queries             =
==================================================*/


    /*==========  Mobile First Method  ==========*/

    /* Custom, iPhone Retina */ 
    @media only screen and (min-width : 320px) {

    }

    /* Extra Small Devices, Phones */ 
    @media only screen and (min-width : 480px) {

    }

    /* Small Devices, Tablets */
    @media only screen and (min-width : 768px) {

    }

    /* Medium Devices, Desktops */
    @media only screen and (min-width : 992px) {

    }

    /* Large Devices, Wide Screens */
    @media only screen and (min-width : 1200px) {

    }



    /*==========  Non-Mobile First Method  ==========*/

    /* Large Devices, Wide Screens */
    @media only screen and (max-width : 1200px) {

    }

    /* Medium Devices, Desktops */
    @media only screen and (max-width : 992px) {

    }

    /* Small Devices, Tablets */
    @media only screen and (max-width : 768px) {

    }

    /* Extra Small Devices, Phones */ 
    @media only screen and (max-width : 480px) {

    }

    /* Custom, iPhone Retina */ 
    @media only screen and (max-width : 320px) {

    }
```

[Vraag advies over dit onderwerp](https://www.bartsalle.nl/contact/#form)

### Vraag over dit artikel?

Loop je ergens tegenaan of wil je hulp bij iets vergelijkbaars?

[Neem contact op](https://www.bartsalle.nl/contact/#form)

### Categorieën

- [CSS](https://www.bartsalle.nl/blog/?categorie=css)

Meer lezen

## Gerelateerde artikelen

Algemeen

### Ik wil web developer worden maar welke opleiding of cursus kan ik dan het beste volgen?

25 september 2022 Lees meer

[Ik wil web developer worden maar welke opleiding of cursus kan ik dan het beste volgen?](https://www.bartsalle.nl/blog/ik-wil-web-developer-worden-maar-welke-opleiding-of-cursus-kan-ik-dan-het-beste-volgen/)

CSS

### Sticky elementen zonder javascript

29 januari 2022 Lees meer

[Sticky elementen zonder javascript](https://www.bartsalle.nl/blog/sticky-elementen-zonder-javascript/)

CSS

### Responsive kolomvolgorde aanpassen in Bootstrap 4

15 juni 2020 Lees meer

[Responsive kolomvolgorde aanpassen in Bootstrap 4](https://www.bartsalle.nl/blog/responsive-kolomvolgorde-aanpassen-in-bootstrap-4/)