Hi All,

We are busy with redesigning the Bootstrap 4 properties to make it more easier, visual to use and also make more sense

I would like to hear your opinion on our ideas and get your feedback. So I will be publishing a few posts about the new Properties UI.

To start let me show you want we have in mind for the general Bootstrap margin & padding options as well show and hiding on different devices.

Device choice

First to start let me point you that all media query / devices sensitive properties are controlled by the selection of devices in design view:

So if you select a device - then all settings are done for this specific device (and up if not overwritten) that is the whole idea Behind bootstrap’s mobile first design.

Simply stay on the default full view - to work with all devices, as actually full view is the same as the smallest mobile. Everything is visible there.

Margin & Padding

So the interfaces become pretty easy after you have selected a device to view on or have it on full view.

Take for example the new margin & padding control:

You can simply drag the outer bars to increase the margin or inner parts to increase the padding.
The colors become highlighted when a value is changed. The colors are also the same what you see highlighted in design view.

Furthermore the control follows the bootstrap rules it gives you the bootstrap settings from 1 to 5 for margin and padding.

And again to remind you the properties here effect the selected device only and up, if you have selected a device view in design view.

Display Properties

The display is another tricky part, because Bootstrap 4 makes it really difficult to select what is visible on which devices and what not. Sometimes you have to put up to 3 different classes to get the job done.

Then it all also depends on the element you are working on if it is a block element and flex element, or maybe inline …

We have however greatly simplified that for you and give you the power to just select what you want to hide!

The types of the elements are detected and the classes are added automatically!

The same is for printing - you just select to print or not - or leave the defaults.

So that is all for now - let us know want you think of those improvements, so we know we are on the right track.

A heads up to our @wappler_ambassadors for their valuable opinion