Index

Bootstrap Widgets

Widgets are control elements you can use multiple times as building blocks of your UI. Such components are often used together as elements of larger Design Patterns. N1ED offers a number of built-in Bootstrap widgets.

N1ED applies the same theme you use on your website which allows you to edit widgets fully WYSIWYG.

Accordion

Accordion is a convenient tool that allows switching between information blocks. With this control element users can work more time-effectively by hiding most content and focusing on its key parts only. This way even large volumes of information look much less overwhelming. Another possible use case is content adapted for mobile devices. Collapsing blocks of information minimizes unnecessary scrolling on small screens and offers better view of available content for users.

The Add Bootstrap Accordion section button creates an accordion card in the edit area. The card consists of two parts - a header and collapsible content. To remove unnecessary accordions use the Delete Bootstrap Accordion section button.

Bootstrap Accordion overview screenshotBootstrap Accordion screenshot
Editing of accordion cards screenshotEditing of accordion cards

Alert messages

This widget offer notification templates displayed in response to certain actions of a user. Such messages can inform a user about something that needs attention: danger, success, information or warning. Depending on the semantics, eight color contextual variations are used.

The text of templates can be changed. Simply point the cursor to the alert body and type any content you want. To move the cursor to another line press Shift + Enter.

Bootstrap Alert messsages overview screenshotBootstrap Alert messages screenshot
Alert message dialog screenshotAlert messages dialog

Badge

Small and adaptive tag for adding context to just about any content. Badges inherit font size of the parent container using relative font size and em units.

To add a badge, specify its type by selecting one of сontextual variations (primary, secondary, success, danger, warning, info, light, dark) and specify a value in the Text field.

To make badges rounded (with bigger bounding radius and an additional horizontal margin), turn on the Rounded checkbox.

Badge dialog screenshotBadge dialog

Button

The widget offers all Bootstrap’s custom button styles with contextual variations, sizes, states, and more. To apply Bootstrap styles to a newly created or already existing link, activate the Style with Bootstrap option in the Button dialog.

To insert a button, select one of available button types depending on its semantical purpose - primary, secondary, success, danger, warning, info, light, dark. Specify a size, then if you want the button to fill the entire width of the container, enable the 100% width checkbox. If you prefer the light design of buttons without heavy background, switch to the Stroke style.

The following buttons states are available.

Normal state - this is a default state of a button.

Active state - the button looks pressed down, with darker background and a shadow.

Disabled state - the button looks disable and does not respond to clicks.

Button dialog screenshotButton dialog