Custom Device Screen Size

Hi Folks,

@First: thx for the very great Bootstrap Studio.

What I'm missing - at least don't find neither in the IDE Settings nor in the Forum, Totorials or FAQs/Tipps&Trcks is, to define one or more custom screen sizes.

This is needed for me, as designing mainly for high resolution displays like 1440x900 (1:1) 1920x1080 (1:1) and 3840x2160 (4k/UHD 1:1) or in the next future 8k (1:1). So, thatfor it would be nice to have the possiblity to define Device-Switches, probably with several custom icons to distingiush or one icon with Text-Dropdown Options.

(Remark- for no offense: I've periodically tried to migrate projects i create using pure html/css/javascript to bootstrap, but mostly i'm stopped as it seems to complicated to get it as in the pure development - espacially with dymanically created objects and db/ajax integration - but that will mainly be a matter of experiance, I'll get better with.)

That's my wish so far - bat not the only one ;-).


As long as you follow the code protocol for CSS3, you can create media queries that will work with whatever size you want to use. Even though the program does only have the 5 sizes set up, you can manually create them for any value you want and they will comply. I doubt you will get anything else added for this as BSS is following Bootstrap 4's protocols which only calls for the 5 size settings. The rest you will need to do manually in your custom CSS file.

I second this. I was thinking how helpful this would be. I have an ultrawide monitor, and even on my regular widescreen the window is much bigger then the max size in bootstrap. It would be nice to be kind of like Unity's, just drag the window bigger or smaller.

Hi Jo.

Thx for your Answer.

But i guess you missunderstood the request.

Main goal for the different device sizes is to geht a preview how it looks like at these sizes when designing the layout / arranging components.

This does not only mean, how large it will be on the Target, as you can define it using e.g. media -> html -> font-size and depending relative em/rem values for the components view its heavier weight to control what and where components are displayed.

With the current options you can only see the pre defined screen-sizes while designing and have to guess inside BS3/4 for higher resolutions.

Of course you can preview live in an Browser-Window like Chrome with activated inspection and Device View set to e.g. 1920"1080 or 3840*2160. But you can still NOT preview inside BS while arranging components in that size.

Another way is to set the viewport - "initial scale" to a lower value e.g. "device-with" / "initial-scale=0.66" for FullHD 1920-1080.

This should show the complete content in the 1280-Desktop-Preview in BS.

But only then and in this only Desktop-Preview. In the other Device-Previews it will not make sense and you have to change it when publishing it to the web-server or 4 Live Preview on Target Screen e.g. you have Multi-Monitor and will use the add. monitor 4 Live-Preview. view its heavier weight to control what and where components are displayed.

Ok. Hope i was able to previse the target of my request.

Everything acc. how i know BS so far, tell me if you have other solutions 4 live Design-Preview in higher resolutions. Ralph

I totally agree with you guys, it would definitely be nice if the app had a slider to view it larger than the app goes and than the built in presets go. But alas that's not the case. My post was just suggestions on what you need to do to accomplish your needs for resizing. What you can also use, if you don't have this nice little tool website is this nice window sizer that helps you see what it looks like in the preview browser. Not sure how you work, but I'm on a dual monitor system so I always have the preview browser open (or on a tab that's not focused if I'm trying to do a lot of changes, so that it doesn't update the page and slow me down lol). Hope this helps someone:

Here's my +1 for the idea though, hopefully that helps too!