Edit this page

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

Other articles on the Kendo UI TabStrip:

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

Is this article helpful? Yes / No
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article