Default Ribbon

This demo demonstrates how to populate the DevExpress Bootstrap Ribbon control.

The Bootstrap Ribbon control supports the following item types: Button, Check Box, Color Button, Combo Box, Date Edit, Drop-Down Button, Drop-Down Toggle Button, Drop-Down Gallery, Gallery Bar, Option Button, Spin Edit, Template Item, Text Box, and Toggle Button.

Clipboard
Font
Paragraph
Search
Zoom
Fullscreen
Settings
ASPXCopy 
<dx:BootstrapRibbon runat="server" AutoGenerateAccessKeys="true">
    <Tabs>
        <dx:BootstrapRibbonTab Text="Home" Name="Home" AccessKey="H">
            <Groups>
                <dx:BootstrapRibbonGroup Text="Clipboard" ShowDialogBoxLauncher="true" Name="Clipboard"
                    DialogBoxLauncherAccessKey="FO" IconCssClass="fa fa-cut">
                    <Items>
                        <dx:BootstrapRibbonDropDownButtonItem Text="Paste" Name="paste" Size="Large" AccessKey="V" IconCssClass="fa fa-paste">
                            <Items>
                                <dx:BootstrapRibbonDropDownButtonItem Text="Plain text" IconCssClass="fa fa-paste">
                                </dx:BootstrapRibbonDropDownButtonItem>
                                <dx:BootstrapRibbonDropDownButtonItem Text="Source formatting" IconCssClass="fa fa-paste">
                                </dx:BootstrapRibbonDropDownButtonItem>
                            </Items>
                        </dx:BootstrapRibbonDropDownButtonItem>
                        <dx:BootstrapRibbonButtonItem Text="Cut" Name="Cut" AccessKey="X" IconCssClass="fa fa-cut"></dx:BootstrapRibbonButtonItem>
                        <dx:BootstrapRibbonButtonItem Text="Copy" Name="Copy" AccessKey="C" IconCssClass="fa fa-copy"></dx:BootstrapRibbonButtonItem>
                        <dx:BootstrapRibbonButtonItem Text="Clear" Name="Clear" AccessKey="D" IconCssClass="fa fa-eraser"></dx:BootstrapRibbonButtonItem>
                    </Items>
                </dx:BootstrapRibbonGroup>
                <dx:BootstrapRibbonGroup Text="Font" IconCssClass="fa fa-font" ShowDialogBoxLauncher="true">
                    <Items>
                        <dx:BootstrapRibbonComboBoxItem>
                            <Items>
                                <dx:BootstrapListEditItem Text="Arial"></dx:BootstrapListEditItem>
                                <dx:BootstrapListEditItem Text="Times New Roman"></dx:BootstrapListEditItem>
                                <dx:BootstrapListEditItem Text="Calibri"></dx:BootstrapListEditItem>
                                <dx:BootstrapListEditItem Text="Verdana"></dx:BootstrapListEditItem>
                            </Items>
                            <PropertiesComboBox AllowNull="true" NullText="Font Family"></PropertiesComboBox>
                        </dx:BootstrapRibbonComboBoxItem>
                        <dx:BootstrapRibbonComboBoxItem>
                            <Items>
                                <dx:BootstrapListEditItem Text="10"></dx:BootstrapListEditItem>
                                <dx:BootstrapListEditItem Text="11"></dx:BootstrapListEditItem>
                                <dx:BootstrapListEditItem Text="12"></dx:BootstrapListEditItem>
                                <dx:BootstrapListEditItem Text="14"></dx:BootstrapListEditItem>
                                <dx:BootstrapListEditItem Text="16"></dx:BootstrapListEditItem>
                                <dx:BootstrapListEditItem Text="18"></dx:BootstrapListEditItem>
                            </Items>
                            <PropertiesComboBox AllowNull="true" NullText="Font size"></PropertiesComboBox>
                        </dx:BootstrapRibbonComboBoxItem>
                        <dx:BootstrapRibbonToggleButtonItem Name="bold" IconCssClass="fa fa-bold"></dx:BootstrapRibbonToggleButtonItem>
                        <dx:BootstrapRibbonToggleButtonItem Name="italic" IconCssClass="fa fa-italic"></dx:BootstrapRibbonToggleButtonItem>
                        <dx:BootstrapRibbonToggleButtonItem Name="underline" IconCssClass="fas fa-underline"></dx:BootstrapRibbonToggleButtonItem>
                        <dx:BootstrapRibbonToggleButtonItem Name="strikethrough" IconCssClass="fas fa-strikethrough"></dx:BootstrapRibbonToggleButtonItem>
                        <dx:BootstrapRibbonToggleButtonItem Name="subscript" IconCssClass="fas fa-subscript"></dx:BootstrapRibbonToggleButtonItem>
                        <dx:BootstrapRibbonToggleButtonItem Name="superscript" IconCssClass="fas fa-superscript"></dx:BootstrapRibbonToggleButtonItem>
                        <dx:BootstrapRibbonColorButtonItem EnableCustomColors="true" IconCssClass="fas fa-highlighter">
                        </dx:BootstrapRibbonColorButtonItem>
                        <dx:BootstrapRibbonColorButtonItem IconCssClass="fas fa-fill-drip">
                        </dx:BootstrapRibbonColorButtonItem>
                    </Items>
                </dx:BootstrapRibbonGroup>
                <dx:BootstrapRibbonGroup Text="Paragraph" IconCssClass="fa fa-paragraph">
                    <Items>
                        <dx:BootstrapRibbonButtonItem IconCssClass="fa fa-list-ul"></dx:BootstrapRibbonButtonItem>
                        <dx:BootstrapRibbonButtonItem IconCssClass="fa fa-list-ol"></dx:BootstrapRibbonButtonItem>
                        <dx:BootstrapRibbonButtonItem IconCssClass="fa fa-indent"></dx:BootstrapRibbonButtonItem>
                        <dx:BootstrapRibbonButtonItem IconCssClass="fa fa-outdent"></dx:BootstrapRibbonButtonItem>
                        <dx:BootstrapRibbonButtonItem IconCssClass="fa fa-sort-alpha-down"></dx:BootstrapRibbonButtonItem>
                        <dx:BootstrapRibbonButtonItem IconCssClass="fa fa-paragraph"></dx:BootstrapRibbonButtonItem>
                        <dx:BootstrapRibbonOptionButtonItem OptionGroupName="align" IconCssClass="fa fa-align-justify"></dx:BootstrapRibbonOptionButtonItem>
                        <dx:BootstrapRibbonOptionButtonItem OptionGroupName="align" IconCssClass="fa fa-align-left"></dx:BootstrapRibbonOptionButtonItem>
                        <dx:BootstrapRibbonOptionButtonItem OptionGroupName="align" IconCssClass="fa fa-align-center"></dx:BootstrapRibbonOptionButtonItem>
                        <dx:BootstrapRibbonOptionButtonItem OptionGroupName="align" IconCssClass="fa fa-align-right"></dx:BootstrapRibbonOptionButtonItem>
                    </Items>
                </dx:BootstrapRibbonGroup>
                <dx:BootstrapRibbonGroup Text="Search" IconCssClass="fa fa-search">
                    <Items>
                        <dx:BootstrapRibbonDropDownButtonItem Text="Find" IconCssClass="fa fa-search">
                            <Items>
                                <dx:BootstrapRibbonDropDownButtonItem Text="Find" IconCssClass="fa fa-search">
                                </dx:BootstrapRibbonDropDownButtonItem>
                                <dx:BootstrapRibbonDropDownButtonItem Text="Go To" IconCssClass="fa fa-external-link-alt">
                                </dx:BootstrapRibbonDropDownButtonItem>
                            </Items>
                        </dx:BootstrapRibbonDropDownButtonItem>
                        <dx:BootstrapRibbonButtonItem Text="Replace" IconCssClass="fa fa-exchange-alt"></dx:BootstrapRibbonButtonItem>
                    </Items>
                </dx:BootstrapRibbonGroup>
            </Groups>
        </dx:BootstrapRibbonTab>
        <dx:BootstrapRibbonTab Name="View" Text="View">
            <Groups>
                <dx:BootstrapRibbonGroup Name="Zoom" Text="Zoom">
                    <Items>
                        <dx:BootstrapRibbonButtonItem Size="Large" Text="Zoom" IconCssClass="fa fa-search">
                        </dx:BootstrapRibbonButtonItem>
                        <dx:BootstrapRibbonButtonItem Text="Zoom In" IconCssClass="fa fa-search-plus">
                        </dx:BootstrapRibbonButtonItem>
                        <dx:BootstrapRibbonButtonItem Text="Zoom Out" IconCssClass="fa fa-search-minus">
                        </dx:BootstrapRibbonButtonItem>
                    </Items>
                </dx:BootstrapRibbonGroup>
                <dx:BootstrapRibbonGroup Name="Fullscreen" Text="Fullscreen">
                    <Items>
                        <dx:BootstrapRibbonButtonItem Size="Large" Text="Fullscreen" IconCssClass="fa fa-arrows-alt">
                        </dx:BootstrapRibbonButtonItem>
                    </Items>
                </dx:BootstrapRibbonGroup>
                <dx:BootstrapRibbonGroup Name="Settings" Text="Settings">
                    <Items>
                        <dx:BootstrapRibbonDropDownButtonItem Text="Settings" Size="Large" DropDownMode="false" IconCssClass="fa fa-cog">
                            <Items>
                                <dx:BootstrapRibbonDropDownToggleButtonItem Name="WordWrap" Text="Word Wrap">
                                </dx:BootstrapRibbonDropDownToggleButtonItem>
                                <dx:BootstrapRibbonDropDownToggleButtonItem Name="NonprintingCharacters" Text="Nonprinting Characters">
                                </dx:BootstrapRibbonDropDownToggleButtonItem>
                            </Items>
                        </dx:BootstrapRibbonDropDownButtonItem>
                    </Items>
                </dx:BootstrapRibbonGroup>
            </Groups>
        </dx:BootstrapRibbonTab>
    </Tabs>
</dx:BootstrapRibbon>

Data Binding

This demo illustrates how the Bootstrap Ribbon control can be populated with information taken from a data source. The Ribbon control can be bound to a data source in a standard manner - using the DataSourceID or DataSource property. While binding, the control automatically creates tabs, groups and items; and retrieves their property values from the corresponding data items.

You can specify the data source fields to which the tabs, groups and items properties are mapped using the TabDataFields, GroupDataFields, and ItemDataFields properties, respectively.

Additionally, BootstrapRibbon provides specific events related to data binding that can be handled according to your application logic.

  • TabDataBound - Allows you to customize the settings of an individual tab immediately after it is bound to data.
  • GroupDataBound - Allows you to customize the settings of an individual group immediately after it is bound to data.
  • ItemDataBound - Allows you to customize the settings of an individual item immediately after it is bound to data.
  • DataBound - Occurs after the control data binding is complete, and allows you to customize the control.

In this demo, the Ribbon control is bound to a standard XmlDataSource data source by specifying the DataSourceID property. The tab, group, and item property values are obtained automatically because the data item attributes are named according to the corresponding default property values.

Graph
View
Code
Blocks
Edit
View
ASPXC#MathInterface.xmlCopy 
<dx:BootstrapRibbon runat="server" DataSourceID="RibbonDataSource" OnTabDataBound="DataBoundRibbon_TabDataBound">
    <ItemDataFields IconCssClassField="Icon" />
    <GroupDataFields IconCssClassField="Icon" ShowDialogBoxLauncherField="HasDialog" />
    <TabDataFields TextField="TabText" AccessKeyField="AccessKey" ContextTabCategoryNameField="Category" CssClassField="CategoryCssClass" />
</dx:BootstrapRibbon>
<asp:XmlDataSource ID="RibbonDataSource" runat="server" DataFile="~/App_Data/MathInterface.xml" XPath="/MathInterface/*"></asp:XmlDataSource>
protected void DataBoundRibbon_TabDataBound(object source, DevExpress.Web.Bootstrap.BootstrapRibbonTabEventArgs e) {
    if(e.Tab.ContextTabCategory != null)
        e.Tab.ContextTabCategory.ClientVisible = true;
}
<?xml version="1.0" encoding="utf-8" ?>
<MathInterface>
  <Panel TabText="Tools">
    <Group Text="Graph">
      <Item Text="X-Y Plot">
      </Item>
      <Item Text="Polar Plot">
      </Item>
      <Item Text="3D Plot">
      </Item>
      <Item Text="Gridlines" ItemType="CheckBox">
      </Item>
      <Item Text="Numbered" ItemType="CheckBox">
      </Item>
      <Item Text="Auto Scale" ItemType="CheckBox">
      </Item>
    </Group>
    <Group Text="View">
      <Item Text="Zoom in" ItemType="DropDownButton" Icon="fa fa-search-plus">
      </Item>
      <Item Text="Zoom out" ItemType="DropDownButton" Icon="fa fa-search-minus">
      </Item>
      <Item Text="Full Screen" ItemType="DropDownToggleButton" Icon="fa fa-arrows-alt">
      </Item>
    </Group>
    <Group Text="Code">
      <Item Text="Analyze" Size="Large" Icon="fa fa-code">
      </Item>
      <Item Text="Run" Size="Large" Icon="fa fa-caret-right">
      </Item>
      <Item Text="Clear" Size="Large" Icon="fa fa-broom">
      </Item>
    </Group>
  </Panel>
  <Panel TabText="Models" Category="Custom" CategoryCssClass="bg-info text-white">
    <Group Text="Blocks">
      <Item Text="Discrete" ItemType="DropDownButton" Icon="fa fa-chart-bar">
        <SubItem Text="Difference" ItemType="DropDownButton">
        </SubItem>
        <SubItem Text="Discrete Derivative" ItemType="DropDownButton">
        </SubItem>
        <SubItem Text="Integere Delay" ItemType="DropDownButton">
        </SubItem>
        <SubItem Text="Discrete Filter" ItemType="DropDownButton">
        </SubItem>
        <SubItem Text="First-Order Hold" ItemType="DropDownButton">
        </SubItem>
        <SubItem Text="Zero-Order Hold" ItemType="DropDownButton">
        </SubItem>
      </Item>
      <Item Text="Continuous" ItemType="DropDownButton" Icon="fa fa-chart-line">
        <SubItem Text="Integrator" ItemType="DropDownButton">
        </SubItem>
        <SubItem Text="Derivative" ItemType="DropDownButton">
        </SubItem>
        <SubItem Text="State-Space" ItemType="DropDownButton">
        </SubItem>
        <SubItem Text="Transfer Fcn" ItemType="DropDownButton">
        </SubItem>
      </Item>
      <Item Text="Search by name: " ItemType="TextBox">
      </Item>
    </Group>
    <Group Text="Edit">
      <Item Text="Cut" Icon="fa fa-cut">
      </Item>
      <Item Text="Copy" Icon="fa fa-copy">
      </Item>
      <Item Text="Paste" Icon="fa fa-paste">
      </Item>
      <Item Text="Undo" Icon="fa fa-undo">
      </Item>
      <Item Text="Redo" Icon="fa fa-redo">
      </Item>
    </Group>
    <Group Text="View">
      <Item Text="Fullscreen" ItemType="CheckBox">
      </Item>
      <Item Text="Large items" ItemType="CheckBox">
      </Item>
      <SubItem Text="Color" ItemType="ColorButton" Size="Large" Icon="fa fa-palette">
      </SubItem>
    </Group>
  </Panel>
</MathInterface>

Keyboard Support

The Ribbon control provides end-users with the capability to navigate through ribbon items using the keyboard. To enable this behavior, set the KeyboardSupport property to true. The KeyTipModeShortcut property allows you to specify a keyboard shortcut, which when pressed will show tab key tips. The key tips can also be displayed by calling the client-side ShowKeyTips method.

The ribbon control automatically generates access keys for tabs, groups, and items. However, you can specify the required access key manually by using the following properties.

You can disable the access key auto generation by setting the AutoGenerateAccessKeys property to false. However, in this case, you should specify access key for every element manually.

Note that an access key is in effect provided that the corresponding key tip is currently displayed.

Clipboard
Font
Paragraph
Search
Zoom
Fullscreen
Settings
ASPXCopy 
<div class="alert alert-info" role="alert">
    To show key tips, press
    <span class="font-weight-bold">F10</span>
    or button
    <dx:BootstrapButton runat="server" AutoPostBack="false" Text="Show key tips">
        <SettingsBootstrap RenderOption="Info" />
        <ClientSideEvents Click="function(s, e) { KeyboardSupportRibbon.ShowKeyTips(); }" />
    </dx:BootstrapButton>
</div>
<dx:BootstrapRibbon runat="server" ClientInstanceName="KeyboardSupportRibbon"
    KeyboardSupport="true" AutoGenerateAccessKeys="true" KeyTipModeShortcut="F10">
    <Tabs>
        <dx:BootstrapRibbonTab Text="Home" Name="Home" AccessKey="H">
            <Groups>
                <dx:BootstrapRibbonGroup Text="Clipboard" ShowDialogBoxLauncher="true" Name="Clipboard"
                    DialogBoxLauncherAccessKey="FO" IconCssClass="fa fa-cut">
                    <Items>
                        <dx:BootstrapRibbonDropDownButtonItem Text="Paste" Name="paste" Size="Large" AccessKey="V" IconCssClass="fa fa-paste">
                            <Items>
                                <dx:BootstrapRibbonDropDownButtonItem Text="Plain text" IconCssClass="fa fa-paste">
                                </dx:BootstrapRibbonDropDownButtonItem>
                                <dx:BootstrapRibbonDropDownButtonItem Text="Source formatting" IconCssClass="fa fa-paste">
                                </dx:BootstrapRibbonDropDownButtonItem>
                            </Items>
                        </dx:BootstrapRibbonDropDownButtonItem>
                        <dx:BootstrapRibbonButtonItem Text="Cut" Name="Cut" AccessKey="X" IconCssClass="fa fa-cut"></dx:BootstrapRibbonButtonItem>
                        <dx:BootstrapRibbonButtonItem Text="Copy" Name="Copy" AccessKey="C" IconCssClass="fa fa-copy"></dx:BootstrapRibbonButtonItem>
                        <dx:BootstrapRibbonButtonItem Text="Clear" Name="Clear" AccessKey="D" IconCssClass="fa fa-eraser"></dx:BootstrapRibbonButtonItem>
                    </Items>
                </dx:BootstrapRibbonGroup>
                <dx:BootstrapRibbonGroup Text="Font" IconCssClass="fa fa-font" ShowDialogBoxLauncher="true">
                    <Items>
                        <dx:BootstrapRibbonComboBoxItem>
                            <Items>
                                <dx:BootstrapListEditItem Text="Arial"></dx:BootstrapListEditItem>
                                <dx:BootstrapListEditItem Text="Times New Roman"></dx:BootstrapListEditItem>
                                <dx:BootstrapListEditItem Text="Calibri"></dx:BootstrapListEditItem>
                                <dx:BootstrapListEditItem Text="Verdana"></dx:BootstrapListEditItem>
                            </Items>
                            <PropertiesComboBox AllowNull="true" NullText="Font Family"></PropertiesComboBox>
                        </dx:BootstrapRibbonComboBoxItem>
                        <dx:BootstrapRibbonComboBoxItem>
                            <Items>
                                <dx:BootstrapListEditItem Text="10"></dx:BootstrapListEditItem>
                                <dx:BootstrapListEditItem Text="11"></dx:BootstrapListEditItem>
                                <dx:BootstrapListEditItem Text="12"></dx:BootstrapListEditItem>
                                <dx:BootstrapListEditItem Text="14"></dx:BootstrapListEditItem>
                                <dx:BootstrapListEditItem Text="16"></dx:BootstrapListEditItem>
                                <dx:BootstrapListEditItem Text="18"></dx:BootstrapListEditItem>
                            </Items>
                            <PropertiesComboBox AllowNull="true" NullText="Font size"></PropertiesComboBox>
                        </dx:BootstrapRibbonComboBoxItem>
                        <dx:BootstrapRibbonToggleButtonItem Name="bold" IconCssClass="fa fa-bold"></dx:BootstrapRibbonToggleButtonItem>
                        <dx:BootstrapRibbonToggleButtonItem Name="italic" IconCssClass="fa fa-italic"></dx:BootstrapRibbonToggleButtonItem>
                        <dx:BootstrapRibbonToggleButtonItem Name="underline" IconCssClass="fas fa-underline"></dx:BootstrapRibbonToggleButtonItem>
                        <dx:BootstrapRibbonToggleButtonItem Name="strikethrough" IconCssClass="fas fa-strikethrough"></dx:BootstrapRibbonToggleButtonItem>
                        <dx:BootstrapRibbonToggleButtonItem Name="subscript" IconCssClass="fas fa-subscript"></dx:BootstrapRibbonToggleButtonItem>
                        <dx:BootstrapRibbonToggleButtonItem Name="superscript" IconCssClass="fas fa-superscript"></dx:BootstrapRibbonToggleButtonItem>
                        <dx:BootstrapRibbonColorButtonItem EnableCustomColors="true" IconCssClass="fas fa-highlighter">
                        </dx:BootstrapRibbonColorButtonItem>
                        <dx:BootstrapRibbonColorButtonItem IconCssClass="fas fa-fill-drip">
                        </dx:BootstrapRibbonColorButtonItem>
                    </Items>
                </dx:BootstrapRibbonGroup>
                <dx:BootstrapRibbonGroup Text="Paragraph" IconCssClass="fa fa-paragraph">
                    <Items>
                        <dx:BootstrapRibbonButtonItem IconCssClass="fa fa-list-ul"></dx:BootstrapRibbonButtonItem>
                        <dx:BootstrapRibbonButtonItem IconCssClass="fa fa-list-ol"></dx:BootstrapRibbonButtonItem>
                        <dx:BootstrapRibbonButtonItem IconCssClass="fa fa-indent"></dx:BootstrapRibbonButtonItem>
                        <dx:BootstrapRibbonButtonItem IconCssClass="fa fa-outdent"></dx:BootstrapRibbonButtonItem>
                        <dx:BootstrapRibbonButtonItem IconCssClass="fa fa-sort-alpha-down"></dx:BootstrapRibbonButtonItem>
                        <dx:BootstrapRibbonButtonItem IconCssClass="fa fa-paragraph"></dx:BootstrapRibbonButtonItem>
                        <dx:BootstrapRibbonOptionButtonItem OptionGroupName="align" IconCssClass="fa fa-align-justify"></dx:BootstrapRibbonOptionButtonItem>
                        <dx:BootstrapRibbonOptionButtonItem OptionGroupName="align" IconCssClass="fa fa-align-left"></dx:BootstrapRibbonOptionButtonItem>
                        <dx:BootstrapRibbonOptionButtonItem OptionGroupName="align" IconCssClass="fa fa-align-center"></dx:BootstrapRibbonOptionButtonItem>
                        <dx:BootstrapRibbonOptionButtonItem OptionGroupName="align" IconCssClass="fa fa-align-right"></dx:BootstrapRibbonOptionButtonItem>
                    </Items>
                </dx:BootstrapRibbonGroup>
                <dx:BootstrapRibbonGroup Text="Search" IconCssClass="fa fa-search">
                    <Items>
                        <dx:BootstrapRibbonDropDownButtonItem Text="Find" IconCssClass="fa fa-search">
                            <Items>
                                <dx:BootstrapRibbonDropDownButtonItem Text="Find" IconCssClass="fa fa-search">
                                </dx:BootstrapRibbonDropDownButtonItem>
                                <dx:BootstrapRibbonDropDownButtonItem Text="Go To" IconCssClass="fa fa-external-link-alt">
                                </dx:BootstrapRibbonDropDownButtonItem>
                            </Items>
                        </dx:BootstrapRibbonDropDownButtonItem>
                        <dx:BootstrapRibbonButtonItem Text="Replace" IconCssClass="fa fa-exchange-alt"></dx:BootstrapRibbonButtonItem>
                    </Items>
                </dx:BootstrapRibbonGroup>
            </Groups>
        </dx:BootstrapRibbonTab>
        <dx:BootstrapRibbonTab Name="View" Text="View">
            <Groups>
                <dx:BootstrapRibbonGroup Name="Zoom" Text="Zoom">
                    <Items>
                        <dx:BootstrapRibbonButtonItem Size="Large" Text="Zoom" IconCssClass="fa fa-search">
                        </dx:BootstrapRibbonButtonItem>
                        <dx:BootstrapRibbonButtonItem Text="Zoom In" IconCssClass="fa fa-search-plus">
                        </dx:BootstrapRibbonButtonItem>
                        <dx:BootstrapRibbonButtonItem Text="Zoom Out" IconCssClass="fa fa-search-minus">
                        </dx:BootstrapRibbonButtonItem>
                    </Items>
                </dx:BootstrapRibbonGroup>
                <dx:BootstrapRibbonGroup Name="Fullscreen" Text="Fullscreen">
                    <Items>
                        <dx:BootstrapRibbonButtonItem Size="Large" Text="Fullscreen" IconCssClass="fa fa-arrows-alt">
                        </dx:BootstrapRibbonButtonItem>
                    </Items>
                </dx:BootstrapRibbonGroup>
                <dx:BootstrapRibbonGroup Name="Settings" Text="Settings">
                    <Items>
                        <dx:BootstrapRibbonDropDownButtonItem Text="Settings" Size="Large" DropDownMode="false" IconCssClass="fa fa-cog">
                            <Items>
                                <dx:BootstrapRibbonDropDownToggleButtonItem Name="WordWrap" Text="Word Wrap">
                                </dx:BootstrapRibbonDropDownToggleButtonItem>
                                <dx:BootstrapRibbonDropDownToggleButtonItem Name="NonprintingCharacters" Text="Nonprinting Characters">
                                </dx:BootstrapRibbonDropDownToggleButtonItem>
                            </Items>
                        </dx:BootstrapRibbonDropDownButtonItem>
                    </Items>
                </dx:BootstrapRibbonGroup>
            </Groups>
        </dx:BootstrapRibbonTab>
    </Tabs>
</dx:BootstrapRibbon>

Quick Access Toolbar

The Ribbon control provides a capability to define quick access toolbar items, that will be displayed above the ribbon tabs. These items are displayed even if the Ribbon is minimized.

The client instance of a quick access toolbar item can be retrieved via the BootstrapClientRibbon.GetQuickAccessToolbarItem method

Clipboard
Font
Paragraph
Search
Zoom
Fullscreen
Settings
ASPXCopy 
<dx:BootstrapRibbon runat="server" Minimized="true">
    <Toolbar>
        <Items>
            <dx:BootstrapRibbonButtonItem BeginGroup="true" IconCssClass="fa fa-undo" Name="undo">
            </dx:BootstrapRibbonButtonItem>
            <dx:BootstrapRibbonButtonItem IconCssClass="fa fa-redo" Name="redo">
            </dx:BootstrapRibbonButtonItem>
            <dx:BootstrapRibbonButtonItem BeginGroup="true" IconCssClass="fa fa-copy" Name="copy">
            </dx:BootstrapRibbonButtonItem>
            <dx:BootstrapRibbonButtonItem IconCssClass="fa fa-cut" Name="cut">
            </dx:BootstrapRibbonButtonItem>
            <dx:BootstrapRibbonButtonItem IconCssClass="fa fa-paste" Name="paste">
            </dx:BootstrapRibbonButtonItem>
            <dx:BootstrapRibbonToggleButtonItem BeginGroup="true" IconCssClass="fa fa-bold" Name="bold">
            </dx:BootstrapRibbonToggleButtonItem>
            <dx:BootstrapRibbonToggleButtonItem IconCssClass="fa fa-italic" Name="italic">
            </dx:BootstrapRibbonToggleButtonItem>
            <dx:BootstrapRibbonToggleButtonItem IconCssClass="fas fa-underline" Name="italic">
            </dx:BootstrapRibbonToggleButtonItem>
            <dx:BootstrapRibbonToggleButtonItem IconCssClass="fas fa-strikethrough" Name="strikethrough">
            </dx:BootstrapRibbonToggleButtonItem>
            <dx:BootstrapRibbonToggleButtonItem IconCssClass="fas fa-subscript" Name="subscript">
            </dx:BootstrapRibbonToggleButtonItem>
            <dx:BootstrapRibbonToggleButtonItem IconCssClass="fas fa-superscript" Name="superscript">
            </dx:BootstrapRibbonToggleButtonItem>
        </Items>
    </Toolbar>
    <Tabs>
        <dx:BootstrapRibbonTab Text="Home" Name="Home" AccessKey="H">
            <Groups>
                <dx:BootstrapRibbonGroup Text="Clipboard" ShowDialogBoxLauncher="true" Name="Clipboard"
                    DialogBoxLauncherAccessKey="FO" IconCssClass="fa fa-cut">
                    <Items>
                        <dx:BootstrapRibbonDropDownButtonItem Text="Paste" Name="paste" Size="Large" AccessKey="V" IconCssClass="fa fa-paste">
                            <Items>
                                <dx:BootstrapRibbonDropDownButtonItem Text="Plain text" IconCssClass="fa fa-paste">
                                </dx:BootstrapRibbonDropDownButtonItem>
                                <dx:BootstrapRibbonDropDownButtonItem Text="Source formatting" IconCssClass="fa fa-paste">
                                </dx:BootstrapRibbonDropDownButtonItem>
                            </Items>
                        </dx:BootstrapRibbonDropDownButtonItem>
                        <dx:BootstrapRibbonButtonItem Text="Cut" Name="Cut" AccessKey="X" IconCssClass="fa fa-cut"></dx:BootstrapRibbonButtonItem>
                        <dx:BootstrapRibbonButtonItem Text="Copy" Name="Copy" AccessKey="C" IconCssClass="fa fa-copy"></dx:BootstrapRibbonButtonItem>
                        <dx:BootstrapRibbonButtonItem Text="Clear" Name="Clear" AccessKey="D" IconCssClass="fa fa-eraser"></dx:BootstrapRibbonButtonItem>
                    </Items>
                </dx:BootstrapRibbonGroup>
                <dx:BootstrapRibbonGroup Text="Font" IconCssClass="fa fa-font" ShowDialogBoxLauncher="true">
                    <Items>
                        <dx:BootstrapRibbonComboBoxItem>
                            <Items>
                                <dx:BootstrapListEditItem Text="Arial"></dx:BootstrapListEditItem>
                                <dx:BootstrapListEditItem Text="Times New Roman"></dx:BootstrapListEditItem>
                                <dx:BootstrapListEditItem Text="Calibri"></dx:BootstrapListEditItem>
                                <dx:BootstrapListEditItem Text="Verdana"></dx:BootstrapListEditItem>
                            </Items>
                            <PropertiesComboBox AllowNull="true" NullText="Font Family"></PropertiesComboBox>
                        </dx:BootstrapRibbonComboBoxItem>
                        <dx:BootstrapRibbonComboBoxItem>
                            <Items>
                                <dx:BootstrapListEditItem Text="10"></dx:BootstrapListEditItem>
                                <dx:BootstrapListEditItem Text="11"></dx:BootstrapListEditItem>
                                <dx:BootstrapListEditItem Text="12"></dx:BootstrapListEditItem>
                                <dx:BootstrapListEditItem Text="14"></dx:BootstrapListEditItem>
                                <dx:BootstrapListEditItem Text="16"></dx:BootstrapListEditItem>
                                <dx:BootstrapListEditItem Text="18"></dx:BootstrapListEditItem>
                            </Items>
                            <PropertiesComboBox AllowNull="true" NullText="Font size"></PropertiesComboBox>
                        </dx:BootstrapRibbonComboBoxItem>
                        <dx:BootstrapRibbonToggleButtonItem Name="bold" IconCssClass="fa fa-bold"></dx:BootstrapRibbonToggleButtonItem>
                        <dx:BootstrapRibbonToggleButtonItem Name="italic" IconCssClass="fa fa-italic"></dx:BootstrapRibbonToggleButtonItem>
                        <dx:BootstrapRibbonToggleButtonItem Name="underline" IconCssClass="fas fa-underline"></dx:BootstrapRibbonToggleButtonItem>
                        <dx:BootstrapRibbonToggleButtonItem Name="strikethrough" IconCssClass="fas fa-strikethrough"></dx:BootstrapRibbonToggleButtonItem>
                        <dx:BootstrapRibbonToggleButtonItem Name="subscript" IconCssClass="fas fa-subscript"></dx:BootstrapRibbonToggleButtonItem>
                        <dx:BootstrapRibbonToggleButtonItem Name="superscript" IconCssClass="fas fa-superscript"></dx:BootstrapRibbonToggleButtonItem>
                        <dx:BootstrapRibbonColorButtonItem EnableCustomColors="true" IconCssClass="fas fa-highlighter">
                        </dx:BootstrapRibbonColorButtonItem>
                        <dx:BootstrapRibbonColorButtonItem IconCssClass="fas fa-fill-drip">
                        </dx:BootstrapRibbonColorButtonItem>
                    </Items>
                </dx:BootstrapRibbonGroup>
                <dx:BootstrapRibbonGroup Text="Paragraph" IconCssClass="fa fa-paragraph">
                    <Items>
                        <dx:BootstrapRibbonButtonItem IconCssClass="fa fa-list-ul"></dx:BootstrapRibbonButtonItem>
                        <dx:BootstrapRibbonButtonItem IconCssClass="fa fa-list-ol"></dx:BootstrapRibbonButtonItem>
                        <dx:BootstrapRibbonButtonItem IconCssClass="fa fa-indent"></dx:BootstrapRibbonButtonItem>
                        <dx:BootstrapRibbonButtonItem IconCssClass="fa fa-outdent"></dx:BootstrapRibbonButtonItem>
                        <dx:BootstrapRibbonButtonItem IconCssClass="fa fa-sort-alpha-down"></dx:BootstrapRibbonButtonItem>
                        <dx:BootstrapRibbonButtonItem IconCssClass="fa fa-paragraph"></dx:BootstrapRibbonButtonItem>
                        <dx:BootstrapRibbonOptionButtonItem OptionGroupName="align" IconCssClass="fa fa-align-justify"></dx:BootstrapRibbonOptionButtonItem>
                        <dx:BootstrapRibbonOptionButtonItem OptionGroupName="align" IconCssClass="fa fa-align-left"></dx:BootstrapRibbonOptionButtonItem>
                        <dx:BootstrapRibbonOptionButtonItem OptionGroupName="align" IconCssClass="fa fa-align-center"></dx:BootstrapRibbonOptionButtonItem>
                        <dx:BootstrapRibbonOptionButtonItem OptionGroupName="align" IconCssClass="fa fa-align-right"></dx:BootstrapRibbonOptionButtonItem>
                    </Items>
                </dx:BootstrapRibbonGroup>
                <dx:BootstrapRibbonGroup Text="Search" IconCssClass="fa fa-search">
                    <Items>
                        <dx:BootstrapRibbonDropDownButtonItem Text="Find" IconCssClass="fa fa-search">
                            <Items>
                                <dx:BootstrapRibbonDropDownButtonItem Text="Find" IconCssClass="fa fa-search">
                                </dx:BootstrapRibbonDropDownButtonItem>
                                <dx:BootstrapRibbonDropDownButtonItem Text="Go To" IconCssClass="fa fa-external-link-alt">
                                </dx:BootstrapRibbonDropDownButtonItem>
                            </Items>
                        </dx:BootstrapRibbonDropDownButtonItem>
                        <dx:BootstrapRibbonButtonItem Text="Replace" IconCssClass="fa fa-exchange-alt"></dx:BootstrapRibbonButtonItem>
                    </Items>
                </dx:BootstrapRibbonGroup>
            </Groups>
        </dx:BootstrapRibbonTab>
        <dx:BootstrapRibbonTab Name="View" Text="View">
            <Groups>
                <dx:BootstrapRibbonGroup Name="Zoom" Text="Zoom">
                    <Items>
                        <dx:BootstrapRibbonButtonItem Size="Large" Text="Zoom" IconCssClass="fa fa-search">
                        </dx:BootstrapRibbonButtonItem>
                        <dx:BootstrapRibbonButtonItem Text="Zoom In" IconCssClass="fa fa-search-plus">
                        </dx:BootstrapRibbonButtonItem>
                        <dx:BootstrapRibbonButtonItem Text="Zoom Out" IconCssClass="fa fa-search-minus">
                        </dx:BootstrapRibbonButtonItem>
                    </Items>
                </dx:BootstrapRibbonGroup>
                <dx:BootstrapRibbonGroup Name="Fullscreen" Text="Fullscreen">
                    <Items>
                        <dx:BootstrapRibbonButtonItem Size="Large" Text="Fullscreen" IconCssClass="fa fa-arrows-alt">
                        </dx:BootstrapRibbonButtonItem>
                    </Items>
                </dx:BootstrapRibbonGroup>
                <dx:BootstrapRibbonGroup Name="Settings" Text="Settings">
                    <Items>
                        <dx:BootstrapRibbonDropDownButtonItem Text="Settings" Size="Large" DropDownMode="false" IconCssClass="fa fa-cog">
                            <Items>
                                <dx:BootstrapRibbonDropDownToggleButtonItem Name="WordWrap" Text="Word Wrap">
                                </dx:BootstrapRibbonDropDownToggleButtonItem>
                                <dx:BootstrapRibbonDropDownToggleButtonItem Name="NonprintingCharacters" Text="Nonprinting Characters">
                                </dx:BootstrapRibbonDropDownToggleButtonItem>
                            </Items>
                        </dx:BootstrapRibbonDropDownButtonItem>
                    </Items>
                </dx:BootstrapRibbonGroup>
            </Groups>
        </dx:BootstrapRibbonTab>
    </Tabs>
</dx:BootstrapRibbon>

One Line Mode

The BootstrapRibbon control can display all items within an active tab in one line, which makes the ribbon look more compact. Set the OneLineMode property to true to enable this mode.

ASPXCopy 
<dx:BootstrapRibbon runat="server" OneLineMode="true">
    <Tabs>
        <dx:BootstrapRibbonTab Text="Home" Name="Home" AccessKey="H">
            <Groups>
                <dx:BootstrapRibbonGroup Text="Clipboard" ShowDialogBoxLauncher="true" Name="Clipboard"
                    DialogBoxLauncherAccessKey="FO" IconCssClass="fa fa-cut">
                    <Items>
                        <dx:BootstrapRibbonDropDownButtonItem Text="Paste" Name="paste" Size="Large" AccessKey="V" IconCssClass="fa fa-paste">
                            <Items>
                                <dx:BootstrapRibbonDropDownButtonItem Text="Plain text" IconCssClass="fa fa-paste">
                                </dx:BootstrapRibbonDropDownButtonItem>
                                <dx:BootstrapRibbonDropDownButtonItem Text="Source formatting" IconCssClass="fa fa-paste">
                                </dx:BootstrapRibbonDropDownButtonItem>
                            </Items>
                        </dx:BootstrapRibbonDropDownButtonItem>
                        <dx:BootstrapRibbonButtonItem Text="Cut" Name="Cut" AccessKey="X" IconCssClass="fa fa-cut"></dx:BootstrapRibbonButtonItem>
                        <dx:BootstrapRibbonButtonItem Text="Copy" Name="Copy" AccessKey="C" IconCssClass="fa fa-copy"></dx:BootstrapRibbonButtonItem>
                        <dx:BootstrapRibbonButtonItem Text="Clear" Name="Clear" AccessKey="D" IconCssClass="fa fa-eraser"></dx:BootstrapRibbonButtonItem>
                    </Items>
                </dx:BootstrapRibbonGroup>
                <dx:BootstrapRibbonGroup Text="Font" IconCssClass="fa fa-font" ShowDialogBoxLauncher="true">
                    <Items>
                        <dx:BootstrapRibbonComboBoxItem>
                            <Items>
                                <dx:BootstrapListEditItem Text="Arial"></dx:BootstrapListEditItem>
                                <dx:BootstrapListEditItem Text="Times New Roman"></dx:BootstrapListEditItem>
                                <dx:BootstrapListEditItem Text="Calibri"></dx:BootstrapListEditItem>
                                <dx:BootstrapListEditItem Text="Verdana"></dx:BootstrapListEditItem>
                            </Items>
                            <PropertiesComboBox AllowNull="true" NullText="Font Family"></PropertiesComboBox>
                        </dx:BootstrapRibbonComboBoxItem>
                        <dx:BootstrapRibbonComboBoxItem>
                            <Items>
                                <dx:BootstrapListEditItem Text="10"></dx:BootstrapListEditItem>
                                <dx:BootstrapListEditItem Text="11"></dx:BootstrapListEditItem>
                                <dx:BootstrapListEditItem Text="12"></dx:BootstrapListEditItem>
                                <dx:BootstrapListEditItem Text="14"></dx:BootstrapListEditItem>
                                <dx:BootstrapListEditItem Text="16"></dx:BootstrapListEditItem>
                                <dx:BootstrapListEditItem Text="18"></dx:BootstrapListEditItem>
                            </Items>
                            <PropertiesComboBox AllowNull="true" NullText="Font size"></PropertiesComboBox>
                        </dx:BootstrapRibbonComboBoxItem>
                        <dx:BootstrapRibbonToggleButtonItem Name="bold" IconCssClass="fa fa-bold"></dx:BootstrapRibbonToggleButtonItem>
                        <dx:BootstrapRibbonToggleButtonItem Name="italic" IconCssClass="fa fa-italic"></dx:BootstrapRibbonToggleButtonItem>
                        <dx:BootstrapRibbonToggleButtonItem Name="underline" IconCssClass="fas fa-underline"></dx:BootstrapRibbonToggleButtonItem>
                        <dx:BootstrapRibbonToggleButtonItem Name="strikethrough" IconCssClass="fas fa-strikethrough"></dx:BootstrapRibbonToggleButtonItem>
                        <dx:BootstrapRibbonToggleButtonItem Name="subscript" IconCssClass="fas fa-subscript"></dx:BootstrapRibbonToggleButtonItem>
                        <dx:BootstrapRibbonToggleButtonItem Name="superscript" IconCssClass="fas fa-superscript"></dx:BootstrapRibbonToggleButtonItem>
                        <dx:BootstrapRibbonColorButtonItem EnableCustomColors="true" IconCssClass="fas fa-highlighter">
                        </dx:BootstrapRibbonColorButtonItem>
                        <dx:BootstrapRibbonColorButtonItem IconCssClass="fas fa-fill-drip">
                        </dx:BootstrapRibbonColorButtonItem>
                    </Items>
                </dx:BootstrapRibbonGroup>
                <dx:BootstrapRibbonGroup Text="Paragraph" IconCssClass="fa fa-paragraph">
                    <Items>
                        <dx:BootstrapRibbonButtonItem IconCssClass="fa fa-list-ul"></dx:BootstrapRibbonButtonItem>
                        <dx:BootstrapRibbonButtonItem IconCssClass="fa fa-list-ol"></dx:BootstrapRibbonButtonItem>
                        <dx:BootstrapRibbonButtonItem IconCssClass="fa fa-indent"></dx:BootstrapRibbonButtonItem>
                        <dx:BootstrapRibbonButtonItem IconCssClass="fa fa-outdent"></dx:BootstrapRibbonButtonItem>
                        <dx:BootstrapRibbonButtonItem IconCssClass="fa fa-sort-alpha-down"></dx:BootstrapRibbonButtonItem>
                        <dx:BootstrapRibbonButtonItem IconCssClass="fa fa-paragraph"></dx:BootstrapRibbonButtonItem>
                        <dx:BootstrapRibbonOptionButtonItem OptionGroupName="align" IconCssClass="fa fa-align-justify"></dx:BootstrapRibbonOptionButtonItem>
                        <dx:BootstrapRibbonOptionButtonItem OptionGroupName="align" IconCssClass="fa fa-align-left"></dx:BootstrapRibbonOptionButtonItem>
                        <dx:BootstrapRibbonOptionButtonItem OptionGroupName="align" IconCssClass="fa fa-align-center"></dx:BootstrapRibbonOptionButtonItem>
                        <dx:BootstrapRibbonOptionButtonItem OptionGroupName="align" IconCssClass="fa fa-align-right"></dx:BootstrapRibbonOptionButtonItem>
                    </Items>
                </dx:BootstrapRibbonGroup>
                <dx:BootstrapRibbonGroup Text="Search" IconCssClass="fa fa-search">
                    <Items>
                        <dx:BootstrapRibbonDropDownButtonItem Text="Find" IconCssClass="fa fa-search">
                            <Items>
                                <dx:BootstrapRibbonDropDownButtonItem Text="Find" IconCssClass="fa fa-search">
                                </dx:BootstrapRibbonDropDownButtonItem>
                                <dx:BootstrapRibbonDropDownButtonItem Text="Go To" IconCssClass="fa fa-external-link-alt">
                                </dx:BootstrapRibbonDropDownButtonItem>
                            </Items>
                        </dx:BootstrapRibbonDropDownButtonItem>
                        <dx:BootstrapRibbonButtonItem Text="Replace" IconCssClass="fa fa-exchange-alt"></dx:BootstrapRibbonButtonItem>
                    </Items>
                </dx:BootstrapRibbonGroup>
            </Groups>
        </dx:BootstrapRibbonTab>
        <dx:BootstrapRibbonTab Name="View" Text="View">
            <Groups>
                <dx:BootstrapRibbonGroup Name="Zoom" Text="Zoom">
                    <Items>
                        <dx:BootstrapRibbonButtonItem Size="Large" Text="Zoom" IconCssClass="fa fa-search">
                        </dx:BootstrapRibbonButtonItem>
                        <dx:BootstrapRibbonButtonItem Text="Zoom In" IconCssClass="fa fa-search-plus">
                        </dx:BootstrapRibbonButtonItem>
                        <dx:BootstrapRibbonButtonItem Text="Zoom Out" IconCssClass="fa fa-search-minus">
                        </dx:BootstrapRibbonButtonItem>
                    </Items>
                </dx:BootstrapRibbonGroup>
                <dx:BootstrapRibbonGroup Name="Fullscreen" Text="Fullscreen">
                    <Items>
                        <dx:BootstrapRibbonButtonItem Size="Large" Text="Fullscreen" IconCssClass="fa fa-arrows-alt">
                        </dx:BootstrapRibbonButtonItem>
                    </Items>
                </dx:BootstrapRibbonGroup>
                <dx:BootstrapRibbonGroup Name="Settings" Text="Settings">
                    <Items>
                        <dx:BootstrapRibbonDropDownButtonItem Text="Settings" Size="Large" DropDownMode="false" IconCssClass="fa fa-cog">
                            <Items>
                                <dx:BootstrapRibbonDropDownToggleButtonItem Name="WordWrap" Text="Word Wrap">
                                </dx:BootstrapRibbonDropDownToggleButtonItem>
                                <dx:BootstrapRibbonDropDownToggleButtonItem Name="NonprintingCharacters" Text="Nonprinting Characters">
                                </dx:BootstrapRibbonDropDownToggleButtonItem>
                            </Items>
                        </dx:BootstrapRibbonDropDownButtonItem>
                    </Items>
                </dx:BootstrapRibbonGroup>
            </Groups>
        </dx:BootstrapRibbonTab>
    </Tabs>
</dx:BootstrapRibbon>

Adaptivity

The Ribbon control relies to container's width to adjust own content

The ribbon control automatically adjusts on browser window resize.

If the container's width has changed while the window size remains the same, use the BootstrapClientRibbon.AdjustControl method to force ribbon's adjusting.

The following steps are applied during adjusting to group's content until ribbon fits container:

  1. Overlapping items are transfered to the next row if possible (group can contains up to 3 rows)
  2. Small items' texts are collapsed
  3. Groups are collapsed into group icon, group's content will be shown in popup below the group

The described steps are applied to groups from the last group to first group.

Show QRCode
QRCode Please click here to open the demonstration page in the fullscreen mode
ASPXCopy 
<dx:BootstrapRibbon runat="server">
    <Tabs>
        <dx:BootstrapRibbonTab Text="Home" Name="Home" AccessKey="H">
            <Groups>
                <dx:BootstrapRibbonGroup Text="Clipboard" ShowDialogBoxLauncher="true" Name="Clipboard"
                    DialogBoxLauncherAccessKey="FO" IconCssClass="fa fa-cut">
                    <Items>
                        <dx:BootstrapRibbonDropDownButtonItem Text="Paste" Size="Large" AccessKey="V" IconCssClass="fa fa-paste">
                            <Items>
                                <dx:BootstrapRibbonDropDownButtonItem Text="Plain text" IconCssClass="fa fa-paste">
                                </dx:BootstrapRibbonDropDownButtonItem>
                                <dx:BootstrapRibbonDropDownButtonItem Text="Source formatting" IconCssClass="fa fa-paste">
                                </dx:BootstrapRibbonDropDownButtonItem>
                            </Items>
                        </dx:BootstrapRibbonDropDownButtonItem>
                        <dx:BootstrapRibbonButtonItem Text="Cut" Name="Cut" AccessKey="X" IconCssClass="fa fa-cut">
                        </dx:BootstrapRibbonButtonItem>
                        <dx:BootstrapRibbonButtonItem Text="Copy" Name="Copy" AccessKey="C" IconCssClass="fa fa-copy">
                        </dx:BootstrapRibbonButtonItem>
                        <dx:BootstrapRibbonButtonItem Text="Clear" Name="Clear" AccessKey="D" IconCssClass="fa fa-eraser">
                        </dx:BootstrapRibbonButtonItem>
                    </Items>
                </dx:BootstrapRibbonGroup>
                <dx:BootstrapRibbonGroup Text="Font" IconCssClass="fa fa-font" ShowDialogBoxLauncher="true">
                    <Items>
                        <dx:BootstrapRibbonComboBoxItem>
                            <Items>
                                <dx:BootstrapListEditItem Text="Arial"></dx:BootstrapListEditItem>
                                <dx:BootstrapListEditItem Text="Times New Roman"></dx:BootstrapListEditItem>
                                <dx:BootstrapListEditItem Text="Calibri"></dx:BootstrapListEditItem>
                                <dx:BootstrapListEditItem Text="Verdana"></dx:BootstrapListEditItem>
                            </Items>
                            <PropertiesComboBox AllowNull="true" NullText="Font Family"></PropertiesComboBox>
                        </dx:BootstrapRibbonComboBoxItem>
                        <dx:BootstrapRibbonComboBoxItem>
                            <Items>
                                <dx:BootstrapListEditItem Text="10"></dx:BootstrapListEditItem>
                                <dx:BootstrapListEditItem Text="11"></dx:BootstrapListEditItem>
                                <dx:BootstrapListEditItem Text="12"></dx:BootstrapListEditItem>
                                <dx:BootstrapListEditItem Text="14"></dx:BootstrapListEditItem>
                                <dx:BootstrapListEditItem Text="16"></dx:BootstrapListEditItem>
                                <dx:BootstrapListEditItem Text="18"></dx:BootstrapListEditItem>
                            </Items>
                            <PropertiesComboBox AllowNull="true" NullText="Font size"></PropertiesComboBox>
                        </dx:BootstrapRibbonComboBoxItem>
                        <dx:BootstrapRibbonToggleButtonItem Name="bold" IconCssClass="fa fa-bold">
                        </dx:BootstrapRibbonToggleButtonItem>
                        <dx:BootstrapRibbonToggleButtonItem Name="italic" IconCssClass="fa fa-italic">
                        </dx:BootstrapRibbonToggleButtonItem>
                        <dx:BootstrapRibbonToggleButtonItem Name="underline" IconCssClass="fas fa-underline">
                        </dx:BootstrapRibbonToggleButtonItem>
                        <dx:BootstrapRibbonToggleButtonItem Name="strikethrough" IconCssClass="fas fa-strikethrough">
                        </dx:BootstrapRibbonToggleButtonItem>
                        <dx:BootstrapRibbonToggleButtonItem Name="subscript" IconCssClass="fas fa-subscript">
                        </dx:BootstrapRibbonToggleButtonItem>
                        <dx:BootstrapRibbonToggleButtonItem Name="superscript" IconCssClass="fas fa-superscript">
                        </dx:BootstrapRibbonToggleButtonItem>
                        <dx:BootstrapRibbonColorButtonItem EnableCustomColors="true" IconCssClass="fas fa-highlighter">
                        </dx:BootstrapRibbonColorButtonItem>
                        <dx:BootstrapRibbonColorButtonItem IconCssClass="fas fa-fill-drip">
                        </dx:BootstrapRibbonColorButtonItem>
                    </Items>
                </dx:BootstrapRibbonGroup>
                <dx:BootstrapRibbonGroup Text="Paragraph" IconCssClass="fa fa-paragraph">
                    <Items>
                        <dx:BootstrapRibbonButtonItem IconCssClass="fa fa-list-ul">
                        </dx:BootstrapRibbonButtonItem>
                        <dx:BootstrapRibbonButtonItem IconCssClass="fa fa-list-ol">
                        </dx:BootstrapRibbonButtonItem>
                        <dx:BootstrapRibbonButtonItem IconCssClass="fa fa-indent">
                        </dx:BootstrapRibbonButtonItem>
                        <dx:BootstrapRibbonButtonItem IconCssClass="fa fa-outdent">
                        </dx:BootstrapRibbonButtonItem>
                        <dx:BootstrapRibbonButtonItem IconCssClass="fa fa-sort-alpha-down">
                        </dx:BootstrapRibbonButtonItem>
                        <dx:BootstrapRibbonButtonItem IconCssClass="fa fa-paragraph">
                        </dx:BootstrapRibbonButtonItem>
                        <dx:BootstrapRibbonOptionButtonItem OptionGroupName="align" IconCssClass="fa fa-align-justify">
                        </dx:BootstrapRibbonOptionButtonItem>
                        <dx:BootstrapRibbonOptionButtonItem OptionGroupName="align" IconCssClass="fa fa-align-left">
                        </dx:BootstrapRibbonOptionButtonItem>
                        <dx:BootstrapRibbonOptionButtonItem OptionGroupName="align" IconCssClass="fa fa-align-center">
                        </dx:BootstrapRibbonOptionButtonItem>
                        <dx:BootstrapRibbonOptionButtonItem OptionGroupName="align" IconCssClass="fa fa-align-right">
                        </dx:BootstrapRibbonOptionButtonItem>
                    </Items>
                </dx:BootstrapRibbonGroup>
                <dx:BootstrapRibbonGroup Name="Editing" IconCssClass="fa fa-search">
                    <Items>
                        <dx:BootstrapRibbonDropDownButtonItem Text="Find" IconCssClass="fa fa-search">
                            <Items>
                                <dx:BootstrapRibbonDropDownButtonItem Text="Find" IconCssClass="fa fa-search">
                                </dx:BootstrapRibbonDropDownButtonItem>
                                <dx:BootstrapRibbonDropDownButtonItem Text="Go To" IconCssClass="fa fa-external-link-alt">
                                </dx:BootstrapRibbonDropDownButtonItem>
                            </Items>
                        </dx:BootstrapRibbonDropDownButtonItem>
                        <dx:BootstrapRibbonButtonItem Text="Replace" IconCssClass="fa fa-exchange-alt">
                        </dx:BootstrapRibbonButtonItem>
                    </Items>
                </dx:BootstrapRibbonGroup>
            </Groups>
        </dx:BootstrapRibbonTab>
        <dx:BootstrapRibbonTab Name="View" Text="View">
            <Groups>
                <dx:BootstrapRibbonGroup Name="Zoom" Text="Zoom">
                    <Items>
                        <dx:BootstrapRibbonButtonItem Size="Large" Text="Zoom" IconCssClass="fa fa-search">
                        </dx:BootstrapRibbonButtonItem>
                        <dx:BootstrapRibbonButtonItem Text="Zoom In" IconCssClass="fa fa-search-plus">
                        </dx:BootstrapRibbonButtonItem>
                        <dx:BootstrapRibbonButtonItem Text="Zoom Out" IconCssClass="fa fa-search-minus">
                        </dx:BootstrapRibbonButtonItem>
                    </Items>
                </dx:BootstrapRibbonGroup>
                <dx:BootstrapRibbonGroup Name="Fullscreen" Text="Fullscreen">
                    <Items>
                        <dx:BootstrapRibbonButtonItem Size="Large" Text="Fullscreen" IconCssClass="fa fa-arrows-alt">
                        </dx:BootstrapRibbonButtonItem>
                    </Items>
                </dx:BootstrapRibbonGroup>
                <dx:BootstrapRibbonGroup Name="Settings" Text="Settings">
                    <Items>
                        <dx:BootstrapRibbonDropDownButtonItem Text="Settings" Size="Large" DropDownMode="false" IconCssClass="fa fa-cog">
                            <Items>
                                <dx:BootstrapRibbonDropDownToggleButtonItem Name="WordWrap" Text="Word Wrap">
                                </dx:BootstrapRibbonDropDownToggleButtonItem>
                                <dx:BootstrapRibbonDropDownToggleButtonItem Name="NonprintingCharacters" Text="Nonprinting Characters">
                                </dx:BootstrapRibbonDropDownToggleButtonItem>
                            </Items>
                        </dx:BootstrapRibbonDropDownButtonItem>
                    </Items>
                </dx:BootstrapRibbonGroup>
            </Groups>
        </dx:BootstrapRibbonTab>
    </Tabs>
</dx:BootstrapRibbon>

Templates

The Ribbon control supports the template technology allowing you to customize a control's appearance and layout.

The look of the Ribbon control's default elements can be modified using a specific template that defines how an element will be rendered by a client browser. This control allows you to create templates for two elements: file tab (FileTabTemplate) and item (Template).

In this demo, the FileTabTemplate property is used to replace tab text with an arrow image that invokes a popup menu. The content of a ribbon item is defined by its Template property.

ASPXCopy 
<dx:BootstrapRibbon runat="server" ShowGroupLabels="false" AllowMinimize="false">
    <FileTabTemplate>
        <span class="chat-link nav-link bg-info text-white" style="cursor: pointer;">
            <span class="fas fa-comments mr-1"></span>Live chat
        </span>
    </FileTabTemplate>
    <Tabs>
        <dx:BootstrapRibbonTab Text="Contact">
            <Groups>
                <dx:BootstrapRibbonGroup>
                    <Items>
                        <dx:BootstrapRibbonTemplateItem>
                            <Template>
                                <div class="p-2">
                                    <p class="font-weight-bold">Technical Support</p>
                                    <p><span class="mr-1">Internet:</span> <a href="javascript:;">https://supportcenter.devexpress.com/</a></p>
                                    <p><span class="mr-1">Email:</span> <a href="javascript:;">support@devexpress.com</a></p>
                                </div>
                                <div class="p-2">
                                    <p class="font-weight-bold">Corporate & Multi-Seat Pricing</p>
                                    <p><span class="mr-1">Tel:</span> <a href="javascript:;">+ 1 (818) 844 3383</a></p>
                                    <p><span class="mr-1">Email:</span> <a href="javascript:;">CorpSales@devexpress.com</a></p>
                                </div>
                            </Template>
                        </dx:BootstrapRibbonTemplateItem>
                    </Items>
                </dx:BootstrapRibbonGroup>
            </Groups>
        </dx:BootstrapRibbonTab>
        <dx:BootstrapRibbonTab Text="Search">
            <Groups>
                <dx:BootstrapRibbonGroup>
                    <Items>
                        <dx:BootstrapRibbonTemplateItem>
                            <Template>
                                <div class="p-2 w-100">
                                    <dx:BootstrapButtonEdit runat="server" NullText="Type keywords here" NullTextDisplayMode="UnfocusedAndFocused">
                                        <CssClasses Control="mb-2" />
                                        <Buttons>
                                            <dx:BootstrapEditButton Text="Search" />
                                        </Buttons>
                                    </dx:BootstrapButtonEdit>
                                    <dx:BootstrapCheckBoxList runat="server" RepeatDirection="Horizontal">
                                        <Items>
                                            <dx:BootstrapListEditItem Text="User tickets"></dx:BootstrapListEditItem>
                                            <dx:BootstrapListEditItem Text="Documentation"></dx:BootstrapListEditItem>
                                            <dx:BootstrapListEditItem Text="What's new"></dx:BootstrapListEditItem>
                                            <dx:BootstrapListEditItem Text="Code examples"></dx:BootstrapListEditItem>
                                        </Items>
                                    </dx:BootstrapCheckBoxList>
                                </div>
                            </Template>
                        </dx:BootstrapRibbonTemplateItem>
                    </Items>
                </dx:BootstrapRibbonGroup>
            </Groups>
        </dx:BootstrapRibbonTab>
    </Tabs>
</dx:BootstrapRibbon>
<dx:BootstrapPopupControl runat="server" PopupElementCssSelector=".chat-link" HeaderText="Live Chat" >
    <SettingsBootstrap Sizing="Large" />
    <SettingsAdaptivity HorizontalAlign="WindowCenter" VerticalAlign="WindowCenter" Mode="Always" />
    <ContentCollection>
        <dx:ContentControl>
            <div class="d-block mb-4"><strong>John: </strong>Hello, Thank you for contacting DevExpress. How may I assist you today?</div>
            <div class="d-flex">
                <dx:BootstrapTextBox runat="server" NullText="Type in your message here and press the Send button">
                    <CssClasses Control="flex-grow-1 mr-2" />
                </dx:BootstrapTextBox>
                <dx:BootstrapButton runat="server" Text="Send"></dx:BootstrapButton>
            </div>
        </dx:ContentControl>
    </ContentCollection>
</dx:BootstrapPopupControl>

Client-Side Events

This Demo illustrates the capabilities of the Bootstrap Ribbon control's client events. This demo allows you to specify which client-side events you want to track. Interact with the Ribbon interface, and information about all tracked events raised in response of your actions will be displayed in the event log.

Clipboard
Font
Paragraph
Search
Zoom
Fullscreen
Settings
Trace Events:
ASPXJSCopy 
<div class="alert alert-info" role="alert">
    To show key tips, press
    <span class="font-weight-bold">F11</span>
    or button
    <dx:BootstrapButton runat="server" ClientInstanceName="ShowKeyTipsButton" AutoPostBack="false" Text="Show key tips">
        <SettingsBootstrap RenderOption="Info" />
    </dx:BootstrapButton>
</div>
<dx:BootstrapRibbon runat="server"
    KeyboardSupport="true" AutoGenerateAccessKeys="true" KeyTipModeShortcut="F11">
    <ClientSideEvents Init="onInit" ActiveTabChanged="onActiveTabChanged" CommandExecuted="onCommandExecuted"
        DialogBoxLauncherClicked="onDialogBoxLauncherClicked" FileTabClicked="onFileTabClicked"
        KeyTipsClosedOnEscape="onKeyTipsClosedOnEscape" MinimizationStateChanged="onMinimizationStateChanged" />
   <Toolbar>
        <Items>
            <dx:BootstrapRibbonButtonItem BeginGroup="true" IconCssClass="fa fa-undo" Name="undo">
            </dx:BootstrapRibbonButtonItem>
            <dx:BootstrapRibbonButtonItem IconCssClass="fa fa-redo" Name="redo">
            </dx:BootstrapRibbonButtonItem>
            <dx:BootstrapRibbonButtonItem BeginGroup="true" IconCssClass="fa fa-copy" Name="copy">
            </dx:BootstrapRibbonButtonItem>
            <dx:BootstrapRibbonButtonItem IconCssClass="fa fa-cut" Name="cut">
            </dx:BootstrapRibbonButtonItem>
            <dx:BootstrapRibbonButtonItem IconCssClass="fa fa-paste" Name="paste">
            </dx:BootstrapRibbonButtonItem>
            <dx:BootstrapRibbonToggleButtonItem BeginGroup="true" IconCssClass="fa fa-bold" Name="bold">
            </dx:BootstrapRibbonToggleButtonItem>
            <dx:BootstrapRibbonToggleButtonItem IconCssClass="fa fa-italic" Name="italic">
            </dx:BootstrapRibbonToggleButtonItem>
            <dx:BootstrapRibbonToggleButtonItem IconCssClass="fas fa-underline" Name="italic">
            </dx:BootstrapRibbonToggleButtonItem>
            <dx:BootstrapRibbonToggleButtonItem IconCssClass="fas fa-strikethrough" Name="strikethrough">
            </dx:BootstrapRibbonToggleButtonItem>
            <dx:BootstrapRibbonToggleButtonItem IconCssClass="fas fa-subscript" Name="subscript">
            </dx:BootstrapRibbonToggleButtonItem>
            <dx:BootstrapRibbonToggleButtonItem IconCssClass="fas fa-superscript" Name="superscript">
            </dx:BootstrapRibbonToggleButtonItem>
       </Items>
   </Toolbar>
    <Tabs>
        <dx:BootstrapRibbonTab Text="Home" Name="Home" AccessKey="H">
            <Groups>
                <dx:BootstrapRibbonGroup Text="Clipboard" ShowDialogBoxLauncher="true" Name="Clipboard"
                    DialogBoxLauncherAccessKey="FO" IconCssClass="fa fa-cut">
                    <Items>
                        <dx:BootstrapRibbonDropDownButtonItem Text="Paste" Name="paste" Size="Large" AccessKey="V" IconCssClass="fa fa-paste">
                            <Items>
                                <dx:BootstrapRibbonDropDownButtonItem Text="Plain text" IconCssClass="fa fa-paste">
                                </dx:BootstrapRibbonDropDownButtonItem>
                                <dx:BootstrapRibbonDropDownButtonItem Text="Source formatting" IconCssClass="fa fa-paste">
                                </dx:BootstrapRibbonDropDownButtonItem>
                            </Items>
                        </dx:BootstrapRibbonDropDownButtonItem>
                        <dx:BootstrapRibbonButtonItem Text="Cut" Name="Cut" AccessKey="X" IconCssClass="fa fa-cut"></dx:BootstrapRibbonButtonItem>
                        <dx:BootstrapRibbonButtonItem Text="Copy" Name="Copy" AccessKey="C" IconCssClass="fa fa-copy"></dx:BootstrapRibbonButtonItem>
                        <dx:BootstrapRibbonButtonItem Text="Clear" Name="Clear" AccessKey="D" IconCssClass="fa fa-eraser"></dx:BootstrapRibbonButtonItem>
                    </Items>
                </dx:BootstrapRibbonGroup>
                <dx:BootstrapRibbonGroup Text="Font" IconCssClass="fa fa-font" ShowDialogBoxLauncher="true">
                    <Items>
                        <dx:BootstrapRibbonComboBoxItem>
                            <Items>
                                <dx:BootstrapListEditItem Text="Arial"></dx:BootstrapListEditItem>
                                <dx:BootstrapListEditItem Text="Times New Roman"></dx:BootstrapListEditItem>
                                <dx:BootstrapListEditItem Text="Calibri"></dx:BootstrapListEditItem>
                                <dx:BootstrapListEditItem Text="Verdana"></dx:BootstrapListEditItem>
                            </Items>
                            <PropertiesComboBox AllowNull="true" NullText="Font Family"></PropertiesComboBox>
                        </dx:BootstrapRibbonComboBoxItem>
                        <dx:BootstrapRibbonComboBoxItem>
                            <Items>
                                <dx:BootstrapListEditItem Text="10"></dx:BootstrapListEditItem>
                                <dx:BootstrapListEditItem Text="11"></dx:BootstrapListEditItem>
                                <dx:BootstrapListEditItem Text="12"></dx:BootstrapListEditItem>
                                <dx:BootstrapListEditItem Text="14"></dx:BootstrapListEditItem>
                                <dx:BootstrapListEditItem Text="16"></dx:BootstrapListEditItem>
                                <dx:BootstrapListEditItem Text="18"></dx:BootstrapListEditItem>
                            </Items>
                            <PropertiesComboBox AllowNull="true" NullText="Font size"></PropertiesComboBox>
                        </dx:BootstrapRibbonComboBoxItem>
                        <dx:BootstrapRibbonToggleButtonItem Name="bold" IconCssClass="fa fa-bold"></dx:BootstrapRibbonToggleButtonItem>
                        <dx:BootstrapRibbonToggleButtonItem Name="italic" IconCssClass="fa fa-italic"></dx:BootstrapRibbonToggleButtonItem>
                        <dx:BootstrapRibbonToggleButtonItem Name="underline" IconCssClass="fas fa-underline"></dx:BootstrapRibbonToggleButtonItem>
                        <dx:BootstrapRibbonToggleButtonItem Name="strikethrough" IconCssClass="fas fa-strikethrough"></dx:BootstrapRibbonToggleButtonItem>
                        <dx:BootstrapRibbonToggleButtonItem Name="subscript" IconCssClass="fas fa-subscript"></dx:BootstrapRibbonToggleButtonItem>
                        <dx:BootstrapRibbonToggleButtonItem Name="superscript" IconCssClass="fas fa-superscript"></dx:BootstrapRibbonToggleButtonItem>
                        <dx:BootstrapRibbonColorButtonItem EnableCustomColors="true" IconCssClass="fas fa-highlighter">
                        </dx:BootstrapRibbonColorButtonItem>
                        <dx:BootstrapRibbonColorButtonItem IconCssClass="fas fa-fill-drip">
                        </dx:BootstrapRibbonColorButtonItem>
                    </Items>
                </dx:BootstrapRibbonGroup>
                <dx:BootstrapRibbonGroup Text="Paragraph" IconCssClass="fa fa-paragraph">
                    <Items>
                        <dx:BootstrapRibbonButtonItem IconCssClass="fa fa-list-ul"></dx:BootstrapRibbonButtonItem>
                        <dx:BootstrapRibbonButtonItem IconCssClass="fa fa-list-ol"></dx:BootstrapRibbonButtonItem>
                        <dx:BootstrapRibbonButtonItem IconCssClass="fa fa-indent"></dx:BootstrapRibbonButtonItem>
                        <dx:BootstrapRibbonButtonItem IconCssClass="fa fa-outdent"></dx:BootstrapRibbonButtonItem>
                        <dx:BootstrapRibbonButtonItem IconCssClass="fa fa-sort-alpha-down"></dx:BootstrapRibbonButtonItem>
                        <dx:BootstrapRibbonButtonItem IconCssClass="fa fa-paragraph"></dx:BootstrapRibbonButtonItem>
                        <dx:BootstrapRibbonOptionButtonItem OptionGroupName="align" IconCssClass="fa fa-align-justify"></dx:BootstrapRibbonOptionButtonItem>
                        <dx:BootstrapRibbonOptionButtonItem OptionGroupName="align" IconCssClass="fa fa-align-left"></dx:BootstrapRibbonOptionButtonItem>
                        <dx:BootstrapRibbonOptionButtonItem OptionGroupName="align" IconCssClass="fa fa-align-center"></dx:BootstrapRibbonOptionButtonItem>
                        <dx:BootstrapRibbonOptionButtonItem OptionGroupName="align" IconCssClass="fa fa-align-right"></dx:BootstrapRibbonOptionButtonItem>
                    </Items>
                </dx:BootstrapRibbonGroup>
                <dx:BootstrapRibbonGroup Text="Search" IconCssClass="fa fa-search">
                    <Items>
                        <dx:BootstrapRibbonDropDownButtonItem Text="Find" IconCssClass="fa fa-search">
                            <Items>
                                <dx:BootstrapRibbonDropDownButtonItem Text="Find" IconCssClass="fa fa-search">
                                </dx:BootstrapRibbonDropDownButtonItem>
                                <dx:BootstrapRibbonDropDownButtonItem Text="Go To" IconCssClass="fa fa-external-link-alt">
                                </dx:BootstrapRibbonDropDownButtonItem>
                            </Items>
                        </dx:BootstrapRibbonDropDownButtonItem>
                        <dx:BootstrapRibbonButtonItem Text="Replace" IconCssClass="fa fa-exchange-alt"></dx:BootstrapRibbonButtonItem>
                    </Items>
                </dx:BootstrapRibbonGroup>
            </Groups>
        </dx:BootstrapRibbonTab>
        <dx:BootstrapRibbonTab Name="View" Text="View">
            <Groups>
                <dx:BootstrapRibbonGroup Name="Zoom" Text="Zoom">
                    <Items>
                        <dx:BootstrapRibbonButtonItem Size="Large" Text="Zoom" IconCssClass="fa fa-search">
                        </dx:BootstrapRibbonButtonItem>
                        <dx:BootstrapRibbonButtonItem Text="Zoom In" IconCssClass="fa fa-search-plus">
                        </dx:BootstrapRibbonButtonItem>
                        <dx:BootstrapRibbonButtonItem Text="Zoom Out" IconCssClass="fa fa-search-minus">
                        </dx:BootstrapRibbonButtonItem>
                    </Items>
                </dx:BootstrapRibbonGroup>
                <dx:BootstrapRibbonGroup Name="Fullscreen" Text="Fullscreen">
                    <Items>
                        <dx:BootstrapRibbonButtonItem Size="Large" Text="Fullscreen" IconCssClass="fa fa-arrows-alt">
                        </dx:BootstrapRibbonButtonItem>
                    </Items>
                </dx:BootstrapRibbonGroup>
                <dx:BootstrapRibbonGroup Name="Settings" Text="Settings">
                    <Items>
                        <dx:BootstrapRibbonDropDownButtonItem Text="Settings" Size="Large" DropDownMode="false" IconCssClass="fa fa-cog">
                            <Items>
                                <dx:BootstrapRibbonDropDownToggleButtonItem Name="WordWrap" Text="Word Wrap">
                                </dx:BootstrapRibbonDropDownToggleButtonItem>
                                <dx:BootstrapRibbonDropDownToggleButtonItem Name="NonprintingCharacters" Text="Nonprinting Characters">
                                </dx:BootstrapRibbonDropDownToggleButtonItem>
                            </Items>
                        </dx:BootstrapRibbonDropDownButtonItem>
                    </Items>
                </dx:BootstrapRibbonGroup>
            </Groups>
        </dx:BootstrapRibbonTab>
    </Tabs>
</dx:BootstrapRibbon>
function onInit(s, e) {
    dxbsDemo.eventMonitor.trace(s, e, 'Init');
    ShowKeyTipsButton.Click.AddHandler(function () {
        s.ShowKeyTips();
    });
}
function onActiveTabChanged(s, e) {
    dxbsDemo.eventMonitor.trace(s, e, 'ActiveTabChanged');
}
function onCommandExecuted(s, e) {
    dxbsDemo.eventMonitor.trace(s, e, 'CommandExecuted');
}
function onDialogBoxLauncherClicked(s, e) {
    dxbsDemo.eventMonitor.trace(s, e, 'DialogBoxLauncherClicked');
}
function onFileTabClicked(s, e) {
    dxbsDemo.eventMonitor.trace(s, e, 'FileTabClicked');
}
function onKeyTipsClosedOnEscape(s, e) {
    dxbsDemo.eventMonitor.trace(s, e, 'KeyTipsClosedOnEscape');
}
function onMinimizationStateChanged(s, e) {
    dxbsDemo.eventMonitor.trace(s, e, 'MinimizationStateChanged');
}

Client-Side Functionality

The Ribbon control offers an advanced client-side API allowing you to manipulate the control and its elements.

This demo allows you to interactively explore capabilities of the Ribbon control's client-side API.

Clipboard
Font
Paragraph
Search
Zoom
Fullscreen
Settings
ASPXCopy 
<dx:BootstrapRibbon runat="server" ID="RibbonClientSideAPI" ClientInstanceName="RibbonClientSideAPI" KeyboardSupport="true"
    AutoGenerateAccessKeys="true" KeyTipModeShortcut="F9">
    <Toolbar>
        <Items>
            <dx:BootstrapRibbonButtonItem BeginGroup="true" IconCssClass="fa fa-undo" Name="undo">
            </dx:BootstrapRibbonButtonItem>
            <dx:BootstrapRibbonButtonItem IconCssClass="fa fa-redo" Name="redo">
            </dx:BootstrapRibbonButtonItem>
            <dx:BootstrapRibbonButtonItem BeginGroup="true" IconCssClass="fa fa-copy" Name="copy">
            </dx:BootstrapRibbonButtonItem>
            <dx:BootstrapRibbonButtonItem IconCssClass="fa fa-cut" Name="cut">
            </dx:BootstrapRibbonButtonItem>
            <dx:BootstrapRibbonButtonItem IconCssClass="fa fa-paste" Name="paste">
            </dx:BootstrapRibbonButtonItem>
            <dx:BootstrapRibbonToggleButtonItem BeginGroup="true" IconCssClass="fa fa-bold" Name="bold">
            </dx:BootstrapRibbonToggleButtonItem>
            <dx:BootstrapRibbonToggleButtonItem IconCssClass="fa fa-italic" Name="italic">
            </dx:BootstrapRibbonToggleButtonItem>
            <dx:BootstrapRibbonToggleButtonItem IconCssClass="fas fa-underline" Name="italic">
            </dx:BootstrapRibbonToggleButtonItem>
            <dx:BootstrapRibbonToggleButtonItem IconCssClass="fas fa-strikethrough" Name="strikethrough">
            </dx:BootstrapRibbonToggleButtonItem>
            <dx:BootstrapRibbonToggleButtonItem IconCssClass="fas fa-subscript" Name="subscript">
            </dx:BootstrapRibbonToggleButtonItem>
            <dx:BootstrapRibbonToggleButtonItem IconCssClass="fas fa-superscript" Name="superscript">
            </dx:BootstrapRibbonToggleButtonItem>
        </Items>
    </Toolbar>
    <Tabs>
        <dx:BootstrapRibbonTab Text="Home" Name="Home" AccessKey="H">
            <Groups>
                <dx:BootstrapRibbonGroup Text="Clipboard" ShowDialogBoxLauncher="true" Name="Clipboard"
                    DialogBoxLauncherAccessKey="FO" IconCssClass="fa fa-cut">
                    <Items>
                        <dx:BootstrapRibbonDropDownButtonItem Text="Paste" Name="paste" Size="Large" AccessKey="V" IconCssClass="fa fa-paste">
                            <Items>
                                <dx:BootstrapRibbonDropDownButtonItem Text="Plain text" IconCssClass="fa fa-paste">
                                </dx:BootstrapRibbonDropDownButtonItem>
                                <dx:BootstrapRibbonDropDownButtonItem Text="Source formatting" IconCssClass="fa fa-paste">
                                </dx:BootstrapRibbonDropDownButtonItem>
                            </Items>
                        </dx:BootstrapRibbonDropDownButtonItem>
                        <dx:BootstrapRibbonButtonItem Text="Cut" Name="Cut" AccessKey="X" IconCssClass="fa fa-cut"></dx:BootstrapRibbonButtonItem>
                        <dx:BootstrapRibbonButtonItem Text="Copy" Name="Copy" AccessKey="C" IconCssClass="fa fa-copy"></dx:BootstrapRibbonButtonItem>
                        <dx:BootstrapRibbonButtonItem Text="Clear" Name="Clear" AccessKey="D" IconCssClass="fa fa-eraser"></dx:BootstrapRibbonButtonItem>
                    </Items>
                </dx:BootstrapRibbonGroup>
                <dx:BootstrapRibbonGroup Text="Font" IconCssClass="fa fa-font" ShowDialogBoxLauncher="true">
                    <Items>
                        <dx:BootstrapRibbonComboBoxItem>
                            <Items>
                                <dx:BootstrapListEditItem Text="Arial"></dx:BootstrapListEditItem>
                                <dx:BootstrapListEditItem Text="Times New Roman"></dx:BootstrapListEditItem>
                                <dx:BootstrapListEditItem Text="Calibri"></dx:BootstrapListEditItem>
                                <dx:BootstrapListEditItem Text="Verdana"></dx:BootstrapListEditItem>
                            </Items>
                            <PropertiesComboBox AllowNull="true" NullText="Font Family"></PropertiesComboBox>
                        </dx:BootstrapRibbonComboBoxItem>
                        <dx:BootstrapRibbonComboBoxItem>
                            <Items>
                                <dx:BootstrapListEditItem Text="10"></dx:BootstrapListEditItem>
                                <dx:BootstrapListEditItem Text="11"></dx:BootstrapListEditItem>
                                <dx:BootstrapListEditItem Text="12"></dx:BootstrapListEditItem>
                                <dx:BootstrapListEditItem Text="14"></dx:BootstrapListEditItem>
                                <dx:BootstrapListEditItem Text="16"></dx:BootstrapListEditItem>
                                <dx:BootstrapListEditItem Text="18"></dx:BootstrapListEditItem>
                            </Items>
                            <PropertiesComboBox AllowNull="true" NullText="Font size"></PropertiesComboBox>
                        </dx:BootstrapRibbonComboBoxItem>
                        <dx:BootstrapRibbonToggleButtonItem Name="bold" IconCssClass="fa fa-bold"></dx:BootstrapRibbonToggleButtonItem>
                        <dx:BootstrapRibbonToggleButtonItem Name="italic" IconCssClass="fa fa-italic"></dx:BootstrapRibbonToggleButtonItem>
                        <dx:BootstrapRibbonToggleButtonItem Name="underline" IconCssClass="fas fa-underline"></dx:BootstrapRibbonToggleButtonItem>
                        <dx:BootstrapRibbonToggleButtonItem Name="strikethrough" IconCssClass="fas fa-strikethrough"></dx:BootstrapRibbonToggleButtonItem>
                        <dx:BootstrapRibbonToggleButtonItem Name="subscript" IconCssClass="fas fa-subscript"></dx:BootstrapRibbonToggleButtonItem>
                        <dx:BootstrapRibbonToggleButtonItem Name="superscript" IconCssClass="fas fa-superscript"></dx:BootstrapRibbonToggleButtonItem>
                        <dx:BootstrapRibbonColorButtonItem EnableCustomColors="true" IconCssClass="fas fa-highlighter">
                        </dx:BootstrapRibbonColorButtonItem>
                        <dx:BootstrapRibbonColorButtonItem IconCssClass="fas fa-fill-drip">
                        </dx:BootstrapRibbonColorButtonItem>
                    </Items>
                </dx:BootstrapRibbonGroup>
                <dx:BootstrapRibbonGroup Text="Paragraph" IconCssClass="fa fa-paragraph">
                    <Items>
                        <dx:BootstrapRibbonButtonItem IconCssClass="fa fa-list-ul"></dx:BootstrapRibbonButtonItem>
                        <dx:BootstrapRibbonButtonItem IconCssClass="fa fa-list-ol"></dx:BootstrapRibbonButtonItem>
                        <dx:BootstrapRibbonButtonItem IconCssClass="fa fa-indent"></dx:BootstrapRibbonButtonItem>
                        <dx:BootstrapRibbonButtonItem IconCssClass="fa fa-outdent"></dx:BootstrapRibbonButtonItem>
                        <dx:BootstrapRibbonButtonItem IconCssClass="fa fa-sort-alpha-down"></dx:BootstrapRibbonButtonItem>
                        <dx:BootstrapRibbonButtonItem IconCssClass="fa fa-paragraph"></dx:BootstrapRibbonButtonItem>
                        <dx:BootstrapRibbonOptionButtonItem OptionGroupName="align" IconCssClass="fa fa-align-justify"></dx:BootstrapRibbonOptionButtonItem>
                        <dx:BootstrapRibbonOptionButtonItem OptionGroupName="align" IconCssClass="fa fa-align-left"></dx:BootstrapRibbonOptionButtonItem>
                        <dx:BootstrapRibbonOptionButtonItem OptionGroupName="align" IconCssClass="fa fa-align-center"></dx:BootstrapRibbonOptionButtonItem>
                        <dx:BootstrapRibbonOptionButtonItem OptionGroupName="align" IconCssClass="fa fa-align-right"></dx:BootstrapRibbonOptionButtonItem>
                    </Items>
                </dx:BootstrapRibbonGroup>
                <dx:BootstrapRibbonGroup Text="Search" IconCssClass="fa fa-search">
                    <Items>
                        <dx:BootstrapRibbonDropDownButtonItem Text="Find" IconCssClass="fa fa-search">
                            <Items>
                                <dx:BootstrapRibbonDropDownButtonItem Text="Find" IconCssClass="fa fa-search">
                                </dx:BootstrapRibbonDropDownButtonItem>
                                <dx:BootstrapRibbonDropDownButtonItem Text="Go To" IconCssClass="fa fa-external-link-alt">
                                </dx:BootstrapRibbonDropDownButtonItem>
                            </Items>
                        </dx:BootstrapRibbonDropDownButtonItem>
                        <dx:BootstrapRibbonButtonItem Text="Replace" IconCssClass="fa fa-exchange-alt"></dx:BootstrapRibbonButtonItem>
                    </Items>
                </dx:BootstrapRibbonGroup>
            </Groups>
        </dx:BootstrapRibbonTab>
        <dx:BootstrapRibbonTab Name="View" Text="View">
            <Groups>
                <dx:BootstrapRibbonGroup Name="Zoom" Text="Zoom">
                    <Items>
                        <dx:BootstrapRibbonButtonItem Size="Large" Text="Zoom" IconCssClass="fa fa-search">
                        </dx:BootstrapRibbonButtonItem>
                        <dx:BootstrapRibbonButtonItem Text="Zoom In" IconCssClass="fa fa-search-plus">
                        </dx:BootstrapRibbonButtonItem>
                        <dx:BootstrapRibbonButtonItem Text="Zoom Out" IconCssClass="fa fa-search-minus">
                        </dx:BootstrapRibbonButtonItem>
                    </Items>
                </dx:BootstrapRibbonGroup>
                <dx:BootstrapRibbonGroup Name="Fullscreen" Text="Fullscreen">
                    <Items>
                        <dx:BootstrapRibbonButtonItem Size="Large" Text="Fullscreen" IconCssClass="fa fa-arrows-alt">
                        </dx:BootstrapRibbonButtonItem>
                    </Items>
                </dx:BootstrapRibbonGroup>
                <dx:BootstrapRibbonGroup Name="Settings" Text="Settings">
                    <Items>
                        <dx:BootstrapRibbonDropDownButtonItem Text="Settings" Size="Large" DropDownMode="false" IconCssClass="fa fa-cog">
                            <Items>
                                <dx:BootstrapRibbonDropDownToggleButtonItem Name="WordWrap" Text="Word Wrap">
                                </dx:BootstrapRibbonDropDownToggleButtonItem>
                                <dx:BootstrapRibbonDropDownToggleButtonItem Name="NonprintingCharacters" Text="Nonprinting Characters">
                                </dx:BootstrapRibbonDropDownToggleButtonItem>
                            </Items>
                        </dx:BootstrapRibbonDropDownButtonItem>
                    </Items>
                </dx:BootstrapRibbonGroup>
            </Groups>
        </dx:BootstrapRibbonTab>
    </Tabs>
</dx:BootstrapRibbon>
Screen Size
Color Themes
Demo QR Code