Scaffold your views using either the Unisys View Model Form (Bootstrap Form) Template or Unisys View Model Form (Bootstrap Form Groups) Template. Refer to Invoking Scaffolders for more information.

Create a custom version of the BootstrapFormGroup Editor Template. That is, copy BootstrapFormGroup.cshtml from Views\Shared\EditorTemplates to Views\<controllername>\EditorTemplates, where <controllername> is the name of the controller.

Edit the copy similar to the following (note references to requiredLabelClass):

...
    // determine UIHint
    string hint = ViewData.ModelMetadata.TemplateHint;
    if (hint == null)
    {
        hint = "";
    }
    string requiredLabelClass = " required-" + ViewData.ModelMetadata.IsRequired.ToString().ToLower();
    

    switch (hint.ToLower())
    {

...
        case "checkboxlist":
        case "combobox":
        case "listbox":
        case "dropdownlist":
        case "image":
        case "radiobuttonlist":
        case "switch":
        case "textbox":
        case "barcodereader":
        case "contactaddress":
        case "contactemail":
               case "contactphone":

        <div class="form-group">
            @Html.uuiLabel(new { @class = "control-label col-md-2" + requiredLabelClass})
            <div class="col-md-10">
                @Html.Partial("EditorTemplates/" + hint)
                @Html.ValidationMessage(@ViewData.ModelMetadata.PropertyName, new { data_valmsg_for = @Html.NameForModel() })
            </div>
        </div>
...

This adds the CSS class required-true to the label for each form field that is required, or the class required-false to the label for each form field that is not required.

If desired, add styling in a CSS file. For example, you can update the file Content\Site.css, which is included on each page by default.

Add a rule like the following:

    label.required-true:before
    {
        content: "*";
        color: blue;
    }

If you run the application, you should see a blue asterisk at the start of each label for form fields that require the user to input a value.

Scaffold your views using any of the scaffold templates. Refer to Overview of Scaffolding for more information.

Create a custom version of the DropDownList editor template. That is, copy DropDownList.cshtml from Views\Shared\EditorTemplates to Views\<controllername>\EditorTemplates, where <controllername> is the name of the controller.

Edit the copy similar to the following:

@Html.uuiDropDownList((new { @class = "form-control my-dropdownlist" }))

This adds the CSS class my-dropdownlist to every DropDownList control.

If desired, add styling in a CSS file. For example, you can update the file Content\Site.css, which is included on each page by default.

Add a rule with your styling, like the following:

    .my-dropdownlist
    {
        background-color: green;
        color: white;
    }

If you run the application, you should see your styling applied.