Drift BootStrap 4, HTML, jQuery
Search…
Drift BootStrap 4, HTML, jQuery
Overview
Installation and Setup
Setup
Folders and Files Structure
Stylesheets
Overview
Sass Variables
Layouts & Theme
Fonts
Colors
Margin & Paddings
Theme Customization
RTL Version
Components
Alerts
Badges
Breadcrumbs
Buttons
Button Group
Cards
Card Group
Collapse
Dropdowns
Input Group
Jumbotron
List Group
Navbar
Navs & Tabs
Pagination
Progress Bar
Scrollspy
Typography
Classic Version
Setup
Folders and Files Structure
Theme Customizaton
RTL Version
Powered By GitBook
Navs & Tabs

Alignment navs

Start
Center
End
Vertical
1
<!-- Navigation -->
2
<ul class="nav">
3
<li class="nav-item">
4
<a class="nav-link active" href="javascript:void(0)">Active</a>
5
</li>
6
<li class="nav-item">
7
<a class="nav-link" href="javascript:void(0)">Link</a>
8
</li>
9
<li class="nav-item">
10
<a class="nav-link" href="javascript:void(0)">Link</a>
11
</li>
12
<li class="nav-item">
13
<a class="nav-link disabled" href="javascript:void(0)">Disabled</a>
14
</li>
15
</ul>
16
<!-- /navigation -->
Copied!
1
<!-- Navigation -->
2
<ul class="nav justify-content-center">
3
<li class="nav-item">
4
<a class="nav-link active" href="javascript:void(0)">Active</a>
5
</li>
6
<li class="nav-item">
7
<a class="nav-link" href="javascript:void(0)">Link</a>
8
</li>
9
<li class="nav-item">
10
<a class="nav-link" href="javascript:void(0)">Link</a>
11
</li>
12
<li class="nav-item">
13
<a class="nav-link disabled" href="javascript:void(0)">Disabled</a>
14
</li>
15
</ul>
16
<!-- /navigation -->
Copied!
1
<!-- Navigation -->
2
<ul class="nav justify-content-end">
3
<li class="nav-item">
4
<a class="nav-link active" href="javascript:void(0)">Active</a>
5
</li>
6
<li class="nav-item">
7
<a class="nav-link" href="javascript:void(0)">Link</a>
8
</li>
9
<li class="nav-item">
10
<a class="nav-link" href="javascript:void(0)">Link</a>
11
</li>
12
<li class="nav-item">
13
<a class="nav-link disabled" href="javascript:void(0)">Disabled</a>
14
</li>
15
</ul>
16
<!-- /navigation -->
Copied!
1
<!-- Navigation -->
2
<ul class="nav flex-column">
3
<li class="nav-item">
4
<a class="nav-link active" href="javascript:void(0)">Active</a>
5
</li>
6
<li class="nav-item">
7
<a class="nav-link" href="javascript:void(0)">Link</a>
8
</li>
9
<li class="nav-item">
10
<a class="nav-link" href="javascript:void(0)">Link</a>
11
</li>
12
<li class="nav-item">
13
<a class="nav-link disabled" href="javascript:void(0)">Disabled</a>
14
</li>
15
</ul>
16
<!-- /navigation -->
Copied!

Basic Tabs

Basic
Source Code
1
<!-- Tab Container -->
2
<div class="tabs-container">
3
​
4
<!-- Tab Navigation -->
5
<ul class="nav nav-tabs" role="tablist">
6
<li class="nav-item">
7
<a class="nav-link active" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
8
</li>
9
<li class="nav-item">
10
<a class="nav-link" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="true">Profile</a>
11
</li>
12
</ul>
13
<!-- /tab navigation -->
14
​
15
<!-- Tab Content -->
16
<div class="tab-content">
17
​
18
<!-- Tab Pane -->
19
<div id="home" class="tab-pane active">
20
<div class="card-body">
21
<p class="card-text">
22
<strong>A wonderful serenity has taken possession</strong> of my
23
entire soul,
24
like these sweet mornings of spring which I enjoy with my whole
25
heart. I am alone, and feel the charm of existence in this spot,
26
which was created for the bliss of souls like mine.
27
</p>
28
<p class="card-text">
29
I am so happy, my dear friend, so absorbed in the exquisite
30
sense of mere tranquil existence, that I neglect my talents. I
31
should be incapable of drawing a single stroke at the present
32
moment; and yet I feel that I never was a greater artist than
33
now.
34
</p>
35
</div>
36
</div>
37
<!-- /tab pane-->
38
​
39
<!-- Tab Pane -->
40
<div id="profile" class="tab-pane">
41
<div class="card-body">
42
<p class="card-text">
43
<strong>Thousand unknown plants are noticed by me:</strong> when I
44
hear the buzz
45
of the little world among the stalks, and grow familiar with the
46
countless indescribable forms of the insects and flies, then I
47
feel the presence of the Almighty, who formed us in his.
48
</p>
49
<p class="card-text">I am alone, and feel the charm of existence in this
50
spot, which
51
was created for the bliss of souls like mine. I am so happy, my
52
dear friend, so absorbed in the exquisite sense of mere tranquil
53
existence, that I neglect my talents. I should be incapable of
54
drawing.
55
</p>
56
</div>
57
</div>
58
<!-- /tab pane-->
59
​
60
</div>
61
<!-- /tab content -->
62
​
63
</div>
64
<!-- /tab container -->
Copied!

Tabs With Icon

Icon
Source Code
1
<!-- Tab Container -->
2
<div class="tabs-container">
3
​
4
<!-- Tab Navigation -->
5
<ul class="nav nav-tabs" role="tablist">
6
<li class="nav-item">
7
<a class="nav-link active" data-toggle="tab" href="#tab-pane-1" role="tab" aria-controls="tab-pane-1" aria-selected="true"><i class="icon icon-desktop icon-xl"></i>
8
</a>
9
</li>
10
<li class="nav-item">
11
<a class="nav-link" data-toggle="tab" href="#tab-pane-2" role="tab" aria-controls="tab-pane-2" aria-selected="true"><i class="icon icon-dashboard icon-xl"></i>
12
</a>
13
</li>
14
</ul>
15
<!-- /tab navigation -->
16
​
17
<!-- Tab Content -->
18
<div class="tab-content">
19
​
20
<!-- Tab Pane -->
21
<div id="tab-pane-1" class="tab-pane active">
22
<div class="card-body">
23
<p class="card-text">
24
<strong>A wonderful serenity has taken possession</strong> of my
25
entire soul,
26
like these sweet mornings of spring which I enjoy with my whole
27
heart. I am alone, and feel the charm of existence in this spot,
28
which was created for the bliss of souls like mine.
29
</p>
30
<p class="card-text">I am so happy, my dear friend, so absorbed in the
31
exquisite
32
sense of mere tranquil existence, that I neglect my talents. I
33
should be incapable of drawing a single stroke at the present
34
moment; and yet I feel that I never was a greater artist than
35
now.
36
</p>
37
</div>
38
</div>
39
<!-- /tab pane-->
40
​
41
<!-- Tab Pane -->
42
<div id="tab-pane-2" class="tab-pane">
43
<div class="card-body">
44
<p class="card-text">
45
<strong>Thousand unknown plants are noticed by me:</strong> when I
46
hear the buzz
47
of the little world among the stalks, and grow familiar with the
48
countless indescribable forms of the insects and flies, then I
49
feel the presence of the Almighty, who formed us in his.
50
</p>
51
<p class="card-text">I am alone, and feel the charm of existence in this
52
spot, which
53
was created for the bliss of souls like mine. I am so happy, my
54
dear friend, so absorbed in the exquisite sense of mere tranquil
55
existence, that I neglect my talents. I should be incapable of
56
drawing.
57
</p>
58
</div>
59
</div>
60
<!-- /tab pane-->
61
​
62
</div>
63
<!-- /tab content -->
64
​
65
</div>
66
<!-- /tab container -->
Copied!

Vertical Tabs

Basic
Source Code
1
<!-- Tab Container -->
2
<div class="tabs-container tabs-vertical">
3
​
4
<!-- Tab Navigation -->
5
<ul class="nav nav-tabs flex-column" role="tablist">
6
<li class="nav-item">
7
<a class="nav-link active" data-toggle="tab" href="#tab-pane-3" role="tab" aria-controls="tab-pane-3" aria-selected="true">Home
8
</a>
9
</li>
10
<li class="nav-item">
11
<a class="nav-link" data-toggle="tab" href="#tab-pane-4" role="tab" aria-controls="tab-pane-4" aria-selected="true">Profile
12
</a>
13
</li>
14
<li class="nav-item">
15
<a class="nav-link" data-toggle="tab" href="#tab-pane-5" role="tab" aria-controls="tab-pane-5" aria-selected="true">Messages
16
</a>
17
</li>
18
<li class="nav-item">
19
<a class="nav-link" data-toggle="tab" href="#tab-pane-6" role="tab" aria-controls="tab-pane-6" aria-selected="true">Settings
20
</a>
21
</li>
22
</ul>
23
<!-- /tab navigation -->
24
​
25
<!-- Tab Content -->
26
<div class="tab-content">
27
​
28
<!-- Tab Pane -->
29
<div id="tab-pane-3" class="tab-pane active">
30
<div class="card-body">
31
<p class="card-text">
32
<strong>A wonderful serenity has taken possession</strong> of my
33
entire soul,
34
like these sweet mornings of spring which I enjoy with my whole
35
heart. I am alone, and feel the charm of existence in this spot,
36
which was created for the bliss of souls like mine.
37
</p>
38
<p class="card-text">
39
I am so happy, my dear friend, so absorbed in the exquisite
40
sense of mere tranquil existence, that I neglect my talents. I
41
should be incapable of drawing a single stroke at the present
42
moment; and yet I feel that I never was a greater artist than
43
now.
44
</p>
45
</div>
46
</div>
47
<!-- /tab pane-->
48
​
49
<!-- Tab Pane -->
50
<div id="tab-pane-4" class="tab-pane">
51
<div class="card-body">
52
<p class="card-text">
53
<strong>Thousand unknown plants are noticed by me:</strong> when I
54
hear the buzz
55
of the little world among the stalks, and grow familiar with the
56
countless indescribable forms of the insects and flies, then I
57
feel the presence of the Almighty, who formed us in his.
58
</p>
59
<p class="card-text">I am alone, and feel the charm of existence in this
60
spot, which
61
was created for the bliss of souls like mine. I am so happy, my
62
dear friend, so absorbed in the exquisite sense of mere tranquil
63
existence, that I neglect my talents. I should be incapable of
64
drawing.
65
</p>
66
</div>
67
</div>
68
<!-- /tab pane-->
69
​
70
<!-- Tab Pane -->
71
<div id="tab-pane-5" class="tab-pane">
72
<div class="card-body">
73
<p class="card-text">
74
<strong>A wonderful serenity has taken possession</strong> of my
75
entire soul,
76
like these sweet mornings of spring which I enjoy with my whole
77
heart. I am alone, and feel the charm of existence in this spot,
78
which was created for the bliss of souls like mine.
79
</p>
80
<p class="card-text">
81
I am so happy, my dear friend, so absorbed in the exquisite
82
sense of mere tranquil existence, that I neglect my talents. I
83
should be incapable of drawing a single stroke at the present
84
moment; and yet I feel that I never was a greater artist than
85
now.
86
</p>
87
</div>
88
</div>
89
<!-- /tab pane-->
90
​
91
<!-- Tab Pane -->
92
<div id="tab-pane-6" class="tab-pane">
93
<div class="card-body">
94
<p class="card-text">
95
<strong>Thousand unknown plants are noticed by me:</strong> when I
96
hear the buzz
97
of the little world among the stalks, and grow familiar with the
98
countless indescribable forms of the insects and flies, then I
99
feel the presence of the Almighty, who formed us in his.
100
</p>
101
<p class="card-text">I am alone, and feel the charm of existence in this
102
spot, which
103
was created for the bliss of souls like mine. I am so happy, my
104
dear friend, so absorbed in the exquisite sense of mere tranquil
105
existence, that I neglect my talents. I should be incapable of
106
drawing.
107
</p>
108
</div>
109
</div>
110
<!-- /tab pane-->
111
​
112
</div>
113
<!-- /tab content -->
114
​
115
</div>
116
<!-- /tab container -->
Copied!
Icon
Source Code
1
<!-- Tab Container -->
2
<div class="tabs-container tabs-vertical tabs-right">
3
​
4
<!-- Tab Navigation -->
5
<ul class="nav nav-tabs flex-column" role="tablist">
6
<li class="nav-item">
7
<a class="nav-link active" data-toggle="tab" href="#tab-pane-7" role="tab" aria-controls="tab-pane-7" aria-selected="true"><i class="icon icon-desktop icon-xl"></i>
8
</a>
9
</li>
10
<li class="nav-item">
11
<a class="nav-link" data-toggle="tab" href="#tab-pane-8" role="tab" aria-controls="tab-pane-8" aria-selected="true"><i class="icon icon-dashboard icon-xl"></i>
12
</a>
13
</li>
14
<li class="nav-item">
15
<a class="nav-link" data-toggle="tab" href="#tab-pane-9" role="tab" aria-controls="tab-pane-9" aria-selected="true"><i class="icon icon-mail icon-xl"></i>
16
</a>
17
</li>
18
<li class="nav-item">
19
<a class="nav-link" data-toggle="tab" href="#tab-pane-10" role="tab" aria-controls="tab-pane-10" aria-selected="true"><i class="icon icon-settings icon-xl"></i>
20
</a>
21
</li>
22
</ul>
23
<!-- /tab navigation -->
24
​
25
<!-- Tab Content -->
26
<div class="tab-content">
27
​
28
<!-- Tab Pane -->
29
<div id="tab-pane-7" class="tab-pane active">
30
<div class="card-body">
31
<p class="card-text">
32
<strong>A wonderful serenity has taken possession</strong> of my
33
entire soul,
34
like these sweet mornings of spring which I enjoy with my whole
35
heart. I am alone, and feel the charm of existence in this spot,
36
which was created for the bliss of souls like mine.
37
</p>
38
<p class="card-text">I am so happy, my dear friend, so absorbed in the
39
exquisite
40
sense of mere tranquil existence, that I neglect my talents. I
41
should be incapable of drawing a single stroke at the present
42
moment; and yet I feel that I never was a greater artist than
43
now.
44
</p>
45
</div>
46
</div>
47
<!-- /tab pane-->
48
​
49
<!-- Tab Pane -->
50
<div id="tab-pane-8" class="tab-pane">
51
<div class="card-body">
52
<p class="card-text">
53
<strong>Thousand unknown plants are noticed by me:</strong> when I
54
hear the buzz
55
of the little world among the stalks, and grow familiar with the
56
countless indescribable forms of the insects and flies, then I
57
feel the presence of the Almighty, who formed us in his.
58
</p>
59
<p class="card-text">I am alone, and feel the charm of existence in this
60
spot, which
61
was created for the bliss of souls like mine. I am so happy, my
62
dear friend, so absorbed in the exquisite sense of mere tranquil
63
existence, that I neglect my talents. I should be incapable of
64
drawing.
65
</p>
66
</div>
67
</div>
68
<!-- /tab pane-->
69
​
70
<!-- Tab Pane -->
71
<div id="tab-pane-9" class="tab-pane">
72
<div class="card-body">
73
<p class="card-text">
74
<strong>A wonderful serenity has taken possession</strong> of my
75
entire soul,
76
like these sweet mornings of spring which I enjoy with my whole
77
heart. I am alone, and feel the charm of existence in this spot,
78
which was created for the bliss of souls like mine.
79
</p>
80
<p class="card-text">
81
I am so happy, my dear friend, so absorbed in the exquisite
82
sense of mere tranquil existence, that I neglect my talents. I
83
should be incapable of drawing a single stroke at the present
84
moment; and yet I feel that I never was a greater artist than
85
now.
86
</p>
87
</div>
88
</div>
89
<!-- /tab pane-->
90
​
91
<!-- Tab Pane -->
92
<div id="tab-pane-10" class="tab-pane">
93
<div class="card-body">
94
<p class="card-text">
95
<strong>Thousand unknown plants are noticed by me:</strong> when I
96
hear the buzz
97
of the little world among the stalks, and grow familiar with the
98
countless indescribable forms of the insects and flies, then I
99
feel the presence of the Almighty, who formed us in his.
100
</p>
101
<p class="card-text">I am alone, and feel the charm of existence in this
102
spot, which
103
was created for the bliss of souls like mine. I am so happy, my
104
dear friend, so absorbed in the exquisite sense of mere tranquil
105
existence, that I neglect my talents. I should be incapable of
106
drawing.
107
</p>
108
</div>
109
</div>
110
<!-- /tab pane-->
111
​
112
</div>
113
<!-- /tab content -->
114
​
115
</div>
116
<!-- /tab container -->
Copied!

Pills Tabs

Pills Tabs
Source Code
1
<!-- Tab Container -->
2
<div class="tabs-container">
3
​
4
<!-- Card -->
5
<div class="card">
6
​
7
<!-- Card Header -->
8
<div class="card-header">
9
<!-- Tab Navigation -->
10
<ul class="card-header-pills nav nav-pills" role="tablist">
11
<li class="nav-item">
12
<a class="nav-link active show" data-toggle="tab" href="#tab-pane-11" role="tab" aria-controls="tab-pane-11" aria-selected="true">Active</a>
13
</li>
14
<li class="nav-item">
15
<a class="nav-link" data-toggle="tab" href="#tab-pane-12" role="tab" aria-controls="tab-pane-12" aria-selected="false">link</a>
16
</li>
17
<li class="nav-item"><a class="nav-link disabled">Disabled</a>
18
</li>
19
</ul>
20
<!-- /tab navigation -->
21
</div>
22
<!-- /card header -->
23
​
24
<!-- Tab Content -->
25
<div class="tab-content">
26
​
27
<!-- Tab Pane -->
28
<div id="tab-pane-11" class="tab-pane active show">
29
<div class="card-body">
30
<h3 class="card-title">Card Title</h3>
31
<h6 class="card-subtitle">Sub-heading text</h6>
32
<p class="card-text">
33
Lorem Ipsum is simply dummy text of the printing and
34
typesetting industry. Lorem Ipsum has been the industry's
35
standard
36
dummy
37
text ever since the 1500s, when an unknown printer took a galley
38
of
39
type
40
and scrambled it to make a type specimen book.
41
</p>
42
<p class="card-text">
43
It has survived not only five centuries, but also the
44
leap into electronic typesetting, remaining essentially
45
unchanged.
46
It
47
was popularised in the 1960s with the release of Letraset sheets
48
containing Lorem Ipsum passages, and more recently with desktop
49
publishing software like Aldus PageMaker including versions of
50
Lorem
51
Ipsum.
52
</p>
53
</div>
54
</div>
55
<!-- /tab pane-->
56
​
57
<!-- Tab Pane -->
58
<div id="tab-pane-12" class="tab-pane">
59
<div class="card-body">
60
<h3 class="card-title">Card Title</h3>
61
<h6 class="card-subtitle">Sub-heading text</h6>
62
<p class="card-text">
63
<strong>Thousand unknown plants are noticed by me:</strong> when
64
I
65
hear
66
the buzz
67
of the little world among the stalks, and grow familiar with the
68
countless indescribable forms of the insects and flies, then I
69
feel the presence of the Almighty, who formed us in his.
70
</p>
71
<p class="card-text">I am alone, and feel the charm of existence in
72
this
73
spot, which
74
was created for the bliss of souls like mine. I am so happy, my
75
dear friend, so absorbed in the exquisite sense of mere tranquil
76
existence, that I neglect my talents. I should be incapable of
77
drawing.
78
</p>
79
</div>
80
</div>
81
<!-- /tab pane-->
82
​
83
<!-- Tab Pane -->
84
<div class="tab-pane">
85
<div class="card-body">
86
<h3 class="card-title">Card Title Disabled</h3>
87
<h6 class="card-subtitle">Sub-heading text Disabled</h6>
88
<p class="card-text">
89
Small plates, salads &amp; sandwiches in an intimate
90
setting with 12 indoor seats plus patio seating</p>
91
<p class="card-text">
92
Donec imperdiet enim et dignissim interdum.
93
Pellentesque in ortti tor elit. Curabitur consectetur.
94
</p>
95
</div>
96
</div>
97
<!-- /tab pane-->
98
​
99
</div>
100
<!-- /tab content -->
101
​
102
</div>
103
<!-- /card -->
104
​
105
</div>
106
<!-- /tab container -->
Copied!
Components - Previous
Navbar
Next - Components
Pagination
Last modified 1yr ago
Copy link
Contents
Alignment navs
Basic Tabs
Tabs With Icon
Vertical Tabs
Pills Tabs