Walkthrough: Creating Bootstrap CSS class options to style a Button element

Current version: 10.1

This walkthrough describes how to add Bootstrap framework CSS options to make them available in the Styling section when the Form designer adds a Submit button element to a form, as shown in the following image.

CSS class options available for a form element

After you add the necessary styles and scripts to Sitecore, on the live website, the Submit button element changes when you have applied the styling, as shown in the following images.

Live website showing the CSS styling applied to the Button element

This walkthrough describes how to:

  • Create the CSS class options

  • Modify the field type

Create the CSS class options

We recommend you categorize CSS class options based on usage and create a folder, for example, for each field type. You could also create a Shared folder for CSS class options that you can apply to any field type.

To create the CSS class options:

  1. In the Content Editor, go to /sitecore/System/Settings/Forms/Meta Data.

  2. Right-click the CSS Class Options folder and click Insert, Folder. Then, in the Message dialog box, enter Button, and click OK.

  3. Right-click the Button folder and click Insert, Insert From Template.

  4. In the Insert from Template dialog box, go to /System/Forms/Meta Data, click the CSS Class Option template and, in the Item Name Field enter Default.

    Insert from Template dialog box

  5. Click Insert.

  6. With the Default item you just created selected in the content tree, on the Content tab, in the Value field, enter the value btn btn-default, and save your changes.

    Note

    The Value field can be a combination of class names separated by a space.

  7. Repeat steps 3 to 6 to create each of the items listed in the following table.

    Item Name

    Value

    Primary

    btn btn-primary

    Info

    btn btn-info

    Success

    btn btn-success

    Warning

    btn btn-warning

    Danger

    btn btn-danger

  8. Create a folder called Shared to hold the CSS options that can be shared with other elements.

  9. Right-click the Shared folder, click Insert, Insert From Template and add the following items with associated values to match what is shown in the following table. Use the same template as in previous steps /System/Forms/Meta Data/CSS Class Option.

    Item Name

    Value

    Active

    active

    Disabled

    disabled

  10. Save your changes.

    The content tree should now look like this:

    Final tree structure showing all CSS class options.

    Now, when the Form designer opens a form, clicks the Submit button on the canvas and starts typing a CSS class name into the CSS class field, the available classes are displayed.

Modify the field type

It is in the Css Class Autocomplete Options field for each field type that you specify the options to be used when populating the autocomplete list for both the CSS class and the CSS class for label fields, although these two fields do not have to be the same.  By categorizing CSS class options into folders, it is easier to apply class options to a field type by simply selecting the folder instead of selecting the options one by one.

To modify the field type:

  1. In the Content Editor, go to /sitecore/System/Settings/Forms/Field Types/Structure/Submit button.

  2. On the Content tab, in the Settings section, in the CSS Class Autocomplete Options field, double-click the Button folder and the Shared folder to move them to the Selected field.

    The selected Css Class Autocomplete Options are used for both the CSS class field and the CSS class for label field in the Form designer.

    Selected CSS class options folders

  3. Save your changes.

    The autocomplete lists are now available for the Form designer.

Do you have some feedback for us?

If you have suggestions for improving this article,