---
title: "Walkthrough: Creating Bootstrap CSS class options to style a Button element"
slug: "walkthrough--creating-bootstrap-css-class-options-to-style-a-button-element"
abstract: "Example of how to create Bootstrap CSS class options to style a Button element."
---
# Walkthrough: Creating Bootstrap CSS class options to style a Button element
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.
After you add [the necessary styles and scripts](https://doc.sitecore.com/xp/en/developers/105/sitecore-experience-manager/add-styles-and-scripts-to-sitecore-forms.html "Add styles and scripts to Sitecore Forms") to Sitecore, on the live website, the **Submit button** element changes when you have applied the styling, as shown in the following images.
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*.
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:
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](https://doc.sitecore.com/xp/en/developers/105/sitecore-experience-manager/creating-an-autocomplete-list-for-form-element-styling.html "Creating an autocomplete list for form element styling") 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.
3. Save your changes.
The autocomplete lists are now available for the Form designer.