Bootstrap tabs within modals

Question

I have a modal that retrieves data from database and displays them in tabs. Tabs and tab contents are created dynamically. Looking at the source it all seems to be perfectly arranged, all the class and hierarchy however the li items within ul are stacking up rather than being horizontally aligned, I've cross checked my html markup and bootstrap classes but I don't seem to find anything that shouldn't be there or anything missing.

This is my html markup created using jquery

Here is my jquery code that creates the tabs.

$.ajax({
        url: 'getevent',
        type: 'post',
        data: {'date':[$(this).html(),$("#date").html()]},
        success: function(response){
            var response = $.parseJSON(response);
            console.log(response === null);
            if(response!==null){
                var loopIndex = 1;
                var ul=document.createElement("ul");
                var tabContent = document.createElement("div");
                $(ul).addClass("nav nav-tabs");
                $(tabContent).addClass("tab-content");
                $.each(response,function(index,object){
                    //create a tab for each event and add them to modal
                    var li = document.createElement("li");
                    var a = document.createElement("a");
                    $(a).attr({'href':'event'+loopIndex,'data-toggle':'tab'}).html(object.title);
                    $(li).append(a);
                    $(ul).append(li);
                    var tabPanes = document.createElement("div");
                    if(loopIndex==1){
                        $(li).addClass('active');
                        $(tabPanes).addClass("active in");
                    }
                    $(tabPanes).addClass("tab-pane fade");
                    $(tabPanes).attr('id','event'+loopIndex);
                    $(tabPanes).html("<p>"+object.discription+"</p>");
                    $(tabContent).append(tabPanes);
                    loopIndex++;
                });
                $("#modal-body").html("");
                $("#modal-body").append(ul);
                $("#modal-body").append(tabContent);
            }

        }

Thank you.

Answer 1

Are you sure that you don't have the Bootstrap build without "Navs" & "Navbar" components? http://getbootstrap.com/customize/

Try to use this css:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">