Default Page Control

The Page Control displays content as a set of tabbed pages. Each page in the Page Control serves as a separate child control container allowing you to associate specific page content with each displayed tab.

Use the Tab Control to only display tabs without associated content.

ASPXCopy 
<dx:BootstrapPageControl runat="server">
    <TabPages>
        <dx:BootstrapTabPage Text="Home">
            <ContentCollection>
                <dx:ContentControl runat="server" SupportsDisabledAttribute="True">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sem lorem, rutrum at tincidunt aliquam, vulputate sit amet tellus. In hac habitasse platea dictumst. Morbi in dui a massa volutpat tristique. Aenean ultrices, elit ac commodo vestibulum, nisl neque pharetra est, id egestas neque leo dignissim augue. Vestibulum sodales metus at est maximus dictum. Quisque cursus felis id nisi auctor, volutpat imperdiet neque feugiat. Sed aliquet elit sem, ut vulputate lectus ultricies sit amet.</p>
                </dx:ContentControl>
            </ContentCollection>
        </dx:BootstrapTabPage>
        <dx:BootstrapTabPage Text="Products">
            <ContentCollection>
                <dx:ContentControl runat="server" SupportsDisabledAttribute="True">
                    <p>Quisque imperdiet risus quis nisl vulputate, a pharetra tortor ornare. Ut mi lectus, porttitor quis semper eu, lacinia id leo. Sed in nisl a neque consequat ultrices. Aliquam non sagittis nulla, nec tempus nibh. Cras aliquam nulla in elit iaculis accumsan. Ut eu lorem sagittis, volutpat arcu eu, mollis elit. Suspendisse aliquet magna diam, nec tristique mi cursus eu. Donec venenatis cursus ipsum, ut egestas turpis sodales vitae.</p>
                </dx:ContentControl>
            </ContentCollection>
        </dx:BootstrapTabPage>
        <dx:BootstrapTabPage Text="Support">
            <ContentCollection>
                <dx:ContentControl runat="server" SupportsDisabledAttribute="True">
                    <p>Aenean gravida tristique velit ac ornare. Maecenas ultricies metus sit amet ligula malesuada, in faucibus nulla cursus. Aenean sit amet vulputate lorem, commodo suscipit nulla. Nunc non vulputate nibh. Nam sapien magna, accumsan id dui sit amet, euismod rhoncus nulla. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla quis feugiat augue. Sed turpis nibh, porta quis congue ut, mattis id purus. Donec auctor felis sit amet orci ornare, aliquet ultrices ipsum lacinia.</p>
                </dx:ContentControl>
            </ContentCollection>
        </dx:BootstrapTabPage>
    </TabPages>
</dx:BootstrapPageControl>

Tab Alignment

Use the TabAlign property to specify the alignment of tabs within the control. The following modes are supported: Justify, Left, Right.

ASPXCopy 
<dx:BootstrapPageControl runat="server" TabAlign="Justify">
    <TabPages>
        <dx:BootstrapTabPage Text="Home">
            <ContentCollection>
                <dx:ContentControl runat="server" SupportsDisabledAttribute="True">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sem lorem, rutrum at tincidunt aliquam, vulputate sit amet tellus. In hac habitasse platea dictumst. Morbi in dui a massa volutpat tristique. Aenean ultrices, elit ac commodo vestibulum, nisl neque pharetra est, id egestas neque leo dignissim augue. Vestibulum sodales metus at est maximus dictum. Quisque cursus felis id nisi auctor, volutpat imperdiet neque feugiat. Sed aliquet elit sem, ut vulputate lectus ultricies sit amet.</p>
                </dx:ContentControl>
            </ContentCollection>
        </dx:BootstrapTabPage>
        <dx:BootstrapTabPage Text="Products">
            <ContentCollection>
                <dx:ContentControl runat="server" SupportsDisabledAttribute="True">
                    <p>Quisque imperdiet risus quis nisl vulputate, a pharetra tortor ornare. Ut mi lectus, porttitor quis semper eu, lacinia id leo. Sed in nisl a neque consequat ultrices. Aliquam non sagittis nulla, nec tempus nibh. Cras aliquam nulla in elit iaculis accumsan. Ut eu lorem sagittis, volutpat arcu eu, mollis elit. Suspendisse aliquet magna diam, nec tristique mi cursus eu. Donec venenatis cursus ipsum, ut egestas turpis sodales vitae.</p>
                </dx:ContentControl>
            </ContentCollection>
        </dx:BootstrapTabPage>
        <dx:BootstrapTabPage Text="Support">
            <ContentCollection>
                <dx:ContentControl runat="server" SupportsDisabledAttribute="True">
                    <p>Aenean gravida tristique velit ac ornare. Maecenas ultricies metus sit amet ligula malesuada, in faucibus nulla cursus. Aenean sit amet vulputate lorem, commodo suscipit nulla. Nunc non vulputate nibh. Nam sapien magna, accumsan id dui sit amet, euismod rhoncus nulla. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla quis feugiat augue. Sed turpis nibh, porta quis congue ut, mattis id purus. Donec auctor felis sit amet orci ornare, aliquet ultrices ipsum lacinia.</p>
                </dx:ContentControl>
            </ContentCollection>
        </dx:BootstrapTabPage>
    </TabPages>
</dx:BootstrapPageControl>

Badges

The Page Control can display supplementary information for any tab within a badge. A badge can display a text, an icon or both. Use the following API to set the contents of item badges:

The methods listed below allow you to manipulate badges on the client:

Note that the BootstrapTab.Badge property does not affect templated tabs.

ASPXJSCopy 
<dx:BootstrapPageControl runat="server">
    <TabPages>
        <dx:BootstrapTabPage Text="Home">
            <ContentCollection>
                <dx:ContentControl runat="server" SupportsDisabledAttribute="True">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sem lorem, rutrum at tincidunt aliquam, vulputate sit amet tellus. In hac habitasse platea dictumst. Morbi in dui a massa volutpat tristique. Aenean ultrices, elit ac commodo vestibulum, nisl neque pharetra est, id egestas neque leo dignissim augue. Vestibulum sodales metus at est maximus dictum. Quisque cursus felis id nisi auctor, volutpat imperdiet neque feugiat. Sed aliquet elit sem, ut vulputate lectus ultricies sit amet.</p>
                </dx:ContentControl>
            </ContentCollection>
        </dx:BootstrapTabPage>
        <dx:BootstrapTabPage Text="Profile">
            <ContentCollection>
                <dx:ContentControl runat="server" SupportsDisabledAttribute="True">
                    <p>Quisque imperdiet risus quis nisl vulputate, a pharetra tortor ornare. Ut mi lectus, porttitor quis semper eu, lacinia id leo. Sed in nisl a neque consequat ultrices. Aliquam non sagittis nulla, nec tempus nibh. Cras aliquam nulla in elit iaculis accumsan. Ut eu lorem sagittis, volutpat arcu eu, mollis elit. Suspendisse aliquet magna diam, nec tristique mi cursus eu. Donec venenatis cursus ipsum, ut egestas turpis sodales vitae.</p>
                </dx:ContentControl>
            </ContentCollection>
        </dx:BootstrapTabPage>
        <dx:BootstrapTabPage Text="Messages">
            <Badge Text="1" />
            <ContentCollection>
                <dx:ContentControl runat="server" SupportsDisabledAttribute="True">
                    <p>Aenean gravida tristique velit ac ornare. Maecenas ultricies metus sit amet ligula malesuada, in faucibus nulla cursus. Aenean sit amet vulputate lorem, commodo suscipit nulla. Nunc non vulputate nibh. Nam sapien magna, accumsan id dui sit amet, euismod rhoncus nulla. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla quis feugiat augue. Sed turpis nibh, porta quis congue ut, mattis id purus. Donec auctor felis sit amet orci ornare, aliquet ultrices ipsum lacinia.</p>
                </dx:ContentControl>
            </ContentCollection>
        </dx:BootstrapTabPage>
    </TabPages>
    <ClientSideEvents TabClick="onTabWithBadgeClick" />
</dx:BootstrapPageControl>
function onTabWithBadgeClick(s, e) {
    if(e.tab.GetBadgeText())
        e.tab.SetBadgeText("");
}

Load Content on Callbacks

The Page Control exposes the EnableCallbacks property allowing you to specify whether or not to use callbacks to obtain page contents from the server. If the property is set to true, only the content of the active page is sent to the client during the first request. The content of every other page is obtained from the server only once - when the page is first activated. The page content is loaded using a callback without refreshing the entire page.

If the property is set to false, the contents of all pages are sent to the client with the first response, and switching the active page never initiates a callback.

Note that in this demo the callback time is intentionally extended so that the loading indicator is visible during callbacks.

ASPXCopy 
<dx:BootstrapPageControl runat="server" EnableCallBacks="true" EnableCallbackAnimation="true">
    <TabPages>
        <dx:BootstrapTabPage Text="Home">
            <ContentCollection>
                <dx:ContentControl runat="server" SupportsDisabledAttribute="True">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sem lorem, rutrum at tincidunt aliquam, vulputate sit amet tellus. In hac habitasse platea dictumst. Morbi in dui a massa volutpat tristique. Aenean ultrices, elit ac commodo vestibulum, nisl neque pharetra est, id egestas neque leo dignissim augue. Vestibulum sodales metus at est maximus dictum. Quisque cursus felis id nisi auctor, volutpat imperdiet neque feugiat. Sed aliquet elit sem, ut vulputate lectus ultricies sit amet.</p>
                </dx:ContentControl>
            </ContentCollection>
        </dx:BootstrapTabPage>
        <dx:BootstrapTabPage Text="Products">
            <ContentCollection>
                <dx:ContentControl runat="server" SupportsDisabledAttribute="True">
                    <p>Quisque imperdiet risus quis nisl vulputate, a pharetra tortor ornare. Ut mi lectus, porttitor quis semper eu, lacinia id leo. Sed in nisl a neque consequat ultrices. Aliquam non sagittis nulla, nec tempus nibh. Cras aliquam nulla in elit iaculis accumsan. Ut eu lorem sagittis, volutpat arcu eu, mollis elit. Suspendisse aliquet magna diam, nec tristique mi cursus eu. Donec venenatis cursus ipsum, ut egestas turpis sodales vitae.</p>
                </dx:ContentControl>
            </ContentCollection>
        </dx:BootstrapTabPage>
        <dx:BootstrapTabPage Text="Support">
            <ContentCollection>
                <dx:ContentControl runat="server" SupportsDisabledAttribute="True">
                    <p>Aenean gravida tristique velit ac ornare. Maecenas ultricies metus sit amet ligula malesuada, in faucibus nulla cursus. Aenean sit amet vulputate lorem, commodo suscipit nulla. Nunc non vulputate nibh. Nam sapien magna, accumsan id dui sit amet, euismod rhoncus nulla. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla quis feugiat augue. Sed turpis nibh, porta quis congue ut, mattis id purus. Donec auctor felis sit amet orci ornare, aliquet ultrices ipsum lacinia.</p>
                </dx:ContentControl>
            </ContentCollection>
        </dx:BootstrapTabPage>
    </TabPages>
</dx:BootstrapPageControl>

Auto PostBack

If the AutoPostBack property is set to true, the Page Control works in a "Server Mode". In this mode, changing an active page causes a postback to refresh the entire web page.

ASPXC#Copy 
<dx:BootstrapPageControl ID="PageControlAutoPostBack" runat="server" AutoPostBack="true" OnActiveTabChanged="PageControlAutoPostBack_ActiveTabChanged">
    <TabPages>
        <dx:BootstrapTabPage Text="Home">
            <ContentCollection>
                <dx:ContentControl runat="server" SupportsDisabledAttribute="True">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sem lorem, rutrum at tincidunt aliquam, vulputate sit amet tellus. In hac habitasse platea dictumst. Morbi in dui a massa volutpat tristique. Aenean ultrices, elit ac commodo vestibulum, nisl neque pharetra est, id egestas neque leo dignissim augue. Vestibulum sodales metus at est maximus dictum. Quisque cursus felis id nisi auctor, volutpat imperdiet neque feugiat. Sed aliquet elit sem, ut vulputate lectus ultricies sit amet.</p>
                </dx:ContentControl>
            </ContentCollection>
        </dx:BootstrapTabPage>
        <dx:BootstrapTabPage Text="Products">
            <ContentCollection>
                <dx:ContentControl runat="server" SupportsDisabledAttribute="True">
                    <p>Quisque imperdiet risus quis nisl vulputate, a pharetra tortor ornare. Ut mi lectus, porttitor quis semper eu, lacinia id leo. Sed in nisl a neque consequat ultrices. Aliquam non sagittis nulla, nec tempus nibh. Cras aliquam nulla in elit iaculis accumsan. Ut eu lorem sagittis, volutpat arcu eu, mollis elit. Suspendisse aliquet magna diam, nec tristique mi cursus eu. Donec venenatis cursus ipsum, ut egestas turpis sodales vitae.</p>
                </dx:ContentControl>
            </ContentCollection>
        </dx:BootstrapTabPage>
        <dx:BootstrapTabPage Text="Support">
            <ContentCollection>
                <dx:ContentControl runat="server" SupportsDisabledAttribute="True">
                    <p>Aenean gravida tristique velit ac ornare. Maecenas ultricies metus sit amet ligula malesuada, in faucibus nulla cursus. Aenean sit amet vulputate lorem, commodo suscipit nulla. Nunc non vulputate nibh. Nam sapien magna, accumsan id dui sit amet, euismod rhoncus nulla. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla quis feugiat augue. Sed turpis nibh, porta quis congue ut, mattis id purus. Donec auctor felis sit amet orci ornare, aliquet ultrices ipsum lacinia.</p>
                </dx:ContentControl>
            </ContentCollection>
        </dx:BootstrapTabPage>
    </TabPages>
</dx:BootstrapPageControl>
protected void PageControlAutoPostBack_ActiveTabChanged(object source, DevExpress.Web.Bootstrap.BootstrapPageControlEventArgs e) {
    DemoUtils.ShowToast(AutoPostBack, string.Format("The '{0}' tab has been activated.", e.Tab.Text));
}

Templates

The Page Control supports templates allowing you to customize control appearance and layout. A template can be applied to all tabs (using control level templates) or a specific tab (using item level templates). Moreover, templates can be specified for tabs in both active and inactive states. Use the following properties to specify templates.

BootstrapPageControl properties:

BootstrapTabPage properties:

ASPXJSCopy 
<dx:BootstrapPageControl runat="server" ActiveTabIndex="2">
    <TabPages>
        <dx:BootstrapTabPage Text="Home">
            <ContentCollection>
                <dx:ContentControl runat="server" SupportsDisabledAttribute="True">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sem lorem, rutrum at tincidunt aliquam, vulputate sit amet tellus. In hac habitasse platea dictumst. Morbi in dui a massa volutpat tristique. Aenean ultrices, elit ac commodo vestibulum, nisl neque pharetra est, id egestas neque leo dignissim augue. Vestibulum sodales metus at est maximus dictum. Quisque cursus felis id nisi auctor, volutpat imperdiet neque feugiat. Sed aliquet elit sem, ut vulputate lectus ultricies sit amet.</p>
                </dx:ContentControl>
            </ContentCollection>
        </dx:BootstrapTabPage>
        <dx:BootstrapTabPage Text="Profile">
            <ContentCollection>
                <dx:ContentControl runat="server" SupportsDisabledAttribute="True">
                    <p>Quisque imperdiet risus quis nisl vulputate, a pharetra tortor ornare. Ut mi lectus, porttitor quis semper eu, lacinia id leo. Sed in nisl a neque consequat ultrices. Aliquam non sagittis nulla, nec tempus nibh. Cras aliquam nulla in elit iaculis accumsan. Ut eu lorem sagittis, volutpat arcu eu, mollis elit. Suspendisse aliquet magna diam, nec tristique mi cursus eu. Donec venenatis cursus ipsum, ut egestas turpis sodales vitae.</p>
                </dx:ContentControl>
            </ContentCollection>
        </dx:BootstrapTabPage>
        <dx:BootstrapTabPage Name="Messages" Text="Messages">
            <ActiveTabTemplate>
                <div class="dropdown">
                    <a href="#" class="nav-link active dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Messages</a>
                    <div class="dropdown-menu">
                        <a class="dropdown-item" href="#">Inbox</a>
                        <a class="dropdown-item" href="#">Sent Items</a>
                        <a class="dropdown-item" href="#">Drafts</a>
                        <div class="dropdown-divider"></div>
                        <a class="dropdown-item" href="#">Spam</a>
                    </div>
                </div>
            </ActiveTabTemplate>
            <ContentCollection>
                <dx:ContentControl runat="server" SupportsDisabledAttribute="True">
                    <p>Aenean gravida tristique velit ac ornare. Maecenas ultricies metus sit amet ligula malesuada, in faucibus nulla cursus. Aenean sit amet vulputate lorem, commodo suscipit nulla. Nunc non vulputate nibh. Nam sapien magna, accumsan id dui sit amet, euismod rhoncus nulla. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla quis feugiat augue. Sed turpis nibh, porta quis congue ut, mattis id purus. Donec auctor felis sit amet orci ornare, aliquet ultrices ipsum lacinia.</p>
                </dx:ContentControl>
            </ContentCollection>
        </dx:BootstrapTabPage>
    </TabPages>
    <ClientSideEvents TabClick="onDropdownTabClick" />
</dx:BootstrapPageControl>
function onDropdownTabClick(s, e) {
    if(e.tab.name == "Messages" && s.GetActiveTab() != e.tab) {
        $(".nav-link.dropdown-toggle").dropdown("toggle");
        e.htmlEvent.stopPropagation();
    }
}

Client-Side Events

This demo illustrates the capabilities of the Page Control's client events and allows you to specify which client-side events you want to track. Interact with the tabbed interface to see the information about all tracked events raised in response to your actions in the event log.

Trace Events:
ASPXJSCopy 
<dx:BootstrapPageControl runat="server">
    <ClientSideEvents
        Init="onInit"
        TabClick="onTabClick"
        ActiveTabChanging="onActiveTabChanging"
        ActiveTabChanged="onActiveTabChanged" />
    <TabPages>
        <dx:BootstrapTabPage Text="Home">
            <ContentCollection>
                <dx:ContentControl runat="server" SupportsDisabledAttribute="True">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sem lorem, rutrum at tincidunt aliquam, vulputate sit amet tellus. In hac habitasse platea dictumst. Morbi in dui a massa volutpat tristique. Aenean ultrices, elit ac commodo vestibulum, nisl neque pharetra est, id egestas neque leo dignissim augue. Vestibulum sodales metus at est maximus dictum. Quisque cursus felis id nisi auctor, volutpat imperdiet neque feugiat. Sed aliquet elit sem, ut vulputate lectus ultricies sit amet.</p>
                </dx:ContentControl>
            </ContentCollection>
        </dx:BootstrapTabPage>
        <dx:BootstrapTabPage Text="Products">
            <ContentCollection>
                <dx:ContentControl runat="server" SupportsDisabledAttribute="True">
                    <p>Quisque imperdiet risus quis nisl vulputate, a pharetra tortor ornare. Ut mi lectus, porttitor quis semper eu, lacinia id leo. Sed in nisl a neque consequat ultrices. Aliquam non sagittis nulla, nec tempus nibh. Cras aliquam nulla in elit iaculis accumsan. Ut eu lorem sagittis, volutpat arcu eu, mollis elit. Suspendisse aliquet magna diam, nec tristique mi cursus eu. Donec venenatis cursus ipsum, ut egestas turpis sodales vitae.</p>
                </dx:ContentControl>
            </ContentCollection>
        </dx:BootstrapTabPage>
        <dx:BootstrapTabPage Text="Support">
            <ContentCollection>
                <dx:ContentControl runat="server" SupportsDisabledAttribute="True">
                    <p>Aenean gravida tristique velit ac ornare. Maecenas ultricies metus sit amet ligula malesuada, in faucibus nulla cursus. Aenean sit amet vulputate lorem, commodo suscipit nulla. Nunc non vulputate nibh. Nam sapien magna, accumsan id dui sit amet, euismod rhoncus nulla. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla quis feugiat augue. Sed turpis nibh, porta quis congue ut, mattis id purus. Donec auctor felis sit amet orci ornare, aliquet ultrices ipsum lacinia.</p>
                </dx:ContentControl>
            </ContentCollection>
        </dx:BootstrapTabPage>
    </TabPages>
</dx:BootstrapPageControl>
function onInit(s, e) {
    dxbsDemo.eventMonitor.trace(s, e, 'Init');
}
function onTabClick(s, e) {
    dxbsDemo.eventMonitor.trace(s, e, 'TabClick');
}
function onActiveTabChanging(s, e) {
    dxbsDemo.eventMonitor.trace(s, e, 'ActiveTabChanging');
}
function onActiveTabChanged(s, e) {
    dxbsDemo.eventMonitor.trace(s, e, 'ActiveTabChanged');
}

Client-Side Functionality

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

The EnableClientSideAPI property specifies whether or not the client-side API is available. Note that the client-side API is automatically enabled if the ClientInstanceName property is specified or any client-side event available through the ClientSideEvents property is handled.

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

BootstrapClientPageControl methods:

BootstrapClientTab methods:

ASPXCopy 
<dx:BootstrapPageControl runat="server" ClientInstanceName="pageControl">
    <TabPages>
        <dx:BootstrapTabPage Text="Tab 1" ActiveTabIconCssClass="fa fa-check">
            <ContentCollection>
                <dx:ContentControl runat="server" SupportsDisabledAttribute="True">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sem lorem, rutrum at tincidunt aliquam, vulputate sit amet tellus. In hac habitasse platea dictumst. Morbi in dui a massa volutpat tristique. Aenean ultrices, elit ac commodo vestibulum, nisl neque pharetra est, id egestas neque leo dignissim augue. Vestibulum sodales metus at est maximus dictum. Quisque cursus felis id nisi auctor, volutpat imperdiet neque feugiat. Sed aliquet elit sem, ut vulputate lectus ultricies sit amet.</p>
                </dx:ContentControl>
            </ContentCollection>
        </dx:BootstrapTabPage>
        <dx:BootstrapTabPage Text="Tab 2" ActiveTabIconCssClass="fa fa-check">
            <ContentCollection>
                <dx:ContentControl runat="server" SupportsDisabledAttribute="True">
                    <p>Quisque imperdiet risus quis nisl vulputate, a pharetra tortor ornare. Ut mi lectus, porttitor quis semper eu, lacinia id leo. Sed in nisl a neque consequat ultrices. Aliquam non sagittis nulla, nec tempus nibh. Cras aliquam nulla in elit iaculis accumsan. Ut eu lorem sagittis, volutpat arcu eu, mollis elit. Suspendisse aliquet magna diam, nec tristique mi cursus eu. Donec venenatis cursus ipsum, ut egestas turpis sodales vitae.</p>
                </dx:ContentControl>
            </ContentCollection>
        </dx:BootstrapTabPage>
        <dx:BootstrapTabPage Text="Tab 3" ActiveTabIconCssClass="fa fa-check">
            <ContentCollection>
                <dx:ContentControl runat="server" SupportsDisabledAttribute="True">
                    <p>Aenean gravida tristique velit ac ornare. Maecenas ultricies metus sit amet ligula malesuada, in faucibus nulla cursus. Aenean sit amet vulputate lorem, commodo suscipit nulla. Nunc non vulputate nibh. Nam sapien magna, accumsan id dui sit amet, euismod rhoncus nulla. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla quis feugiat augue. Sed turpis nibh, porta quis congue ut, mattis id purus. Donec auctor felis sit amet orci ornare, aliquet ultrices ipsum lacinia.</p>
                </dx:ContentControl>
            </ContentCollection>
        </dx:BootstrapTabPage>
    </TabPages>
</dx:BootstrapPageControl>
Screen Size
Color Themes
Demo QR Code