# Proposed change to UI for Options that involve responsive breakpoints

**URL:** <https://forum.bootstrapstudio.io/t/proposed-change-to-ui-for-options-that-involve-responsive-breakpoints/11276>\
**Category:** Ideas\
**Created:** [April 24, 2024, 4:37am UTC](https://forum.bootstrapstudio.io/t/proposed-change-to-ui-for-options-that-involve-responsive-breakpoints/11276 "2024-04-24T04:37:37Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![printninja](https://forum.bootstrapstudio.io/user_avatar/forum.bootstrapstudio.io/printninja/32/481_2.png) [@printninja](https://forum.bootstrapstudio.io/u/printninja)\
**Post date:** [April 24, 2024, 4:37am UTC](https://forum.bootstrapstudio.io/t/proposed-change-to-ui-for-options-that-involve-responsive-breakpoints/11276/1 "2024-04-24T04:37:37Z")

</div>

When answering [this question](https://forum.bootstrapstudio.io/t/display-none-breakpoints/11275/2) for a new user, it occurred to me that the UI is not visually intuitive when it comes to the XS breakpoint.

Those of us who are experienced BSS users know the first dropdown menu in any option that has responsive breakpoint settings is the XS (mobile) size, but for new users, this is not visibly intuitive. Nor does it seem to be mentioned anywhere in the documentation (though I think it’s explained in the tutorial videos.) I think I figured it out myself, but I can see how some new users not familiar with BSS or Bootstrap could have difficulty with this.

I propose a simple change to the UI would fix this, and make it very clear that the first setting is the XS setting. Just move the breakpoint sizes over, and add XS next to the first one, thusly…

![image](https://forum.bootstrapstudio.io/uploads/default/original/2X/4/488476ea14ff53c289d2ed3517b8d6502ae32109.png)

@martin @gabby

---

<div class="post-metadata">

**Author:** ![JCWEB](https://forum.bootstrapstudio.io/user_avatar/forum.bootstrapstudio.io/jcweb/32/4362_2.png) [@JCWEB](https://forum.bootstrapstudio.io/u/JCWEB)\
**Post date:** [April 24, 2024, 6:16am UTC](https://forum.bootstrapstudio.io/t/proposed-change-to-ui-for-options-that-involve-responsive-breakpoints/11276/2 "2024-04-24T06:16:38Z")

</div>

Hello. These are the little details that make the best software.  
I am always in favour of interface improvements.  
I have only been using BSS for a few months and I am really amazed by the quality of this great software.

---

<div class="post-metadata">

**Author:** ![richards](https://forum.bootstrapstudio.io/user_avatar/forum.bootstrapstudio.io/richards/32/3163_2.png) [@richards](https://forum.bootstrapstudio.io/u/richards)\
**Post date:** [April 24, 2024, 9:51am UTC](https://forum.bootstrapstudio.io/t/proposed-change-to-ui-for-options-that-involve-responsive-breakpoints/11276/3 "2024-04-24T09:51:01Z")

</div>

The problem I can see with this, is that there is no XS Class so it could lead to confusion

---

<div class="post-metadata">

**Author:** ![martin](https://forum.bootstrapstudio.io/user_avatar/forum.bootstrapstudio.io/martin/32/3_2.png) [@martin](https://forum.bootstrapstudio.io/u/martin)\
**Post date:** [April 24, 2024, 12:49pm UTC](https://forum.bootstrapstudio.io/t/proposed-change-to-ui-for-options-that-involve-responsive-breakpoints/11276/4 "2024-04-24T12:49:41Z")

</div>

Adding “XS” will indeed lead to confusion since it existed in the Bootstrap 3 days. Maybe we can add a help tooltip to these options which explains the logic behind the dropdowns and what the default is.

---

<div class="post-metadata">

**Author:** ![printninja](https://forum.bootstrapstudio.io/user_avatar/forum.bootstrapstudio.io/printninja/32/481_2.png) [@printninja](https://forum.bootstrapstudio.io/u/printninja)\
**Post date:** [April 24, 2024, 3:16pm UTC](https://forum.bootstrapstudio.io/t/proposed-change-to-ui-for-options-that-involve-responsive-breakpoints/11276/5 "2024-04-24T15:16:15Z")

</div>

If you hover the mouse over the smallest (mobile) icon in the upper right of the top menu, the tooltip that pops up reads “XS” so the program sort of acknowledges mobile as the XS size. But I also understand the point that there are no XS utility classes in the current version Bootstrap. Not sure what the best solution is.
