Dynamic Bootstrap Tabs for SharePoint

Author: Luis Kerr

Related Links

- Somnio – Premium SharePoint 2013 Theme
- Brevis – Premium SharePoint 2013 Theme
- ShareBoot – Responsive SharePoint 2013 Theme
- Motus – Free SharePoint 2013 Theme
- xpecto – Free SharePoint 2013 Theme
- Allegra – Premium SharePoint 2010 Theme
- Responsive Top Navigation Menu
- Change SharePoint 2013 Title
- List All Checked Out Items Using PowerShell

Popular SharePoint Books



5 Responses

  1. Jim Bello says:

    I have been tasked with moving our SharePoint 2013 site to using Bootstrap. We had been using Spell Tabs for several pages that require a tab bar. Unfortunately, Spell does not work with a Bootstrap layout. I downloaded your TopSPTabs.js and although it does work with my Bootstrap page it takes ALL the web parts on the page and not just the ones in the same Web Part Zone. This is not the effect we want. Is there a way to restrict your tab script to only use the web parts in the same zone as the Content Editor WP that references the script. Spell allowed multiple tab bars on the same page which is something else we require.

    • carlos says:

      Did you ever get tabs to work within just the zone its in? Any help would be appreciated.

      • Michael Woodard says:

        I am also still trying to figure out how to possibly get this to apply to only the Web Parts in the zone that it is placed in. Also would like for it to not pull all of the Web Parts on the page (including those with chrome type set to None) into the tabs when in Edit mode.

      • Jeremy says:

        You can call TopSPTabs([“WebPart Title 1”, “WebPartTitle 2″])
        It will then only place the web parts with the specified titles into this element

        I also added this so that it would show the first tab
        $(‘.nav-tabs a[href=”#Tab0”]’).tab(‘show’);

  2. Shaz says:

    Fantastic, thank you Luis. Brilliant instructions and worked first time.

Leave a Reply

Your email address will not be published. Required fields are marked *