Dynamic Bootstrap Tabs for SharePoint

The following tutorial provides you with few simple steps to implement dynamic Bootstrap tabs on SharePoint 2013 sites based on web part zones, also called tabbed web parts.

In order to implement automatic tabs on SharePoint public facing sites using Bootstrap we need to reference Bootstrap files. To make things easier for this tutorial, we will use our ShareBoot theme for SharePoint 2013, which you can download here. We successfully tested this solution on all our Bootstrap-based SharePoint themes.

Step 1
So, first, download TopSPTabs.zip unzip it and upload the TopSPTabs,js to your theme folder. Go to Site Settings >> Master pages and page layouts >> Open your theme folder, which for the purpose of this tutorial is ShareBoot. Open the folder called “js” and upload TopSPTabs.js. Make sure to publish the file after uploading it.

Step 2
Next, go to the page you want to add the tabs and edit the page. In edit mode, click on “Add a Web Part” and from the web part pane select “Media and Content” then “Content Editor” and hit Add button. Once the new web part has been added to the page, click on the Web Part menu and from the drop-down menu select “Edit Web Part”. (Another way to edit a web part is by using the ribbon. With the web part selected, in the ribbon click on Web Part tab and select “Web Part Properties”)

Step 3
On the web part properties modal window, add the path to the TopSPTabs.js in the Content Link text box. The link should look something like this: /_catalogs/masterpage/ShareBoot/js/TopSPTabs.js
Give your tab group a name, select “Title Only” as the Chrome Type and hit OK button.

Now that you referenced the TopSPTabs.js whatever web parts you might add to the page will be part of the tab group.

Step 4
Go ahead and add few web parts by clicking on “Add a Web Part” and from the web part pane select “Media and Content” then “Content Editor” and hit Add button. (You can add any web parts available in the web part pane; “Content Editor”, “Script Editor”, “Content Query”, “Summary Links”, “XML Viewer”…)

Step 5
Make sure you name your web part added the way you want to show up in the tab, next select “Title Only” as the Chrome Type and hit OK button.

Step 6
Publish your page and you’re done.

If you don’t want to use the ShareBoot theme or any of our Bootstrap-based themes, we prepared for you a separate JavaScript file that references the Bootstrap files via CDN. Download TopSPTabsNoBS.zip unzip it and upload the TopSPTabsNoBS.js to your server. Follow Step 2 thru 6.

The easiest way to add dynamic and responsive Bootstrap tabbed web parts for SharePoint public facing sites.