Bootstrap element properties

Responsive vs. non-responsive properties

To see the Bootstrap properties, select an element and open the Visual controls tab (the aa icon) at the top of the Properties panel. The Bootstrap sections are marked Bootstrap 4.6, for example TEXT and LAYOUT.

Responsive properties can be set for a particular display size, while non-responsive properties define the element behavior in general, irrespective of the device size.

An example of a non-responsive property is the Text Color property. It lets us choose the color of the text, but we can’t make the text red on small screens and blue on others.

The Punny headline heading in the primary text color in the page view, next to the Text section of the Bootstrap 4.6 Visual controls with the primary text color selected and no device size selector, with callouts on the heading and on the color.

An example of a responsive property is the Text Align property. We can make the text left aligned on mobile devices, centered on tablets and right aligned on larger devices.

The Punny headline heading right aligned in the 1060 px (LG) page view, next to the Layout section where Text Align is set to left for XS and to right for LG, with callouts on the heading and on the two settings.

Responsive properties have a device size selector displayed at the top of the property section.

The Layout section of the Bootstrap 4.6 Visual controls with the XS, SM, MD, LG and XL device size selector in the section header, XS selected, and a callout on the selector.

By default, XS (extra small) is selected. In Bootstrap, that means that the property value will affect XS and above, encompassing all screen sizes.

So, if you just leave XS setting, that’s how the element will behave on all screen sizes.

To display settings for another display size, toggle the size in the device size selector:

The Layout section with XS and LG turned on in the device size selector, showing XS and LG rows for Text Align, Float and Display, Text Align left for XS and right for LG, and a callout on LG.

Then, if you then set a different value for that size - for example, LG (large) - that setting will override the default XS value for large sizes and up.

Let’s look at an example:

Here we set the Text Align property for XS to left and to right for LG and above.

On XS, SM and MD sizes the text will be left aligned. On LG and XL, it will be right aligned.

Of course, we don’t have to set the XS value at all. We can make the text left aligned on SM, and right aligned on larger devices. That means that for XS size, the value of Text Align Bootstrap property is not defined. The text on XS will be aligned according to whatever CSS rules affect that element.

Those sizes that are not visible in the active page view will be shown darker in the Device size selector. For example, XL is dimmed because it is not visible on the currently active page view that has the LG size.

The Layout section header with XL dimmed in the device size selector, with a callout saying that the XL size is not shown in the current page view.

Let’s list all general Bootstrap 4 sections in the Visual controls tab. We won’t go into explaining how Bootstrap works here. We’ll only mention things specific to working with Bootstrap in Pinegrow that are not self-evident.

Layout

Responsive

The Layout section of the Bootstrap 4.6 Visual controls with Text align, Float and Display options and the XS to XL device size selector.

Text & Context

Non-responsive

The Text section of the Bootstrap 4.6 Visual controls with text color buttons, Transform, Size, Vertical alignment, Weight and the Reset, Italic, Lead, No wrap, Truncate, Monospace, Decoration none, Stretched link and Text break options.

Spacing

Responsive

The Spacing section of the Bootstrap 4.6 Visual controls with the XS to XL device size selector and the margin and padding box for XS with top, right, bottom and left fields and the link buttons.

Display

Non-responsive

The Display section of the Bootstrap 4.6 Visual controls with Overflow, Position, Clear floats, Width, Max width, Min VW width, Height, Max height, Min VH height and User select.

Border

To display borders only on certain sides (for example, top and bottom), select the Border checkbox and then use the Hide multi-select control to select the sides where the border is hidden - in our example, left and right.

The Border section of the Bootstrap 4.6 Visual controls with the Border checkbox, the Hide menu for sides without a border and the border color swatches.

Columns

Columns are a responsive control, but here we list the settings for different sizes in a table, instead of using Device size selector.

The Columns section of the Bootstrap 4.6 Visual controls with a table of Size, Order and Offset for XS, SM, MD, LG and XL.

Why is the columns control shown for all elements, not just for divs in rows?

Bootstrap columns are handy for sizing and positioning various elements, not just main column divs.

You could set a column span on a button, for example.

Of course, according to Bootstrap rules, these settings only work properly if the element is positioned inside a row element. That’s why, if you set a column value on an element that is not located in a row, Pinegrow will offer to create a wrapping row element.

Visibility

Non-responsive

The Visibility section of the Bootstrap 4.6 Visual controls with the Visibility, Print and Scr.rdr (screen reader) menus.

Flex Container and Flex child

Responsive

The Flex container section of the Bootstrap 4.6 Visual controls with the XS to XL device size selector and Display Flex or Inline flex, Direction, Justify content, Align items, Align content and Wrap buttons.

The Flex child section of the Bootstrap 4.6 Visual controls with the XS to XL device size selector, Grow and Shrink 0 or 1, Align self buttons, the Order menu and the Fill checkbox.

These controls are almost identical to Flex controls in the Style Visual editor. That’s because these Bootstrap helper classes directly correspond to different values of CSS Flex properties.

Flex Container settings apply to containers and Flex child settings to the items in Flex containers.

Check the Tooltip checkbox and set the parameters to display a tooltip on the selected element.

The Tooltip section of the Bootstrap 4.6 Visual controls with the Tooltip checkbox, Text, Placement, Html, Trigger, Delay in ms and Container, and the Enable tooltips on the page button.

In Bootstrap, tooltips are not enabled by default. You need to activate them by explicitly calling the .tooltip() method. The general code that does that for all tooltips on the page is:

$(‘[data-toggle=”tooltip”]’).tooltip();

Press the Enable tooltips on the page button to add this code to the page or copy-paste it to a Javascript file.

Popovers are very similar to tooltips, described above.

The Popover section of the Bootstrap 4.6 Visual controls with the Popover checkbox, Title, Content, Placement, Html, Trigger, Delay in ms and Container, and the Enable popovers on the page button.

They are also not activated by default. The code to activate all popovers on the page is:

$(‘[data-toggle=”popover”]’).popover();

Press the Enable popovers on the page button to add this code to the page or copy-paste it to a Javascript file.

Javascript

The Toggle section contains properties that control some of Bootstrap Javascript features. For many of them, Pinegrow provides a more convenient controls, for example, trigger selector tool for modals. Those controls map values back to these properties.

The Toggle section of the Bootstrap 4.6 Visual controls with the Data target field and the Data toggle menu.