---json
{
    "description": "A breakpoint allows to created conditional styling \/ design",
    "page_id": "kqvyo8zrfp1rdlqe9gokp",
    "title": "What are breakpoints ?"
}
---
====== What are breakpoints ? ======


===== About =====
''breakpoints'' defines a set of screen size that can be used in [[docs:styling:conditional|conditional value]] in order to apply styling attribute based on the screen size of the user browser.  


===== List =====



^ Breakpoint ^ Short name ^ Apply to browser size ^ Device Targeted ^ 
| X-Small | xs | <576px | Mobile Phone |
| Small | sm | ≥576px | Ipad |
| Medium | md | ≥768px | Ipad Pro |
| Large (default) | lg | ≥992px | Desktop Screen |
| Extra large | xl | ≥1200px | Large Desktop Screen |
| Extra extra large \\ (new with [[docs:utility:bootstrap#version|bootstrap 5]]) | xxl | ≥1400px  | Extra Large Desktop Screen |


<note>
''combostrap'' follows the breakpoints of [[docs:theme:bootstrap|bootstrap]] (even if you have created your [[howto:bootstrap-custom|own custom bootstrap]])
</note>