BootstrapAccordionGroup.TextCssClass Property

Specifies CSS classes applied to the Accordion group‘s text.

Namespace: DevExpress.Web.Bootstrap

Assembly: DevExpress.Web.Bootstrap.v23.2.dll

NuGet Package: DevExpress.Web.Bootstrap

Declaration

C#

[DefaultValue("")]
public string TextCssClass { get; set; }

VB.NET

<DefaultValue("")>
Public Property TextCssClass As String

Property Value

Type	Default	Description
String	String.Empty	A string that specifies CSS class names.

Remarks

The TextCssClass property specifies CSS class names applied to a group’s text. You can use this property to apply Bootstrap classes (text-muted, text-danger, etc.) or your custom CSS classes. Note that classes are also applied to links (<a> elements) in group headers and items.

Note

To apply a Bootstrap render style to an Accordion group, use the RenderOption property.

<dx:BootstrapAccordion runat="server" AutoCollapse="true">
    <Groups>
        <dx:BootstrapAccordionGroup Text="Dashboard" TextCssClass="text-dark" Expanded="false">
            <SettingsBootstrap RenderOption="Light" />
                <Items>
                    <dx:BootstrapAccordionItem Text="Tools" />
                    <dx:BootstrapAccordionItem Text="Reports" />
                    <dx:BootstrapAccordionItem Text="Analytics" />
                </Items>
        </dx:BootstrapAccordionGroup>
        <dx:BootstrapAccordionGroup Text="Sales" TextCssClass="text-light" Expanded="false">
            <SettingsBootstrap RenderOption="Primary" />
                <Items>
                    <dx:BootstrapAccordionItem Text="New Sales" />
                    <dx:BootstrapAccordionItem Text="Sales Reports" />
                    <dx:BootstrapAccordionItem Text="Deliveries" />
                </Items>
        </dx:BootstrapAccordionGroup>
        <dx:BootstrapAccordionGroup Text="Messages" TextCssClass="text-light" Expanded="true">
            <SettingsBootstrap RenderOption="Secondary" />
                <Items>
                    <dx:BootstrapAccordionItem Text="Inbox" />
                    <dx:BootstrapAccordionItem Text="Outbox" />
                    <dx:BootstrapAccordionItem Text="Sent" />
                </Items>
        </dx:BootstrapAccordionGroup>
    </Groups>
</dx:BootstrapAccordion>

Note

Online Demo: Accordion - Render Option