New to Kendo UI for jQuery? Download free 30-day trial

Display Buttons at the Bottom

The example below demonstrates how to display the tab buttons at the bottom of the TabStrip widget.


This example is now obsolete unless you are working with a very old Kendo UI version. For recent versions, use the tabPosition property instead.

        html{font:12px sans-serif;}

            position: relative;
            padding-top: 4px;
            padding-bottom: 28px;

        #tabstrip > .k-tabstrip-items
            position: absolute;
            bottom: 4px;
            left: 0;

        #tabstrip > .k-tabstrip-items .k-item
            border-width: 0 1px 1px;
            border-radius: 0 0 4px 4px;

        #tabstrip > .k-tabstrip-items .k-state-active
            margin-top: -1px;
            padding-top: 1px;
            margin-bottom: 0;
            padding-bottom: 0;

        #tabstrip > .k-content
            height: 100px;
            overflow: auto;
    <div id="tabstrip">
            <li class="k-state-active">tab 1</li>
            <li>tab 2</li>
            Tab container 1<br />1<br />2<br />3<br />4<br />5<br />6<br />7<br />bottom content
            Tab container 2<br /><br />
            animation: {
                open: {
                    effects: "fadeIn"

See Also

For more runnable examples on the Kendo UI TabStrip widget, browse its How To documentation folder.

In this article
Not finding the help you need? Improve this article