Boostrap tabs in editor window

Chad VanWalsum asked on May 18, 2015 21:32

Has anyone found a way to make bootstrap tabs workable within the kentico page editor? By default, tabs can be clicked, but will not cause the tab pane to switch making editing by our clients a pain without HTML knowledge.

Recent Answers


Charles Matvchuk answered on May 18, 2015 21:44

I have not, but instead of using the Bootstrap tabs, why not use the bootstrap css and jquery calls and apply it to the OOTB Kentico Tabs Web Part. That way you are using the stock part with all of the functionality and look and feel of the bootstrap one. This is how I implemented it.

3 votesVote for this answer Mark as a Correct answer

Daniel Reed answered on June 15, 2015 10:21

I ran into this same problem. I had the issue with tabs, and also dropdowns. It seems Kentico's jquery may interfere with bootstrap, or for some reason bootstrap does not auto-initialise tabs. So I run a piece of javascript on page load to forcibly check them. I hope this helps you.

$(document).ready(function(){
    //check if design mode or edit mode
if($("body").hasClass("DesignMode") || $("body").hasClass("EditMode")){

    //fix tabs
    $('.nav-tabs a').click(function (e) {
      e.preventDefault()
      $(this).tab('show');
    });

    //fix dropdowns
    $('.dropdown-toggle').dropdown();
    }
});
0 votesVote for this answer Mark as a Correct answer

   Please, sign in to be able to submit a new answer.