Столбцы Bootstrap внутри Kendo Tabstrip

У меня есть Kendo Tabstrip, и я пытаюсь отформатировать его содержимое с помощью Bootstrap. Но граница Tabstrip, k-content k-state-active, отображается сверху, а мои элементы снаружи. Если я не использую Bootstrap, все будет хорошо. Я уже прочитал этот вопрос, и он не решает мою проблему.

Это мой код:

<div>
    @(Html.Kendo().TabStrip()
    .Name("tabstrip")
    .Items(items =>
    {
   //removed 
        items.Add()
            .Text("اطلاعات حساب‌ها")
            .Content(@<text>

    <div class="form-group form-inline col-xs-12">
        <div class="col-xs-5">
            @Html.LabelFor(x => x.LiCode1, new { @class = "control-label col-xs-3" })
            @Html.TextBoxFor(x => x.LiCode1, new { @class = "form-control  input-sm" })
        </div>
        <div class="col-xs-5">
            @Html.LabelFor(x => x.LiCode2, new { @class = "control-label col-xs-3" })
            @Html.TextBoxFor(x => x.LiCode2, new { @class = "form-control  input-sm" })
        </div>
    </div>
            </text>);
    })
    )
</div>

Кажется, я вообще не могу использовать класс col-*, так как мне форматировать элементы?

Под границей я подразумеваю зеленую линию на картинке ниже, если я удалю col-*, она будет содержать элементы.