Tabs

Tabs are created using Bootstrap Native Tabs, they will work as the same way how it works in bootstrap, but it is styled to pages color scheme. To run a Bootstrap Tabs, there is no depencies, you do not have to include extra JS or CSS files,To add a Tabs to pages please reffer following guidelines

Bootstrap Tabs Guideline

Creating a Tab

Place this HTML code in any "Pages" html file

Tip : Tabs
Make sure you keep the tab pane ID's unquie 
<div class="panel">
  <ul class="nav nav-tabs nav-tabs-simple">
    <li class="active">
      <a data-toggle="tab" href="#tab2hellowWorld">Hello World</a>
    </li>
    <li>
      <a data-toggle="tab" href="#tab2FollowUs">Hello Two</a>
    </li>
    <li>
      <a data-toggle="tab" href="#tab2Inspire">Hello Three</a>
    </li>
  </ul>
  <div class="tab-content">
    <div class="tab-pane active" id="tab2hellowWorld">
      <div class="row column-seperation">
        <div class="col-md-6">
          <h3>
            <span class="semi-bold">Sometimes</span> Small things in life means
            the most
          </h3>
        </div>
        <div class="col-md-6">
          <h3 class="semi-bold">
            great tabs
          </h3>
          <p>
            Native boostrap tabs customized to Pages look and feel, simply
            changing class name you can change color as well as its animations
          </p>
        </div>
      </div>
    </div>
    <div class="tab-pane" id="tab2FollowUs">
      <div class="row">
        <div class="col-md-12">
          <h3>
            “ Nothing is <span class="semi-bold">impossible</span>, the word
            itself says 'I'm <span class="semi-bold">possible</span>'! ”
          </h3>
          <p>
            A style represents visual customizations on top of a layout. By
            editing a style, you can use Squarespace's visual interface to
            customize your...
          </p><br>
          <p class="pull-right">
            <button class="btn btn-white btn-cons" type="button">White</button>
            <button class="btn btn-success btn-cons" type=
            "button">Success</button>
          </p>
        </div>
      </div>
    </div>
    <div class="tab-pane" id="tab2Inspire">
      <div class="row">
        <div class="col-md-12">
          <h3>
            Follow us &amp; get updated!
          </h3>
          <p>
            Instantly connect to what's most important to you. Follow your
            friends, experts, favorite celebrities, and breaking news.
          </p><br>
        </div>
      </div>
    </div>
  </div>
</div>

Tab Orientaion

To change tab orientation, create a tab like before using the above code, add the class nav-tabs-left or nav-tabs-left to nav nav-tabs UL element 

<!-- LEFT ORIENTATION -->
<div class="panel">
  <ul class="nav nav-tabs nav-tabs-left nav-tabs-simple">
  ....
  </ul>
  <div class="tab-content">
  ....
  </div>
</div>

<!-- RIGHT ORIENTATION -->
<div class="panel">
  <ul class="nav nav-tabs nav-tabs-right nav-tabs-simple">
  ....
  </ul>
  <div class="tab-content">
  ....
  </div>
</div>

Tab Styles

To change tab styles, create a tab like before using the first code in Create Tab section, add the class nav-tabs-linetriangle or nav-tabs-fillup to nav nav-tabs UL element

Tip : Tabs
You can try different orientation with tab styles 
<!-- LINE TRIANGLE -->
<div class="panel">
  <ul class="nav nav-tabs nav-tabs-linetriangle nav-tabs-simple">
  ....
  </ul>
  <div class="tab-content">
  ....
  </div>
</div>

<!-- FILL UP ANIMATION -->
<div class="panel">
  <ul class="nav nav-tabs nav-tabs-fillup nav-tabs-simple">
  ....
  </ul>
  <div class="tab-content">
  ....
  </div>
</div>

Sliding Tabs

Append slide-left or slide-right to tab-pane to reveal tab content with a sliding effect

<!-- Nav tabs -->
<ul class="nav nav-tabs">
    <li class="active">
        <a data-toggle="tab" href="#slide1">
            <span>Home</span>
        </a>
    </li>
    <li>
        <a data-toggle="tab" href="#slide2">
            <span>Profile</span>
        </a>
    </li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
    <div class="tab-pane slide-left active" id="slide1">
        ...
    </div>
    <div class="tab-pane slide-right" id="slide2">
        ...
    </div>
</div>

Responsive Tabs

Repsosive tabs are not built on to bootstrap by default, We have integrated 3 options to choose from

  • Tabs to Accordian
  • Dropdown
  • Horizontal Scroll

    • 1. Tabs to Accordian

    Tabs automatically converts in to an accordian on Mobile


    Dependency 
    <script src="assets/plugins/bootstrap-collapse/bootstrap-tabcollapse.js" type="text/javascript"></script>

    HTML

    Add the data-init-reponsive-tabs="collapse" attribute to your nav-tabs ul element 

    <div class="panel">
  <ul class="nav nav-tabs nav-tabs-simple" data-init-reponsive-tabs="collapse">
    <li class="active">
      <a data-toggle="tab" href="#tab2hellowWorld">Hello World</a>
    </li>
    <li>
      <a data-toggle="tab" href="#tab2FollowUs">Hello Two</a>
    </li>
    <li>
      <a data-toggle="tab" href="#tab2Inspire">Hello Three</a>
    </li>
  </ul>
  <div class="tab-content">

  </div>
</div>

    2. Dropdowns

    Tabs automatically converts in to an SelectFx Dropdown on Mobile


    Dependency

    No Dependencies


    HTML

    Add the data-init-reponsive-tabs="dropdownfx" attribute to your nav-tabs ul element 

    <div class="panel">
  <ul class="nav nav-tabs nav-tabs-simple" data-init-reponsive-tabs="dropdownfx">
    <li class="active">
      <a data-toggle="tab" href="#tab2hellowWorld">Hello World</a>
    </li>
    <li>
      <a data-toggle="tab" href="#tab2FollowUs">Hello Two</a>
    </li>
    <li>
      <a data-toggle="tab" href="#tab2Inspire">Hello Three</a>
    </li>
  </ul>
  <div class="tab-content">

  </div>
</div>

    3. Horizontal Scroll

    You can horizontally scroll your tab navigation on Mobile


    Dependency

    No Dependencies


    HTML

    Wrap nav-tabs with div nav-tabs-header nav-tabs-linetriangle 

    <div class="panel">
  <div class="nav-tabs-header nav-tabs-linetriangle">
    <ul class="nav nav-tabs nav-tabs-linetriangle">
      <li class="active">
        <a data-toggle="tab" href="#fade1"><span>Hello World</span></a>
      </li>
      <li>
        <a data-toggle="tab" href="#fade2"><span>Hello Two</span></a>
      </li>
      <li>
        <a data-toggle="tab" href="#fade3"><span>Hello Three</span></a>
      </li>
    </ul>
  </div>
  <div class="tab-content">

  </div>
</div>
For native Bootstrap Tab OptionsBootstrap Documentation

Other Useful resources thay you may find: