Bootstrap provides several predefined button styles with support for a handful of contextual variations, sizes, and states. These styles are easy to tweak on the Design pane. Adding the btn class to a button or link element sets the button’s styles.
Variations can be created by adding a class such as btn-primary or btn-success. To make changes to the appearance of a variation first deselect the other class(es) — on the Design pane before using the visual CSS controls.
Please note that we added spacing on the btn-cstm class (which is not a class used in the original Bootstrap code.
Add ‘outline' to the default modifier classes, for example, replace btn-danger with the btn-outline-danger. This removes all background images and colors.
PrimarySecondarySuccesInfoWarningDangerAdd btn-lg or btn-sm for different sizes or create block level buttons that span the full width of a parent by adding btn-block.
To edit size related styles it is recommended that you disable other class(es) so styles remain bound to the size class(es).
Large buttonLarge buttonSmall buttonSmall buttonBlock level buttonBlock level buttonButtons will appear darker when hovered and even darker (background and border, plus inset shadow) when pressed. To change the appearance for these situations select the corresponding state from the State dropdown on the Design pane. Then adjust the styles with the visual CSS controls further down below.
The same active appearance can be created (or mimicked) with the active class.
Large active buttonButton links can be made to look inactive using the disabled class. The button (submit) element can be made disabled by adding the disabled attribute (in the attributes section on the Design pane).
Disabled buttonThese disabled buttons can not be selected in the canvas area of the app. To work with them, select them from the element tree on the Inspector Pane.
Buttons can be wrapped in a container when the class btn-group is added to the wrapper, the buttons are grouped together like so:
On its turn, button groups can be wrapped in another container with the class btn-toolbar for effects like this:
Please note that in the example above the custom class sets the display property to flex for the button group and adds top and bottom spacing.
Add btn-group-lg or btn-group-sm for different sizes.
A button group can be placed within another group for the creation of dropdown menus mixed with a series of buttons.
Please note that Bootstrap adds default padding on container elements. As indicated by the pink lines on the padding boxes (Design pane) we changed that to zero with the Element Type selector.
Dropdowns are toggleable, contextual overlays for displaying lists of links. The structure is straightforward, a container element with class dropdown includes a button element and the actual dropdown menu.
The latter is another container with class dropdown-menu that, in turn, includes a number of links with class dropdown-item.
You can learn more about the exact mechanics in the Bootstrap documentation.
As described above, there’s a container that serves as a wrapper for the button and dropdown menu. The button opens the dropdown menu.
The visibility of the dropdown is currently enabled. That is not always the case — to view and edit hidden elements their visibility can be toggled on the Inspector pane.
To hide or show the dropdown, select the button and go to the Inspector pane on the far right of the app. Then click the eye icon for the container element. This will toggle the visibility of hidden elements.
Now all the style power packed on the Design pane can be used to customize the styles. The Preview on... button in the toolbar launches a browser window for testing the functionality.
Just as with ‘normal’ buttons, contextual Variations can be created by adding a class such as btn-primary or btn-success. Again, to make changes to the appearance of a variation it is preferred that you first deselect the other classes — on the Design pane before using the visual CSS control.
Also please note that if you want to drag or copy and paste these buttons, you’ll have to select the wrapping container which holds both the (visible) buttons and submenu. Otherwise, the dropdown menu will not be included.
Just as with ‘normal’ buttons, contextual variations can be created by adding a class such as btn-primary or btn-success. Again, to make changes to the appearance of a variation be sure to first deselect the other classes — on the Design pane before using the visual CSS control.
Also, please note that if you want to drag or copy and paste these buttons, you’ll have to select the wrapping container which holds both the (visible) buttons and submenu. Otherwise the dropdown menu will not be included.
Both type dropdown buttons also work with btn-lg and btn-sm classes.
The dropdown menus are not affected by the ‘size classes’ — Bootstrap 4 does not provide a predefined class for them. However, they are easy to resize using the text and / or dimension controls on the Design pane. In the example below I added and styled the dropdown-item-sm class on the link elements.
Add the dropup class to the parent element for a reverse effect.
Dropdown menus are automatically positioned 100% from the top and along the left side of its parent. The dropdown-menu-right class can be used to right align the dropdown menu.
Header elements can be placed in the dropdown container and serve as a header to label sections of actions in the dropdown menu. The dropdown-header class styles and positions the header element.
Related menu items can be grouped using a divider. The Bootstrap documentation shows an empty container together with the dropdown-divider class. This is used in the component on the left.
However, using a horizontal rule seems to be more semantic. This is used in the component on the right using the same class on the hr.
Menu items are styled as disabled with the disabled class. Start the text editor by right-clicking the disabled element and edit the link in the app. Please note that in some browsers these links remain clickable.