---
title: "Breakpoints | GoodBarber's Design System"
description: "Breakpoints are the building blocks of responsive design"
canonical_url: "https://www.goodbarber.com/uxdesign/breakpoints/"
lang: nl
---

# Breakpoints | GoodBarber's Design System

[Design System](https://nl.goodbarber.com/uxdesign/)

![](https://portal.ww-cdn.com/portal_static/svg/fapro/solid/grid.b60a521defb3.svg)

[https://nl.goodbarber.com/uxdesign/](https://nl.goodbarber.com/uxdesign/)

![](https://portal.ww-cdn.com/portal_static/svg/fapro/regular/chevron-up.4b0a6b4e88c8.svg)

![](https://portal.ww-cdn.com/portal_static/svg/fapro/regular/chevron-down.e16b9408a703.svg)

![](https://portal.ww-cdn.com/portal_static/svg/fapro/solid/grid.b60a521defb3.svg)

[Overview](https://nl.goodbarber.com/uxdesign/)

- [Foundations](/uxdesign/foundations/)
* Layout
+ [Grid](/uxdesign/grid/)
+ [Spacing](/uxdesign/spacing/)
+ [Breakpoints](/uxdesign/breakpoints/)
+ [Layers](/uxdesign/layers/)
* Graphic elements
+ [Color](/uxdesign/color/)
+ [Typography](/uxdesign/typography/)
+ [Images Aspect Ratios](/uxdesign/images-aspect-ratios/)
+ [Icons](/uxdesign/icons/)
- [Atomic Components](/uxdesign/atomic-components/)
* [Color atom](/uxdesign/atom-color/)
* [Font atom](/uxdesign/atom-font/)
* [Image atom](/uxdesign/atom-image/)
* [Gradient atom](/uxdesign/atom-gradient/)
* [Shape atom](/uxdesign/atom-shape/)
* [Shadow atom](/uxdesign/atom-shadow/)
* [Size atom](/uxdesign/atom-size/)
* [Border atom](/uxdesign/atom-border/)
* [Blur atom](/uxdesign/atom-blur/)
* [Overlay atom](/uxdesign/atom-overlay/)
* [Immersive feedback atom](/uxdesign/atom-immersive-feedback/)
- [UI Components](/uxdesign/ui-components/)
* [Background](/uxdesign/background/)
* [Text Field](/uxdesign/textfield/)
* [Dropdown](/uxdesign/dropdown/)
* [Date & Time Picker](/uxdesign/date-time-picker/)
* [Checkboxes & Radio Button](/uxdesign/checkboxes-radio-button/)
* [Button](/uxdesign/button/)
* [Thumbnail](/uxdesign/thumbnail/)
* [Form](/uxdesign/form/)

# Breakpoints

Foundations

Breakpoints ensure the app’s responsiveness by defining when the design and layout need to change their appearance to accommodate different devices.

[https://portal.ww-cdn.com/portal_static/images/designsystem/videos/breakpoints.81e47a8365c5.mp4](https://portal.ww-cdn.com/portal_static/images/designsystem/videos/breakpoints.81e47a8365c5.mp4)

## Introduction

Breakpoints are a key aspect of responsive design, which is the practice of designing and building websites and applications that look and function well on a wide range of devices and screen sizes. Breakpoints are used to create different layouts for different screen sizes.

Breakpoints are used to determine when the layout of a page should adjust in order to provide the best user experience on different devices. For example, a page might have a different layout when viewed on a desktop computer versus a mobile phone, and breakpoints are used to define at which screen width the layout should change.

When a page is viewed on a device with a screen width that is larger than the largest defined breakpoint, it will use the layout defined for the largest breakpoint. Similarly, when a page is viewed on a device with a screen width that is smaller than the smallest defined breakpoint, it will use the layout defined for the smallest breakpoint. For screen sizes in between the breakpoints, the layout will be determined by the nearest breakpoint.

With the growing number of devices with different screen sizes, responsive design has become a crucial aspect of modern app/web development and breakpoints play a key role in it.

## Responsive Breakpoints

### Summary table

![Breakpoints by device size](https://portal.ww-cdn.com/portal_static/images/designsystem/Foundations-Layout-Breakpoints.690a6f9f5753.png)

*Breakpoints by device size*