Tabs - Pages UI

Search…
v5.0.1 - Pages HTML
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 add a Tabs to pages please refer following guidelines
Navs
getbootstrap
Bootstrap Documentation
Creating a Tab
Place this HTML code in any "Pages" html file 
Tip : Tabs 
Make sure you keep the tab pane ID's unique
1
<div class="panel">
2
  <ul class="nav nav-tabs nav-tabs-simple">
3
    <li class="active">
4
      <a data-toggle="tab" href="#tab2hellowWorld">Hello World</a>
5
    </li>
6
    <li>
7
      <a data-toggle="tab" href="#tab2FollowUs">Hello Two</a>
8
    </li>
9
    <li>
10
      <a data-toggle="tab" href="#tab2Inspire">Hello Three</a>
11
    </li>
12
  </ul>
13
  <div class="tab-content">
14
    <div class="tab-pane active" id="tab2hellowWorld">
15
      <div class="row column-seperation">
16
        <div class="col-md-6">
17
          <h3>
18
            <span class="semi-bold">Sometimes</span> Small things in life means
19
            the most
20
          </h3>
21
        </div>
22
        <div class="col-md-6">
23
          <h3 class="semi-bold">
24
            great tabs
25
          </h3>
26
          <p>
27
            Native boostrap tabs customized to Pages look and feel, simply
28
            changing class name you can change color as well as its animations
29
          </p>
30
        </div>
31
      </div>
32
    </div>
33
    <div class="tab-pane" id="tab2FollowUs">
34
      <div class="row">
35
        <div class="col-md-12">
36
          <h3>
37
            “ Nothing is <span class="semi-bold">impossible</span>, the word
38
            itself says 'I'm <span class="semi-bold">possible</span>'! ”
39
          </h3>
40
          <p>
41
            A style represents visual customizations on top of a layout. By
42
            editing a style, you can use Squarespace's visual interface to
43
            customize your...
44
          </p><br>
45
          <p class="pull-right">
46
            <button class="btn btn-white btn-cons" type="button">White</button>
47
            <button class="btn btn-success btn-cons" type=
48
            "button">Success</button>
49
          </p>
50
        </div>
51
      </div>
52
    </div>
53
    <div class="tab-pane" id="tab2Inspire">
54
      <div class="row">
55
        <div class="col-md-12">
56
          <h3>
57
            Follow us &amp; get updated!
58
          </h3>
59
          <p>
60
            Instantly connect to what's most important to you. Follow your
61
            friends, experts, favorite celebrities, and breaking news.
62
          </p><br>
63
        </div>
64
      </div>
65
    </div>
66
  </div>
67
</div>
Copied!
Tab Orientation
To change tab orientation, create a tab like before using the above code, add the class nav-tabs-left or nav-tabs-leftto nav nav-tabs UL element
1
<!-- LEFT ORIENTATION -->
2
<div class="panel">
3
  <ul class="nav nav-tabs nav-tabs-left nav-tabs-simple">
4
  ....
5
  </ul>
6
  <div class="tab-content">
7
  ....
8
  </div>
9
</div>
10
​
11
<!-- RIGHT ORIENTATION -->
12
<div class="panel">
13
  <ul class="nav nav-tabs nav-tabs-right nav-tabs-simple">
14
  ....
15
  </ul>
16
  <div class="tab-content">
17
  ....
18
  </div>
19
</div>
Copied!
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
1
<!-- LINE TRIANGLE -->
2
<div class="panel">
3
  <ul class="nav nav-tabs nav-tabs-linetriangle nav-tabs-simple">
4
  ....
5
  </ul>
6
  <div class="tab-content">
7
  ....
8
  </div>
9
</div>
10
​
11
<!-- FILL UP ANIMATION -->
12
<div class="panel">
13
  <ul class="nav nav-tabs nav-tabs-fillup nav-tabs-simple">
14
  ....
15
  </ul>
16
  <div class="tab-content">
17
  ....
18
  </div>
19
</div>
Copied!
Sliding Tabs
Append slide-left or slide-right to tab-pane to reveal tab content with a sliding effect
1
<!-- Nav tabs -->
2
<ul class="nav nav-tabs">
3
    <li class="active">
4
        <a data-toggle="tab" href="#slide1">
5
            <span>Home</span>
6
        </a>
7
    </li>
8
    <li>
9
        <a data-toggle="tab" href="#slide2">
10
            <span>Profile</span>
11
        </a>
12
    </li>
13
</ul>
14
<!-- Tab panes -->
15
<div class="tab-content">
16
    <div class="tab-pane slide-left active" id="slide1">
17
        ...
18
    </div>
19
    <div class="tab-pane slide-right" id="slide2">
20
        ...
21
    </div>
22
</div>
Copied!
Responsive Tabs
Responsive tabs are not built on to bootstrap by default, We have integrated 3 options to choose from
​
UI Elements - Previous
Collapse
Next - UI Elements
Sliders
Last modified 1yr ago
Copy link
Contents