1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
1001
1002
1003
1004
1005
1006
1007
1008
1009
1010
1011
1012
1013
1014
1015
1016
1017
1018
1019
1020
1021
1022
1023
1024
1025
1026
1027
1028
1029
1030
1031
1032
1033
1034
1035
1036
1037
1038
1039
1040
1041
1042
1043
1044
1045
1046
1047
1048
1049
1050
1051
1052
1053
1054
1055
1056
1057
1058
1059
1060
1061
1062
1063
1064
1065
1066
1067
1068
1069
1070
1071
1072
1073
1074
1075
1076
1077
1078
1079
1080
1081
1082
1083
1084
1085
1086
1087
1088
1089
1090
1091
1092
1093
1094
1095
1096
1097
1098
1099
1100
1101
1102
1103
1104
1105
1106
1107
1108
1109
1110
1111
1112
1113
1114
1115
1116
1117
1118
1119
1120
1121
1122
1123
1124
1125
1126
1127
1128
1129
1130
1131
1132
1133
1134
1135
1136
1137
1138
1139
1140
1141
1142
1143
1144
1145
1146
1147
1148
1149
1150
1151
1152
1153
1154
1155
1156
1157
1158
1159
1160
1161
1162
1163
1164
1165
1166
1167
1168
1169
1170
1171
1172
1173
1174
1175
1176
1177
1178
1179
1180
1181
1182
1183
1184
1185
1186
1187
1188
1189
1190
1191
1192
1193
1194
1195
1196
1197
1198
1199
1200
1201
1202
1203
1204
1205
1206
1207
1208
1209
1210
1211
1212
1213
1214
1215
1216
1217
1218
1219
1220
1221
1222
1223
1224
1225
1226
1227
1228
1229
1230
1231
1232
1233
1234
1235
1236
1237
1238
1239
1240
1241
1242
1243
1244
1245
1246
1247
1248
1249
1250
1251
1252
1253
1254
1255
1256
1257
1258
1259
1260
1261
1262
1263
1264
1265
1266
1267
1268
1269
1270
1271
1272
1273
1274
1275
1276
1277
1278
1279
1280
1281
1282
1283
1284
1285
1286
1287
1288
1289
1290
1291
1292
1293
1294
1295
1296
1297
1298
1299
1300
1301
1302
1303
1304
1305
1306
1307
1308
1309
1310
1311
1312
1313
|
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="Documentation and examples for how to use Bootstrap’s included navigation components.">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<meta name="generator" content="Jekyll v3.8.5">
<title>Navs · Bootstrap</title>
<link rel="canonical" href="https://getbootstrap.com/docs/4.2/components/navs/">
<!-- Bootstrap core CSS -->
<link href="/docs/4.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<!-- Documentation extras -->
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
<link href="/docs/4.2/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
<link rel="apple-touch-icon" href="/docs/4.2/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
<link rel="icon" href="/docs/4.2/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
<link rel="icon" href="/docs/4.2/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
<link rel="manifest" href="/docs/4.2/assets/img/favicons/manifest.json">
<link rel="mask-icon" href="/docs/4.2/assets/img/favicons/safari-pinned-tab.svg" color="#563d7c">
<link rel="icon" href="/docs/4.2/assets/img/favicons/favicon.ico">
<meta name="msapplication-config" content="/docs/4.2/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
<!-- Twitter -->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@getbootstrap">
<meta name="twitter:creator" content="@getbootstrap">
<meta name="twitter:title" content="Navs">
<meta name="twitter:description" content="Documentation and examples for how to use Bootstrap’s included navigation components.">
<meta name="twitter:image" content="https://getbootstrap.com/docs/4.2/assets/brand/bootstrap-social-logo.png">
<!-- Facebook -->
<meta property="og:url" content="https://getbootstrap.com/docs/4.2/components/navs/">
<meta property="og:title" content="Navs">
<meta property="og:description" content="Documentation and examples for how to use Bootstrap’s included navigation components.">
<meta property="og:type" content="website">
<meta property="og:image" content="http://getbootstrap.com/docs/4.2/assets/brand/bootstrap-social.png">
<meta property="og:image:secure_url" content="https://getbootstrap.com/docs/4.2/assets/brand/bootstrap-social.png">
<meta property="og:image:type" content="image/png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
ga('set', 'anonymizeIp', true);
ga('send', 'pageview');
</script>
<script async src='https://www.google-analytics.com/analytics.js'></script>
</head>
<body>
<a class="skippy sr-only sr-only-focusable" href="#content">
<span class="skippy-text">Skip to main content</span>
</a>
<a href="https://getbootstrap.com/" class="d-block px-3 py-2 text-center text-bold text-white old-bv">There's a newer version of Bootstrap 4!</a>
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
<a class="navbar-brand mr-0 mr-md-2" href="/" aria-label="Bootstrap"><svg class="d-block" width="36" height="36" viewbox="0 0 612 612" xmlns="http://www.w3.org/2000/svg" focusable="false" role="img"><title>Bootstrap</title><path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/><path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/></svg>
</a>
<div class="navbar-nav-scroll">
<ul class="navbar-nav bd-navbar-nav flex-row">
<li class="nav-item">
<a class="nav-link " href="/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Bootstrap');">Home</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="/docs/4.2/getting-started/introduction/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Docs');">Documentation</a>
</li>
<li class="nav-item">
<a class="nav-link " href="/docs/4.2/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
</ul>
</div>
<ul class="navbar-nav flex-row ml-md-auto d-none d-md-flex">
<li class="nav-item dropdown">
<a class="nav-item nav-link dropdown-toggle mr-md-2" href="#" id="bd-versions" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
v4.2
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="bd-versions">
<a class="dropdown-item active" href="/docs/4.2/">Latest (4.2.x)</a>
<a class="dropdown-item" href="https://getbootstrap.com/docs/4.1/">v4.1.3</a>
<a class="dropdown-item" href="https://getbootstrap.com/docs/4.0/">v4.0.0</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="https://v4-alpha.getbootstrap.com/">v4 Alpha 6</a>
<a class="dropdown-item" href="https://getbootstrap.com/docs/3.4/">v3.4.0</a>
<a class="dropdown-item" href="https://getbootstrap.com/docs/3.3/">v3.3.7</a>
<a class="dropdown-item" href="https://getbootstrap.com/2.3.2/">v2.3.2</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="/docs/versions/">All versions</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link p-2" href="https://github.com/twbs/bootstrap" target="_blank" rel="noopener" aria-label="GitHub"><svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 499.36" focusable="false" role="img"><title>GitHub</title><path d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z" fill="currentColor" fill-rule="evenodd"/></svg>
</a>
</li>
<li class="nav-item">
<a class="nav-link p-2" href="https://twitter.com/getbootstrap" target="_blank" rel="noopener" aria-label="Twitter"><svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 416.32" focusable="false" role="img"><title>Twitter</title><path d="M160.83 416.32c193.2 0 298.92-160.22 298.92-298.92 0-4.51 0-9-.2-13.52A214 214 0 0 0 512 49.38a212.93 212.93 0 0 1-60.44 16.6 105.7 105.7 0 0 0 46.3-58.19 209 209 0 0 1-66.79 25.37 105.09 105.09 0 0 0-181.73 71.91 116.12 116.12 0 0 0 2.66 24c-87.28-4.3-164.73-46.3-216.56-109.82A105.48 105.48 0 0 0 68 159.6a106.27 106.27 0 0 1-47.53-13.11v1.43a105.28 105.28 0 0 0 84.21 103.06 105.67 105.67 0 0 1-47.33 1.84 105.06 105.06 0 0 0 98.14 72.94A210.72 210.72 0 0 1 25 370.84a202.17 202.17 0 0 1-25-1.43 298.85 298.85 0 0 0 160.83 46.92" fill="currentColor"/></svg>
</a>
</li>
<li class="nav-item">
<a class="nav-link p-2" href="https://bootstrap-slack.herokuapp.com/" target="_blank" rel="noopener" aria-label="Slack"><svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 512" focusable="false" role="img"><title>Slack</title><path fill="currentColor" d="M210.787 234.832l68.31-22.883 22.1 65.977-68.309 22.882z"/><path d="M490.54 185.6C437.7 9.59 361.6-31.34 185.6 21.46S-31.3 150.4 21.46 326.4 150.4 543.3 326.4 490.54 543.34 361.6 490.54 185.6zM401.7 299.8l-33.15 11.05 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.38-68.36 22.92 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.43-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.5-13.92 2.87-29.06 16.78-33.56l33.12-11.03-22.1-65.9-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.48-13.93 2.89-29.07 16.81-33.58l33.15-11.05-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.46 34.38 68.36-22.92-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.47 34.42 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.87 29.06-16.78 33.56L329.7 194.6l22.1 65.9 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.88 29.07-16.81 33.57z" fill="currentColor"/></svg>
</a>
</li>
</ul>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.2/getting-started/download/">Download</a>
</header>
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
<form class="bd-search d-flex align-items-center">
<input type="search" class="form-control" id="search-input" placeholder="Search..." aria-label="Search for..." autocomplete="off" data-docs-version="4.2">
<button class="btn btn-link bd-search-docs-toggle d-md-none p-0 ml-3" type="button" data-toggle="collapse" data-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 30 30" width="30" height="30" focusable="false" role="img"><title>Menu</title><path stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" d="M4 7h22M4 15h22M4 23h22"/></svg>
</button>
</form>
<nav class="collapse bd-links" id="bd-docs-nav"><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.2/getting-started/introduction/">
Getting started
</a>
<ul class="nav bd-sidenav"><li>
<a href="/docs/4.2/getting-started/introduction/">
Introduction
</a>
</li><li>
<a href="/docs/4.2/getting-started/download/">
Download
</a>
</li><li>
<a href="/docs/4.2/getting-started/contents/">
Contents
</a>
</li><li>
<a href="/docs/4.2/getting-started/browsers-devices/">
Browsers & devices
</a>
</li><li>
<a href="/docs/4.2/getting-started/javascript/">
JavaScript
</a>
</li><li>
<a href="/docs/4.2/getting-started/theming/">
Theming
</a>
</li><li>
<a href="/docs/4.2/getting-started/build-tools/">
Build tools
</a>
</li><li>
<a href="/docs/4.2/getting-started/webpack/">
Webpack
</a>
</li><li>
<a href="/docs/4.2/getting-started/accessibility/">
Accessibility
</a>
</li></ul>
</div><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.2/layout/overview/">
Layout
</a>
<ul class="nav bd-sidenav"><li>
<a href="/docs/4.2/layout/overview/">
Overview
</a>
</li><li>
<a href="/docs/4.2/layout/grid/">
Grid
</a>
</li><li>
<a href="/docs/4.2/layout/utilities-for-layout/">
Utilities for layout
</a>
</li></ul>
</div><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.2/content/reboot/">
Content
</a>
<ul class="nav bd-sidenav"><li>
<a href="/docs/4.2/content/reboot/">
Reboot
</a>
</li><li>
<a href="/docs/4.2/content/typography/">
Typography
</a>
</li><li>
<a href="/docs/4.2/content/code/">
Code
</a>
</li><li>
<a href="/docs/4.2/content/images/">
Images
</a>
</li><li>
<a href="/docs/4.2/content/tables/">
Tables
</a>
</li><li>
<a href="/docs/4.2/content/figures/">
Figures
</a>
</li></ul>
</div><div class="bd-toc-item active">
<a class="bd-toc-link" href="/docs/4.2/components/alerts/">
Components
</a>
<ul class="nav bd-sidenav"><li>
<a href="/docs/4.2/components/alerts/">
Alerts
</a>
</li><li>
<a href="/docs/4.2/components/badge/">
Badge
</a>
</li><li>
<a href="/docs/4.2/components/breadcrumb/">
Breadcrumb
</a>
</li><li>
<a href="/docs/4.2/components/buttons/">
Buttons
</a>
</li><li>
<a href="/docs/4.2/components/button-group/">
Button group
</a>
</li><li>
<a href="/docs/4.2/components/card/">
Card
</a>
</li><li>
<a href="/docs/4.2/components/carousel/">
Carousel
</a>
</li><li>
<a href="/docs/4.2/components/collapse/">
Collapse
</a>
</li><li>
<a href="/docs/4.2/components/dropdowns/">
Dropdowns
</a>
</li><li>
<a href="/docs/4.2/components/forms/">
Forms
</a>
</li><li>
<a href="/docs/4.2/components/input-group/">
Input group
</a>
</li><li>
<a href="/docs/4.2/components/jumbotron/">
Jumbotron
</a>
</li><li>
<a href="/docs/4.2/components/list-group/">
List group
</a>
</li><li>
<a href="/docs/4.2/components/media-object/">
Media object
</a>
</li><li>
<a href="/docs/4.2/components/modal/">
Modal
</a>
</li><li class="active bd-sidenav-active">
<a href="/docs/4.2/components/navs/">
Navs
</a>
</li><li>
<a href="/docs/4.2/components/navbar/">
Navbar
</a>
</li><li>
<a href="/docs/4.2/components/pagination/">
Pagination
</a>
</li><li>
<a href="/docs/4.2/components/popovers/">
Popovers
</a>
</li><li>
<a href="/docs/4.2/components/progress/">
Progress
</a>
</li><li>
<a href="/docs/4.2/components/scrollspy/">
Scrollspy
</a>
</li><li>
<a href="/docs/4.2/components/spinners/">
Spinners
</a>
</li><li>
<a href="/docs/4.2/components/toasts/">
Toasts
</a>
</li><li>
<a href="/docs/4.2/components/tooltips/">
Tooltips
</a>
</li></ul>
</div><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.2/utilities/borders/">
Utilities
</a>
<ul class="nav bd-sidenav"><li>
<a href="/docs/4.2/utilities/borders/">
Borders
</a>
</li><li>
<a href="/docs/4.2/utilities/clearfix/">
Clearfix
</a>
</li><li>
<a href="/docs/4.2/utilities/close-icon/">
Close icon
</a>
</li><li>
<a href="/docs/4.2/utilities/colors/">
Colors
</a>
</li><li>
<a href="/docs/4.2/utilities/display/">
Display
</a>
</li><li>
<a href="/docs/4.2/utilities/embed/">
Embed
</a>
</li><li>
<a href="/docs/4.2/utilities/flex/">
Flex
</a>
</li><li>
<a href="/docs/4.2/utilities/float/">
Float
</a>
</li><li>
<a href="/docs/4.2/utilities/image-replacement/">
Image replacement
</a>
</li><li>
<a href="/docs/4.2/utilities/overflow/">
Overflow
</a>
</li><li>
<a href="/docs/4.2/utilities/position/">
Position
</a>
</li><li>
<a href="/docs/4.2/utilities/screenreaders/">
Screenreaders
</a>
</li><li>
<a href="/docs/4.2/utilities/shadows/">
Shadows
</a>
</li><li>
<a href="/docs/4.2/utilities/sizing/">
Sizing
</a>
</li><li>
<a href="/docs/4.2/utilities/spacing/">
Spacing
</a>
</li><li>
<a href="/docs/4.2/utilities/text/">
Text
</a>
</li><li>
<a href="/docs/4.2/utilities/vertical-align/">
Vertical align
</a>
</li><li>
<a href="/docs/4.2/utilities/visibility/">
Visibility
</a>
</li></ul>
</div><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.2/extend/approach/">
Extend
</a>
<ul class="nav bd-sidenav"><li>
<a href="/docs/4.2/extend/approach/">
Approach
</a>
</li><li>
<a href="/docs/4.2/extend/icons/">
Icons
</a>
</li></ul>
</div><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.2/migration/">
Migration
</a>
<ul class="nav bd-sidenav"></ul>
</div><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.2/about/overview/">
About
</a>
<ul class="nav bd-sidenav"><li>
<a href="/docs/4.2/about/overview/">
Overview
</a>
</li><li>
<a href="/docs/4.2/about/team/">
Team
</a>
</li><li>
<a href="/docs/4.2/about/brand/">
Brand
</a>
</li><li>
<a href="/docs/4.2/about/license/">
License
</a>
</li><li>
<a href="/docs/4.2/about/translations/">
Translations
</a>
</li></ul>
</div></nav>
</div>
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#base-nav">Base nav</a></li>
<li class="toc-entry toc-h2"><a href="#available-styles">Available styles</a>
<ul>
<li class="toc-entry toc-h3"><a href="#horizontal-alignment">Horizontal alignment</a></li>
<li class="toc-entry toc-h3"><a href="#vertical">Vertical</a></li>
<li class="toc-entry toc-h3"><a href="#tabs">Tabs</a></li>
<li class="toc-entry toc-h3"><a href="#pills">Pills</a></li>
<li class="toc-entry toc-h3"><a href="#fill-and-justify">Fill and justify</a></li>
</ul>
</li>
<li class="toc-entry toc-h2"><a href="#working-with-flex-utilities">Working with flex utilities</a></li>
<li class="toc-entry toc-h2"><a href="#regarding-accessibility">Regarding accessibility</a></li>
<li class="toc-entry toc-h2"><a href="#using-dropdowns">Using dropdowns</a>
<ul>
<li class="toc-entry toc-h3"><a href="#tabs-with-dropdowns">Tabs with dropdowns</a></li>
<li class="toc-entry toc-h3"><a href="#pills-with-dropdowns">Pills with dropdowns</a></li>
</ul>
</li>
<li class="toc-entry toc-h2"><a href="#javascript-behavior">JavaScript behavior</a>
<ul>
<li class="toc-entry toc-h3"><a href="#using-data-attributes">Using data attributes</a></li>
<li class="toc-entry toc-h3"><a href="#via-javascript">Via JavaScript</a></li>
<li class="toc-entry toc-h3"><a href="#fade-effect">Fade effect</a></li>
<li class="toc-entry toc-h3"><a href="#methods">Methods</a>
<ul>
<li class="toc-entry toc-h4"><a href="#tab">$().tab</a></li>
<li class="toc-entry toc-h4"><a href="#tabshow">.tab(‘show’)</a></li>
<li class="toc-entry toc-h4"><a href="#tabdispose">.tab(‘dispose’)</a></li>
</ul>
</li>
<li class="toc-entry toc-h3"><a href="#events">Events</a></li>
</ul>
</li>
</ul>
</div>
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Navs</h1>
<p class="bd-lead">Documentation and examples for how to use Bootstrap’s included navigation components.</p>
<script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
<h2 id="base-nav">Base nav</h2>
<p>Navigation available in Bootstrap share general markup and styles, from the base <code class="highlighter-rouge">.nav</code> class to the active and disabled states. Swap modifier classes to switch between each style.</p>
<p>The base <code class="highlighter-rouge">.nav</code> component is built with flexbox and provide a strong foundation for building all types of navigation components. It includes some style overrides (for working with lists), some link padding for larger hit areas, and basic disabled styling.</p>
<div class="bd-callout bd-callout-info">
<p>The base <code class="highlighter-rouge">.nav</code> component does not include any <code class="highlighter-rouge">.active</code> state. The following examples include the class, mainly to demonstrate that this particular class does not trigger any special styling.</p>
</div>
<div class="bd-example">
<ul class="nav">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
</div>
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><ul</span> <span class="na">class=</span><span class="s">"nav"</span><span class="nt">></span>
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"nav-item"</span><span class="nt">></span>
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"nav-link active"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Active<span class="nt"></a></span>
<span class="nt"></li></span>
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"nav-item"</span><span class="nt">></span>
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"nav-link"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Link<span class="nt"></a></span>
<span class="nt"></li></span>
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"nav-item"</span><span class="nt">></span>
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"nav-link"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Link<span class="nt"></a></span>
<span class="nt"></li></span>
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"nav-item"</span><span class="nt">></span>
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"nav-link disabled"</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">tabindex=</span><span class="s">"-1"</span> <span class="na">aria-disabled=</span><span class="s">"true"</span><span class="nt">></span>Disabled<span class="nt"></a></span>
<span class="nt"></li></span>
<span class="nt"></ul></span></code></pre></figure>
<p>Classes are used throughout, so your markup can be super flexible. Use <code class="highlighter-rouge"><ul></code>s like above, <code class="highlighter-rouge"><ol></code> if the order of your items is important, or roll your own with a <code class="highlighter-rouge"><nav></code> element. Because the <code class="highlighter-rouge">.nav</code> uses <code class="highlighter-rouge">display: flex</code>, the nav links behave the same as nav items would, but without the extra markup.</p>
<div class="bd-example">
<nav class="nav">
<a class="nav-link active" href="#">Active</a>
<a class="nav-link" href="#">Link</a>
<a class="nav-link" href="#">Link</a>
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</nav>
</div>
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><nav</span> <span class="na">class=</span><span class="s">"nav"</span><span class="nt">></span>
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"nav-link active"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Active<span class="nt"></a></span>
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"nav-link"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Link<span class="nt"></a></span>
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"nav-link"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Link<span class="nt"></a></span>
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"nav-link disabled"</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">tabindex=</span><span class="s">"-1"</span> <span class="na">aria-disabled=</span><span class="s">"true"</span><span class="nt">></span>Disabled<span class="nt"></a></span>
<span class="nt"></nav></span></code></pre></figure>
<h2 id="available-styles">Available styles</h2>
<p>Change the style of <code class="highlighter-rouge">.nav</code>s component with modifiers and utilities. Mix and match as needed, or build your own.</p>
<h3 id="horizontal-alignment">Horizontal alignment</h3>
<p>Change the horizontal alignment of your nav with <a href="/docs/4.2/layout/grid/#horizontal-alignment">flexbox utilities</a>. By default, navs are left-aligned, but you can easily change them to center or right aligned.</p>
<p>Centered with <code class="highlighter-rouge">.justify-content-center</code>:</p>
<div class="bd-example">
<ul class="nav justify-content-center">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
</div>
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><ul</span> <span class="na">class=</span><span class="s">"nav justify-content-center"</span><span class="nt">></span>
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"nav-item"</span><span class="nt">></span>
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"nav-link active"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Active<span class="nt"></a></span>
<span class="nt"></li></span>
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"nav-item"</span><span class="nt">></span>
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"nav-link"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Link<span class="nt"></a></span>
<span class="nt"></li></span>
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"nav-item"</span><span class="nt">></span>
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"nav-link"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Link<span class="nt"></a></span>
<span class="nt"></li></span>
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"nav-item"</span><span class="nt">></span>
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"nav-link disabled"</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">tabindex=</span><span class="s">"-1"</span> <span class="na">aria-disabled=</span><span class="s">"true"</span><span class="nt">></span>Disabled<span class="nt"></a></span>
<span class="nt"></li></span>
<span class="nt"></ul></span></code></pre></figure>
<p>Right-aligned with <code class="highlighter-rouge">.justify-content-end</code>:</p>
<div class="bd-example">
<ul class="nav justify-content-end">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
</div>
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><ul</span> <span class="na">class=</span><span class="s">"nav justify-content-end"</span><span class="nt">></span>
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"nav-item"</span><span class="nt">></span>
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"nav-link active"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Active<span class="nt"></a></span>
<span class="nt"></li></span>
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"nav-item"</span><span class="nt">></span>
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"nav-link"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Link<span class="nt"></a></span>
<span class="nt"></li></span>
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"nav-item"</span><span class="nt">></span>
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"nav-link"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Link<span class="nt"></a></span>
<span class="nt"></li></span>
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"nav-item"</span><span class="nt">></span>
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"nav-link disabled"</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">tabindex=</span><span class="s">"-1"</span> <span class="na">aria-disabled=</span><span class="s">"true"</span><span class="nt">></span>Disabled<span class="nt"></a></span>
<span class="nt"></li></span>
<span class="nt"></ul></span></code></pre></figure>
<h3 id="vertical">Vertical</h3>
<p>Stack your navigation by changing the flex item direction with the <code class="highlighter-rouge">.flex-column</code> utility. Need to stack them on some viewports but not others? Use the responsive versions (e.g., <code class="highlighter-rouge">.flex-sm-column</code>).</p>
<div class="bd-example">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
</div>
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><ul</span> <span class="na">class=</span><span class="s">"nav flex-column"</span><span class="nt">></span>
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"nav-item"</span><span class="nt">></span>
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"nav-link active"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Active<span class="nt"></a></span>
<span class="nt"></li></span>
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"nav-item"</span><span class="nt">></span>
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"nav-link"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Link<span class="nt"></a></span>
<span class="nt"></li></span>
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"nav-item"</span><span class="nt">></span>
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"nav-link"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Link<span class="nt"></a></span>
<span class="nt"></li></span>
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"nav-item"</span><span class="nt">></span>
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"nav-link disabled"</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">tabindex=</span><span class="s">"-1"</span> <span class="na">aria-disabled=</span><span class="s">"true"</span><span class="nt">></span>Disabled<span class="nt"></a></span>
<span class="nt"></li></span>
<span class="nt"></ul></span></code></pre></figure>
<p>As always, vertical navigation is possible without <code class="highlighter-rouge"><ul></code>s, too.</p>
<div class="bd-example">
<nav class="nav flex-column">
<a class="nav-link active" href="#">Active</a>
<a class="nav-link" href="#">Link</a>
<a class="nav-link" href="#">Link</a>
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</nav>
</div>
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><nav</span> <span class="na">class=</span><span class="s">"nav flex-column"</span><span class="nt">></span>
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"nav-link active"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Active<span class="nt"></a></span>
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"nav-link"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Link<span class="nt"></a></span>
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"nav-link"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Link<span class="nt"></a></span>
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"nav-link disabled"</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">tabindex=</span><span class="s">"-1"</span> <span class="na">aria-disabled=</span><span class="s">"true"</span><span class="nt">></span>Disabled<span class="nt"></a></span>
<span class="nt"></nav></span></code></pre></figure>
<h3 id="tabs">Tabs</h3>
<p>Takes the basic nav from above and adds the <code class="highlighter-rouge">.nav-tabs</code> class to generate a tabbed interface. Use them to create tabbable regions with our <a href="#javascript-behavior">tab JavaScript plugin</a>.</p>
<div class="bd-example">
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
</div>
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><ul</span> <span class="na">class=</span><span class="s">"nav nav-tabs"</span><span class="nt">></span>
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"nav-item"</span><span class="nt">></span>
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"nav-link active"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Active<span class="nt"></a></span>
<span class="nt"></li></span>
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"nav-item"</span><span class="nt">></span>
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"nav-link"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Link<span class="nt"></a></span>
<span class="nt"></li></span>
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"nav-item"</span><span class="nt">></span>
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"nav-link"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Link<span class="nt"></a></span>
<span class="nt"></li></span>
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"nav-item"</span><span class="nt">></span>
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"nav-link disabled"</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">tabindex=</span><span class="s">"-1"</span> <span class="na">aria-disabled=</span><span class="s">"true"</span><span class="nt">></span>Disabled<span class="nt"></a></span>
<span class="nt"></li></span>
<span class="nt"></ul></span></code></pre></figure>
<h3 id="pills">Pills</h3>
<p>Take that same HTML, but use <code class="highlighter-rouge">.nav-pills</code> instead:</p>
<div class="bd-example">
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
</div>
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><ul</span> <span class="na">class=</span><span class="s">"nav nav-pills"</span><span class="nt">></span>
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"nav-item"</span><span class="nt">></span>
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"nav-link active"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Active<span class="nt"></a></span>
<span class="nt"></li></span>
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"nav-item"</span><span class="nt">></span>
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"nav-link"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Link<span class="nt"></a></span>
<span class="nt"></li></span>
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"nav-item"</span><span class="nt">></span>
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"nav-link"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Link<span class="nt"></a></span>
<span class="nt"></li></span>
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"nav-item"</span><span class="nt">></span>
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"nav-link disabled"</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">tabindex=</span><span class="s">"-1"</span> <span class="na">aria-disabled=</span><span class="s">"true"</span><span class="nt">></span>Disabled<span class="nt"></a></span>
<span class="nt"></li></span>
<span class="nt"></ul></span></code></pre></figure>
<h3 id="fill-and-justify">Fill and justify</h3>
<p>Force your <code class="highlighter-rouge">.nav</code>’s contents to extend the full available width one of two modifier classes. To proportionately fill all available space with your <code class="highlighter-rouge">.nav-item</code>s, use <code class="highlighter-rouge">.nav-fill</code>. Notice that all horizontal space is occupied, but not every nav item has the same width.</p>
<div class="bd-example">
<ul class="nav nav-pills nav-fill">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Longer nav link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
</div>
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><ul</span> <span class="na">class=</span><span class="s">"nav nav-pills nav-fill"</span><span class="nt">></span>
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"nav-item"</span><span class="nt">></span>
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"nav-link active"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Active<span class="nt"></a></span>
<span class="nt"></li></span>
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"nav-item"</span><span class="nt">></span>
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"nav-link"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Longer nav link<span class="nt"></a></span>
<span class="nt"></li></span>
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"nav-item"</span><span class="nt">></span>
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"nav-link"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Link<span class="nt"></a></span>
<span class="nt"></li></span>
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"nav-item"</span><span class="nt">></span>
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"nav-link disabled"</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">tabindex=</span><span class="s">"-1"</span> <span class="na">aria-disabled=</span><span class="s">"true"</span><span class="nt">></span>Disabled<span class="nt"></a></span>
<span class="nt"></li></span>
<span class="nt"></ul></span></code></pre></figure>
<p>When using a <code class="highlighter-rouge"><nav></code>-based navigation, be sure to include <code class="highlighter-rouge">.nav-item</code> on the anchors.</p>
<div class="bd-example">
<nav class="nav nav-pills nav-fill">
<a class="nav-item nav-link active" href="#">Active</a>
<a class="nav-item nav-link" href="#">Link</a>
<a class="nav-item nav-link" href="#">Link</a>
<a class="nav-item nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</nav>
</div>
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><nav</span> <span class="na">class=</span><span class="s">"nav nav-pills nav-fill"</span><span class="nt">></span>
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"nav-item nav-link active"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Active<span class="nt"></a></span>
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"nav-item nav-link"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Link<span class="nt"></a></span>
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"nav-item nav-link"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Link<span class="nt"></a></span>
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"nav-item nav-link disabled"</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">tabindex=</span><span class="s">"-1"</span> <span class="na">aria-disabled=</span><span class="s">"true"</span><span class="nt">></span>Disabled<span class="nt"></a></span>
<span class="nt"></nav></span></code></pre></figure>
<p>For equal-width elements, use <code class="highlighter-rouge">.nav-justified</code>. All horizontal space will be occupied by nav links, but unlike the <code class="highlighter-rouge">.nav-fill</code> above, every nav item will be the same width.</p>
<div class="bd-example">
<nav class="nav nav-pills nav-justified">
<a class="nav-link active" href="#">Active</a>
<a class="nav-link" href="#">Longer nav link</a>
<a class="nav-link" href="#">Link</a>
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</nav>
</div>
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><nav</span> <span class="na">class=</span><span class="s">"nav nav-pills nav-justified"</span><span class="nt">></span>
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"nav-link active"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Active<span class="nt"></a></span>
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"nav-link"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Longer nav link<span class="nt"></a></span>
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"nav-link"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Link<span class="nt"></a></span>
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"nav-link disabled"</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">tabindex=</span><span class="s">"-1"</span> <span class="na">aria-disabled=</span><span class="s">"true"</span><span class="nt">></span>Disabled<span class="nt"></a></span>
<span class="nt"></nav></span></code></pre></figure>
<p>Similar to the <code class="highlighter-rouge">.nav-fill</code> example using a <code class="highlighter-rouge"><nav></code>-based navigation, be sure to include <code class="highlighter-rouge">.nav-item</code> on the anchors.</p>
<div class="bd-example">
<nav class="nav nav-pills nav-justified">
<a class="nav-item nav-link active" href="#">Active</a>
<a class="nav-item nav-link" href="#">Link</a>
<a class="nav-item nav-link" href="#">Link</a>
<a class="nav-item nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</nav>
</div>
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><nav</span> <span class="na">class=</span><span class="s">"nav nav-pills nav-justified"</span><span class="nt">></span>
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"nav-item nav-link active"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Active<span class="nt"></a></span>
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"nav-item nav-link"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Link<span class="nt"></a></span>
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"nav-item nav-link"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Link<span class="nt"></a></span>
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"nav-item nav-link disabled"</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">tabindex=</span><span class="s">"-1"</span> <span class="na">aria-disabled=</span><span class="s">"true"</span><span class="nt">></span>Disabled<span class="nt"></a></span>
<span class="nt"></nav></span></code></pre></figure>
<h2 id="working-with-flex-utilities">Working with flex utilities</h2>
<p>If you need responsive nav variations, consider using a series of <a href="/docs/4.2/utilities/flex/">flexbox utilities</a>. While more verbose, these utilities offer greater customization across responsive breakpoints. In the example below, our nav will be stacked on the lowest breakpoint, then adapt to a horizontal layout that fills the available width starting from the small breakpoint.</p>
<div class="bd-example">
<nav class="nav nav-pills flex-column flex-sm-row">
<a class="flex-sm-fill text-sm-center nav-link active" href="#">Active</a>
<a class="flex-sm-fill text-sm-center nav-link" href="#">Link</a>
<a class="flex-sm-fill text-sm-center nav-link" href="#">Link</a>
<a class="flex-sm-fill text-sm-center nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</nav>
</div>
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><nav</span> <span class="na">class=</span><span class="s">"nav nav-pills flex-column flex-sm-row"</span><span class="nt">></span>
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"flex-sm-fill text-sm-center nav-link active"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Active<span class="nt"></a></span>
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"flex-sm-fill text-sm-center nav-link"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Link<span class="nt"></a></span>
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"flex-sm-fill text-sm-center nav-link"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Link<span class="nt"></a></span>
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"flex-sm-fill text-sm-center nav-link disabled"</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">tabindex=</span><span class="s">"-1"</span> <span class="na">aria-disabled=</span><span class="s">"true"</span><span class="nt">></span>Disabled<span class="nt"></a></span>
<span class="nt"></nav></span></code></pre></figure>
<h2 id="regarding-accessibility">Regarding accessibility</h2>
<p>If you’re using navs to provide a navigation bar, be sure to add a <code class="highlighter-rouge">role="navigation"</code> to the most logical parent container of the <code class="highlighter-rouge"><ul></code>, or wrap a <code class="highlighter-rouge"><nav></code> element around the whole navigation. Do not add the role to the <code class="highlighter-rouge"><ul></code> itself, as this would prevent it from being announced as an actual list by assistive technologies.</p>
<p>Note that navigation bars, even if visually styled as tabs with the <code class="highlighter-rouge">.nav-tabs</code> class, should <strong>not</strong> be given <code class="highlighter-rouge">role="tablist"</code>, <code class="highlighter-rouge">role="tab"</code> or <code class="highlighter-rouge">role="tabpanel"</code> attributes. These are only appropriate for dynamic tabbed interfaces, as described in the <a href="https://www.w3.org/TR/wai-aria-practices/#tabpanel"><abbr title="Web Accessibility Initiative">WAI</abbr> <abbr title="Accessible Rich Internet Applications">ARIA</abbr> Authoring Practices</a>. See <a href="#javascript-behavior">JavaScript behavior</a> for dynamic tabbed interfaces in this section for an example.</p>
<h2 id="using-dropdowns">Using dropdowns</h2>
<p>Add dropdown menus with a little extra HTML and the <a href="/docs/4.2/components/dropdowns/#usage">dropdowns JavaScript plugin</a>.</p>
<h3 id="tabs-with-dropdowns">Tabs with dropdowns</h3>
<div class="bd-example">
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
</div>
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><ul</span> <span class="na">class=</span><span class="s">"nav nav-tabs"</span><span class="nt">></span>
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"nav-item"</span><span class="nt">></span>
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"nav-link active"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Active<span class="nt"></a></span>
<span class="nt"></li></span>
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"nav-item dropdown"</span><span class="nt">></span>
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"nav-link dropdown-toggle"</span> <span class="na">data-toggle=</span><span class="s">"dropdown"</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">role=</span><span class="s">"button"</span> <span class="na">aria-haspopup=</span><span class="s">"true"</span> <span class="na">aria-expanded=</span><span class="s">"false"</span><span class="nt">></span>Dropdown<span class="nt"></a></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"dropdown-menu"</span><span class="nt">></span>
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"dropdown-item"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Action<span class="nt"></a></span>
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"dropdown-item"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Another action<span class="nt"></a></span>
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"dropdown-item"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Something else here<span class="nt"></a></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"dropdown-divider"</span><span class="nt">></div></span>
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"dropdown-item"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Separated link<span class="nt"></a></span>
<span class="nt"></div></span>
<span class="nt"></li></span>
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"nav-item"</span><span class="nt">></span>
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"nav-link"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Link<span class="nt"></a></span>
<span class="nt"></li></span>
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"nav-item"</span><span class="nt">></span>
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"nav-link disabled"</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">tabindex=</span><span class="s">"-1"</span> <span class="na">aria-disabled=</span><span class="s">"true"</span><span class="nt">></span>Disabled<span class="nt"></a></span>
<span class="nt"></li></span>
<span class="nt"></ul></span></code></pre></figure>
<h3 id="pills-with-dropdowns">Pills with dropdowns</h3>
<div class="bd-example">
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
</div>
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><ul</span> <span class="na">class=</span><span class="s">"nav nav-pills"</span><span class="nt">></span>
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"nav-item"</span><span class="nt">></span>
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"nav-link active"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Active<span class="nt"></a></span>
<span class="nt"></li></span>
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"nav-item dropdown"</span><span class="nt">></span>
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"nav-link dropdown-toggle"</span> <span class="na">data-toggle=</span><span class="s">"dropdown"</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">role=</span><span class="s">"button"</span> <span class="na">aria-haspopup=</span><span class="s">"true"</span> <span class="na">aria-expanded=</span><span class="s">"false"</span><span class="nt">></span>Dropdown<span class="nt"></a></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"dropdown-menu"</span><span class="nt">></span>
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"dropdown-item"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Action<span class="nt"></a></span>
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"dropdown-item"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Another action<span class="nt"></a></span>
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"dropdown-item"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Something else here<span class="nt"></a></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"dropdown-divider"</span><span class="nt">></div></span>
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"dropdown-item"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Separated link<span class="nt"></a></span>
<span class="nt"></div></span>
<span class="nt"></li></span>
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"nav-item"</span><span class="nt">></span>
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"nav-link"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Link<span class="nt"></a></span>
<span class="nt"></li></span>
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"nav-item"</span><span class="nt">></span>
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"nav-link disabled"</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">tabindex=</span><span class="s">"-1"</span> <span class="na">aria-disabled=</span><span class="s">"true"</span><span class="nt">></span>Disabled<span class="nt"></a></span>
<span class="nt"></li></span>
<span class="nt"></ul></span></code></pre></figure>
<h2 id="javascript-behavior">JavaScript behavior</h2>
<p>Use the tab JavaScript plugin—include it individually or through the compiled <code class="highlighter-rouge">bootstrap.js</code> file—to extend our navigational tabs and pills to create tabbable panes of local content, even via dropdown menus.</p>
<p>If you’re building our JavaScript from source, it <a href="/docs/4.2/getting-started/javascript/#util">requires <code class="highlighter-rouge">util.js</code></a>.</p>
<p>Dynamic tabbed interfaces, as described in the <a href="https://www.w3.org/TR/wai-aria-practices/#tabpanel"><abbr title="Web Accessibility Initiative">WAI</abbr> <abbr title="Accessible Rich Internet Applications">ARIA</abbr> Authoring Practices</a>, require <code class="highlighter-rouge">role="tablist"</code>, <code class="highlighter-rouge">role="tab"</code>, <code class="highlighter-rouge">role="tabpanel"</code>, and additional <code class="highlighter-rouge">aria-</code> attributes in order to convey their structure, functionality and current state to users of assistive technologies (such as screen readers).</p>
<p>Note that dynamic tabbed interfaces should <em>not</em> contain dropdown menus, as this causes both usability and accessibility issues. From a usability perspective, the fact that the currently displayed tab’s trigger element is not immediately visible (as it’s inside the closed dropdown menu) can cause confusion. From an accessibility point of view, there is currently no sensible way to map this sort of construct to a standard WAI ARIA pattern, meaning that it cannot be easily made understandable to users of assistive technologies.</p>
<div class="bd-example bd-example-tabs">
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
<p>Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.</p>
</div>
<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
<p>Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.</p>
</div>
<div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">
<p>Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog. Scenester cred you probably haven't heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.</p>
</div>
</div>
</div>
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><ul</span> <span class="na">class=</span><span class="s">"nav nav-tabs"</span> <span class="na">id=</span><span class="s">"myTab"</span> <span class="na">role=</span><span class="s">"tablist"</span><span class="nt">></span>
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"nav-item"</span><span class="nt">></span>
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"nav-link active"</span> <span class="na">id=</span><span class="s">"home-tab"</span> <span class="na">data-toggle=</span><span class="s">"tab"</span> <span class="na">href=</span><span class="s">"#home"</span> <span class="na">role=</span><span class="s">"tab"</span> <span class="na">aria-controls=</span><span class="s">"home"</span> <span class="na">aria-selected=</span><span class="s">"true"</span><span class="nt">></span>Home<span class="nt"></a></span>
<span class="nt"></li></span>
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"nav-item"</span><span class="nt">></span>
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"nav-link"</span> <span class="na">id=</span><span class="s">"profile-tab"</span> <span class="na">data-toggle=</span><span class="s">"tab"</span> <span class="na">href=</span><span class="s">"#profile"</span> <span class="na">role=</span><span class="s">"tab"</span> <span class="na">aria-controls=</span><span class="s">"profile"</span> <span class="na">aria-selected=</span><span class="s">"false"</span><span class="nt">></span>Profile<span class="nt"></a></span>
<span class="nt"></li></span>
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"nav-item"</span><span class="nt">></span>
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"nav-link"</span> <span class="na">id=</span><span class="s">"contact-tab"</span> <span class="na">data-toggle=</span><span class="s">"tab"</span> <span class="na">href=</span><span class="s">"#contact"</span> <span class="na">role=</span><span class="s">"tab"</span> <span class="na">aria-controls=</span><span class="s">"contact"</span> <span class="na">aria-selected=</span><span class="s">"false"</span><span class="nt">></span>Contact<span class="nt"></a></span>
<span class="nt"></li></span>
<span class="nt"></ul></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"tab-content"</span> <span class="na">id=</span><span class="s">"myTabContent"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"tab-pane fade show active"</span> <span class="na">id=</span><span class="s">"home"</span> <span class="na">role=</span><span class="s">"tabpanel"</span> <span class="na">aria-labelledby=</span><span class="s">"home-tab"</span><span class="nt">></span>...<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"tab-pane fade"</span> <span class="na">id=</span><span class="s">"profile"</span> <span class="na">role=</span><span class="s">"tabpanel"</span> <span class="na">aria-labelledby=</span><span class="s">"profile-tab"</span><span class="nt">></span>...<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"tab-pane fade"</span> <span class="na">id=</span><span class="s">"contact"</span> <span class="na">role=</span><span class="s">"tabpanel"</span> <span class="na">aria-labelledby=</span><span class="s">"contact-tab"</span><span class="nt">></span>...<span class="nt"></div></span>
<span class="nt"></div></span></code></pre></figure>
<p>To help fit your needs, this works with <code class="highlighter-rouge"><ul></code>-based markup, as shown above, or with any arbitrary “roll your own” markup. Note that if you’re using <code class="highlighter-rouge"><nav></code>, you shouldn’t add <code class="highlighter-rouge">role="tablist"</code> directly to it, as this would override the element’s native role as a navigation landmark. Instead, switch to an alternative element (in the example below, a simple <code class="highlighter-rouge"><div></code>) and wrap the <code class="highlighter-rouge"><nav></code> around it.</p>
<div class="bd-example bd-example-tabs">
<nav>
<div class="nav nav-tabs" id="nav-tab" role="tablist">
<a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">Home</a>
<a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</a>
<a class="nav-item nav-link" id="nav-contact-tab" data-toggle="tab" href="#nav-contact" role="tab" aria-controls="nav-contact" aria-selected="false">Contact</a>
</div>
</nav>
<div class="tab-content" id="nav-tabContent">
<div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">
<p>Et et consectetur ipsum labore excepteur est proident excepteur ad velit occaecat qui minim occaecat veniam. Fugiat veniam incididunt anim aliqua enim pariatur veniam sunt est aute sit dolor anim. Velit non irure adipisicing aliqua ullamco irure incididunt irure non esse consectetur nostrud minim non minim occaecat. Amet duis do nisi duis veniam non est eiusmod tempor incididunt tempor dolor ipsum in qui sit. Exercitation mollit sit culpa nisi culpa non adipisicing reprehenderit do dolore. Duis reprehenderit occaecat anim ullamco ad duis occaecat ex.</p>
</div>
<div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">
<p>Nulla est ullamco ut irure incididunt nulla Lorem Lorem minim irure officia enim reprehenderit. Magna duis labore cillum sint adipisicing exercitation ipsum. Nostrud ut anim non exercitation velit laboris fugiat cupidatat. Commodo esse dolore fugiat sint velit ullamco magna consequat voluptate minim amet aliquip ipsum aute laboris nisi. Labore labore veniam irure irure ipsum pariatur mollit magna in cupidatat dolore magna irure esse tempor ad mollit. Dolore commodo nulla minim amet ipsum officia consectetur amet ullamco voluptate nisi commodo ea sit eu.</p>
</div>
<div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab">
<p>Sint sit mollit irure quis est nostrud cillum consequat Lorem esse do quis dolor esse fugiat sunt do. Eu ex commodo veniam Lorem aliquip laborum occaecat qui Lorem esse mollit dolore anim cupidatat. Deserunt officia id Lorem nostrud aute id commodo elit eiusmod enim irure amet eiusmod qui reprehenderit nostrud tempor. Fugiat ipsum excepteur in aliqua non et quis aliquip ad irure in labore cillum elit enim. Consequat aliquip incididunt ipsum et minim laborum laborum laborum et cillum labore. Deserunt adipisicing cillum id nulla minim nostrud labore eiusmod et amet. Laboris consequat consequat commodo non ut non aliquip reprehenderit nulla anim occaecat. Sunt sit ullamco reprehenderit irure ea ullamco Lorem aute nostrud magna.</p>
</div>
</div>
</div>
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><nav></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"nav nav-tabs"</span> <span class="na">id=</span><span class="s">"nav-tab"</span> <span class="na">role=</span><span class="s">"tablist"</span><span class="nt">></span>
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"nav-item nav-link active"</span> <span class="na">id=</span><span class="s">"nav-home-tab"</span> <span class="na">data-toggle=</span><span class="s">"tab"</span> <span class="na">href=</span><span class="s">"#nav-home"</span> <span class="na">role=</span><span class="s">"tab"</span> <span class="na">aria-controls=</span><span class="s">"nav-home"</span> <span class="na">aria-selected=</span><span class="s">"true"</span><span class="nt">></span>Home<span class="nt"></a></span>
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"nav-item nav-link"</span> <span class="na">id=</span><span class="s">"nav-profile-tab"</span> <span class="na">data-toggle=</span><span class="s">"tab"</span> <span class="na">href=</span><span class="s">"#nav-profile"</span> <span class="na">role=</span><span class="s">"tab"</span> <span class="na">aria-controls=</span><span class="s">"nav-profile"</span> <span class="na">aria-selected=</span><span class="s">"false"</span><span class="nt">></span>Profile<span class="nt"></a></span>
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"nav-item nav-link"</span> <span class="na">id=</span><span class="s">"nav-contact-tab"</span> <span class="na">data-toggle=</span><span class="s">"tab"</span> <span class="na">href=</span><span class="s">"#nav-contact"</span> <span class="na">role=</span><span class="s">"tab"</span> <span class="na">aria-controls=</span><span class="s">"nav-contact"</span> <span class="na">aria-selected=</span><span class="s">"false"</span><span class="nt">></span>Contact<span class="nt"></a></span>
<span class="nt"></div></span>
<span class="nt"></nav></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"tab-content"</span> <span class="na">id=</span><span class="s">"nav-tabContent"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"tab-pane fade show active"</span> <span class="na">id=</span><span class="s">"nav-home"</span> <span class="na">role=</span><span class="s">"tabpanel"</span> <span class="na">aria-labelledby=</span><span class="s">"nav-home-tab"</span><span class="nt">></span>...<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"tab-pane fade"</span> <span class="na">id=</span><span class="s">"nav-profile"</span> <span class="na">role=</span><span class="s">"tabpanel"</span> <span class="na">aria-labelledby=</span><span class="s">"nav-profile-tab"</span><span class="nt">></span>...<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"tab-pane fade"</span> <span class="na">id=</span><span class="s">"nav-contact"</span> <span class="na">role=</span><span class="s">"tabpanel"</span> <span class="na">aria-labelledby=</span><span class="s">"nav-contact-tab"</span><span class="nt">></span>...<span class="nt"></div></span>
<span class="nt"></div></span></code></pre></figure>
<p>The tabs plugin also works with pills.</p>
<div class="bd-example bd-example-tabs">
<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="pills-home-tab" data-toggle="pill" href="#pills-home" role="tab" aria-controls="pills-home" aria-selected="true">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" id="pills-profile-tab" data-toggle="pill" href="#pills-profile" role="tab" aria-controls="pills-profile" aria-selected="false">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" id="pills-contact-tab" data-toggle="pill" href="#pills-contact" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</a>
</li>
</ul>
<div class="tab-content" id="pills-tabContent">
<div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">
<p>Consequat occaecat ullamco amet non eiusmod nostrud dolore irure incididunt est duis anim sunt officia. Fugiat velit proident aliquip nisi incididunt nostrud exercitation proident est nisi. Irure magna elit commodo anim ex veniam culpa eiusmod id nostrud sit cupidatat in veniam ad. Eiusmod consequat eu adipisicing minim anim aliquip cupidatat culpa excepteur quis. Occaecat sit eu exercitation irure Lorem incididunt nostrud.</p>
</div>
<div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">
<p>Ad pariatur nostrud pariatur exercitation ipsum ipsum culpa mollit commodo mollit ex. Aute sunt incididunt amet commodo est sint nisi deserunt pariatur do. Aliquip ex eiusmod voluptate exercitation cillum id incididunt elit sunt. Qui minim sit magna Lorem id et dolore velit Lorem amet exercitation duis deserunt. Anim id labore elit adipisicing ut in id occaecat pariatur ut ullamco ea tempor duis.</p>
</div>
<div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab">
<p>Est quis nulla laborum officia ad nisi ex nostrud culpa Lorem excepteur aliquip dolor aliqua irure ex. Nulla ut duis ipsum nisi elit fugiat commodo sunt reprehenderit laborum veniam eu veniam. Eiusmod minim exercitation fugiat irure ex labore incididunt do fugiat commodo aliquip sit id deserunt reprehenderit aliquip nostrud. Amet ex cupidatat excepteur aute veniam incididunt mollit cupidatat esse irure officia elit do ipsum ullamco Lorem. Ullamco ut ad minim do mollit labore ipsum laboris ipsum commodo sunt tempor enim incididunt. Commodo quis sunt dolore aliquip aute tempor irure magna enim minim reprehenderit. Ullamco consectetur culpa veniam sint cillum aliqua incididunt velit ullamco sunt ullamco quis quis commodo voluptate. Mollit nulla nostrud adipisicing aliqua cupidatat aliqua pariatur mollit voluptate voluptate consequat non.</p>
</div>
</div>
</div>
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><ul</span> <span class="na">class=</span><span class="s">"nav nav-pills mb-3"</span> <span class="na">id=</span><span class="s">"pills-tab"</span> <span class="na">role=</span><span class="s">"tablist"</span><span class="nt">></span>
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"nav-item"</span><span class="nt">></span>
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"nav-link active"</span> <span class="na">id=</span><span class="s">"pills-home-tab"</span> <span class="na">data-toggle=</span><span class="s">"pill"</span> <span class="na">href=</span><span class="s">"#pills-home"</span> <span class="na">role=</span><span class="s">"tab"</span> <span class="na">aria-controls=</span><span class="s">"pills-home"</span> <span class="na">aria-selected=</span><span class="s">"true"</span><span class="nt">></span>Home<span class="nt"></a></span>
<span class="nt"></li></span>
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"nav-item"</span><span class="nt">></span>
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"nav-link"</span> <span class="na">id=</span><span class="s">"pills-profile-tab"</span> <span class="na">data-toggle=</span><span class="s">"pill"</span> <span class="na">href=</span><span class="s">"#pills-profile"</span> <span class="na">role=</span><span class="s">"tab"</span> <span class="na">aria-controls=</span><span class="s">"pills-profile"</span> <span class="na">aria-selected=</span><span class="s">"false"</span><span class="nt">></span>Profile<span class="nt"></a></span>
<span class="nt"></li></span>
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"nav-item"</span><span class="nt">></span>
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"nav-link"</span> <span class="na">id=</span><span class="s">"pills-contact-tab"</span> <span class="na">data-toggle=</span><span class="s">"pill"</span> <span class="na">href=</span><span class="s">"#pills-contact"</span> <span class="na">role=</span><span class="s">"tab"</span> <span class="na">aria-controls=</span><span class="s">"pills-contact"</span> <span class="na">aria-selected=</span><span class="s">"false"</span><span class="nt">></span>Contact<span class="nt"></a></span>
<span class="nt"></li></span>
<span class="nt"></ul></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"tab-content"</span> <span class="na">id=</span><span class="s">"pills-tabContent"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"tab-pane fade show active"</span> <span class="na">id=</span><span class="s">"pills-home"</span> <span class="na">role=</span><span class="s">"tabpanel"</span> <span class="na">aria-labelledby=</span><span class="s">"pills-home-tab"</span><span class="nt">></span>...<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"tab-pane fade"</span> <span class="na">id=</span><span class="s">"pills-profile"</span> <span class="na">role=</span><span class="s">"tabpanel"</span> <span class="na">aria-labelledby=</span><span class="s">"pills-profile-tab"</span><span class="nt">></span>...<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"tab-pane fade"</span> <span class="na">id=</span><span class="s">"pills-contact"</span> <span class="na">role=</span><span class="s">"tabpanel"</span> <span class="na">aria-labelledby=</span><span class="s">"pills-contact-tab"</span><span class="nt">></span>...<span class="nt"></div></span>
<span class="nt"></div></span></code></pre></figure>
<p>And with vertical pills.</p>
<div class="bd-example bd-example-tabs">
<div class="row">
<div class="col-3">
<div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
<a class="nav-link active" id="v-pills-home-tab" data-toggle="pill" href="#v-pills-home" role="tab" aria-controls="v-pills-home" aria-selected="true">Home</a>
<a class="nav-link" id="v-pills-profile-tab" data-toggle="pill" href="#v-pills-profile" role="tab" aria-controls="v-pills-profile" aria-selected="false">Profile</a>
<a class="nav-link" id="v-pills-messages-tab" data-toggle="pill" href="#v-pills-messages" role="tab" aria-controls="v-pills-messages" aria-selected="false">Messages</a>
<a class="nav-link" id="v-pills-settings-tab" data-toggle="pill" href="#v-pills-settings" role="tab" aria-controls="v-pills-settings" aria-selected="false">Settings</a>
</div>
</div>
<div class="col-9">
<div class="tab-content" id="v-pills-tabContent">
<div class="tab-pane fade show active" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab">
<p>Cillum ad ut irure tempor velit nostrud occaecat ullamco aliqua anim Lorem sint. Veniam sint duis incididunt do esse magna mollit excepteur laborum qui. Id id reprehenderit sit est eu aliqua occaecat quis et velit excepteur laborum mollit dolore eiusmod. Ipsum dolor in occaecat commodo et voluptate minim reprehenderit mollit pariatur. Deserunt non laborum enim et cillum eu deserunt excepteur ea incididunt minim occaecat.</p>
</div>
<div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab">
<p>Culpa dolor voluptate do laboris laboris irure reprehenderit id incididunt duis pariatur mollit aute magna pariatur consectetur. Eu veniam duis non ut dolor deserunt commodo et minim in quis laboris ipsum velit id veniam. Quis ut consectetur adipisicing officia excepteur non sit. Ut et elit aliquip labore Lorem enim eu. Ullamco mollit occaecat dolore ipsum id officia mollit qui esse anim eiusmod do sint minim consectetur qui.</p>
</div>
<div class="tab-pane fade" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab">
<p>Fugiat id quis dolor culpa eiusmod anim velit excepteur proident dolor aute qui magna. Ad proident laboris ullamco esse anim Lorem Lorem veniam quis Lorem irure occaecat velit nostrud magna nulla. Velit et et proident Lorem do ea tempor officia dolor. Reprehenderit Lorem aliquip labore est magna commodo est ea veniam consectetur.</p>
</div>
<div class="tab-pane fade" id="v-pills-settings" role="tabpanel" aria-labelledby="v-pills-settings-tab">
<p>Eu dolore ea ullamco dolore Lorem id cupidatat excepteur reprehenderit consectetur elit id dolor proident in cupidatat officia. Voluptate excepteur commodo labore nisi cillum duis aliqua do. Aliqua amet qui mollit consectetur nulla mollit velit aliqua veniam nisi id do Lorem deserunt amet. Culpa ullamco sit adipisicing labore officia magna elit nisi in aute tempor commodo eiusmod.</p>
</div>
</div>
</div>
</div>
</div>
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"row"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-3"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"nav flex-column nav-pills"</span> <span class="na">id=</span><span class="s">"v-pills-tab"</span> <span class="na">role=</span><span class="s">"tablist"</span> <span class="na">aria-orientation=</span><span class="s">"vertical"</span><span class="nt">></span>
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"nav-link active"</span> <span class="na">id=</span><span class="s">"v-pills-home-tab"</span> <span class="na">data-toggle=</span><span class="s">"pill"</span> <span class="na">href=</span><span class="s">"#v-pills-home"</span> <span class="na">role=</span><span class="s">"tab"</span> <span class="na">aria-controls=</span><span class="s">"v-pills-home"</span> <span class="na">aria-selected=</span><span class="s">"true"</span><span class="nt">></span>Home<span class="nt"></a></span>
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"nav-link"</span> <span class="na">id=</span><span class="s">"v-pills-profile-tab"</span> <span class="na">data-toggle=</span><span class="s">"pill"</span> <span class="na">href=</span><span class="s">"#v-pills-profile"</span> <span class="na">role=</span><span class="s">"tab"</span> <span class="na">aria-controls=</span><span class="s">"v-pills-profile"</span> <span class="na">aria-selected=</span><span class="s">"false"</span><span class="nt">></span>Profile<span class="nt"></a></span>
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"nav-link"</span> <span class="na">id=</span><span class="s">"v-pills-messages-tab"</span> <span class="na">data-toggle=</span><span class="s">"pill"</span> <span class="na">href=</span><span class="s">"#v-pills-messages"</span> <span class="na">role=</span><span class="s">"tab"</span> <span class="na">aria-controls=</span><span class="s">"v-pills-messages"</span> <span class="na">aria-selected=</span><span class="s">"false"</span><span class="nt">></span>Messages<span class="nt"></a></span>
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"nav-link"</span> <span class="na">id=</span><span class="s">"v-pills-settings-tab"</span> <span class="na">data-toggle=</span><span class="s">"pill"</span> <span class="na">href=</span><span class="s">"#v-pills-settings"</span> <span class="na">role=</span><span class="s">"tab"</span> <span class="na">aria-controls=</span><span class="s">"v-pills-settings"</span> <span class="na">aria-selected=</span><span class="s">"false"</span><span class="nt">></span>Settings<span class="nt"></a></span>
<span class="nt"></div></span>
<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-9"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"tab-content"</span> <span class="na">id=</span><span class="s">"v-pills-tabContent"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"tab-pane fade show active"</span> <span class="na">id=</span><span class="s">"v-pills-home"</span> <span class="na">role=</span><span class="s">"tabpanel"</span> <span class="na">aria-labelledby=</span><span class="s">"v-pills-home-tab"</span><span class="nt">></span>...<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"tab-pane fade"</span> <span class="na">id=</span><span class="s">"v-pills-profile"</span> <span class="na">role=</span><span class="s">"tabpanel"</span> <span class="na">aria-labelledby=</span><span class="s">"v-pills-profile-tab"</span><span class="nt">></span>...<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"tab-pane fade"</span> <span class="na">id=</span><span class="s">"v-pills-messages"</span> <span class="na">role=</span><span class="s">"tabpanel"</span> <span class="na">aria-labelledby=</span><span class="s">"v-pills-messages-tab"</span><span class="nt">></span>...<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"tab-pane fade"</span> <span class="na">id=</span><span class="s">"v-pills-settings"</span> <span class="na">role=</span><span class="s">"tabpanel"</span> <span class="na">aria-labelledby=</span><span class="s">"v-pills-settings-tab"</span><span class="nt">></span>...<span class="nt"></div></span>
<span class="nt"></div></span>
<span class="nt"></div></span>
<span class="nt"></div></span></code></pre></figure>
<h3 id="using-data-attributes">Using data attributes</h3>
<p>You can activate a tab or pill navigation without writing any JavaScript by simply specifying <code class="highlighter-rouge">data-toggle="tab"</code> or <code class="highlighter-rouge">data-toggle="pill"</code> on an element. Use these data attributes on <code class="highlighter-rouge">.nav-tabs</code> or <code class="highlighter-rouge">.nav-pills</code>.</p>
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="c"><!-- Nav tabs --></span>
<span class="nt"><ul</span> <span class="na">class=</span><span class="s">"nav nav-tabs"</span> <span class="na">id=</span><span class="s">"myTab"</span> <span class="na">role=</span><span class="s">"tablist"</span><span class="nt">></span>
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"nav-item"</span><span class="nt">></span>
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"nav-link active"</span> <span class="na">id=</span><span class="s">"home-tab"</span> <span class="na">data-toggle=</span><span class="s">"tab"</span> <span class="na">href=</span><span class="s">"#home"</span> <span class="na">role=</span><span class="s">"tab"</span> <span class="na">aria-controls=</span><span class="s">"home"</span> <span class="na">aria-selected=</span><span class="s">"true"</span><span class="nt">></span>Home<span class="nt"></a></span>
<span class="nt"></li></span>
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"nav-item"</span><span class="nt">></span>
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"nav-link"</span> <span class="na">id=</span><span class="s">"profile-tab"</span> <span class="na">data-toggle=</span><span class="s">"tab"</span> <span class="na">href=</span><span class="s">"#profile"</span> <span class="na">role=</span><span class="s">"tab"</span> <span class="na">aria-controls=</span><span class="s">"profile"</span> <span class="na">aria-selected=</span><span class="s">"false"</span><span class="nt">></span>Profile<span class="nt"></a></span>
<span class="nt"></li></span>
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"nav-item"</span><span class="nt">></span>
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"nav-link"</span> <span class="na">id=</span><span class="s">"messages-tab"</span> <span class="na">data-toggle=</span><span class="s">"tab"</span> <span class="na">href=</span><span class="s">"#messages"</span> <span class="na">role=</span><span class="s">"tab"</span> <span class="na">aria-controls=</span><span class="s">"messages"</span> <span class="na">aria-selected=</span><span class="s">"false"</span><span class="nt">></span>Messages<span class="nt"></a></span>
<span class="nt"></li></span>
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"nav-item"</span><span class="nt">></span>
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"nav-link"</span> <span class="na">id=</span><span class="s">"settings-tab"</span> <span class="na">data-toggle=</span><span class="s">"tab"</span> <span class="na">href=</span><span class="s">"#settings"</span> <span class="na">role=</span><span class="s">"tab"</span> <span class="na">aria-controls=</span><span class="s">"settings"</span> <span class="na">aria-selected=</span><span class="s">"false"</span><span class="nt">></span>Settings<span class="nt"></a></span>
<span class="nt"></li></span>
<span class="nt"></ul></span>
<span class="c"><!-- Tab panes --></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"tab-content"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"tab-pane active"</span> <span class="na">id=</span><span class="s">"home"</span> <span class="na">role=</span><span class="s">"tabpanel"</span> <span class="na">aria-labelledby=</span><span class="s">"home-tab"</span><span class="nt">></span>...<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"tab-pane"</span> <span class="na">id=</span><span class="s">"profile"</span> <span class="na">role=</span><span class="s">"tabpanel"</span> <span class="na">aria-labelledby=</span><span class="s">"profile-tab"</span><span class="nt">></span>...<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"tab-pane"</span> <span class="na">id=</span><span class="s">"messages"</span> <span class="na">role=</span><span class="s">"tabpanel"</span> <span class="na">aria-labelledby=</span><span class="s">"messages-tab"</span><span class="nt">></span>...<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"tab-pane"</span> <span class="na">id=</span><span class="s">"settings"</span> <span class="na">role=</span><span class="s">"tabpanel"</span> <span class="na">aria-labelledby=</span><span class="s">"settings-tab"</span><span class="nt">></span>...<span class="nt"></div></span>
<span class="nt"></div></span></code></pre></figure>
<h3 id="via-javascript">Via JavaScript</h3>
<p>Enable tabbable tabs via JavaScript (each tab needs to be activated individually):</p>
<figure class="highlight"><pre><code class="language-js" data-lang="js"><span class="nx">$</span><span class="p">(</span><span class="s1">'#myTab a'</span><span class="p">).</span><span class="nx">on</span><span class="p">(</span><span class="s1">'click'</span><span class="p">,</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">e</span><span class="p">.</span><span class="nx">preventDefault</span><span class="p">()</span>
<span class="nx">$</span><span class="p">(</span><span class="k">this</span><span class="p">).</span><span class="nx">tab</span><span class="p">(</span><span class="s1">'show'</span><span class="p">)</span>
<span class="p">})</span></code></pre></figure>
<p>You can activate individual tabs in several ways:</p>
<figure class="highlight"><pre><code class="language-js" data-lang="js"><span class="nx">$</span><span class="p">(</span><span class="s1">'#myTab a[href="#profile"]'</span><span class="p">).</span><span class="nx">tab</span><span class="p">(</span><span class="s1">'show'</span><span class="p">)</span> <span class="c1">// Select tab by name</span>
<span class="nx">$</span><span class="p">(</span><span class="s1">'#myTab li:first-child a'</span><span class="p">).</span><span class="nx">tab</span><span class="p">(</span><span class="s1">'show'</span><span class="p">)</span> <span class="c1">// Select first tab</span>
<span class="nx">$</span><span class="p">(</span><span class="s1">'#myTab li:last-child a'</span><span class="p">).</span><span class="nx">tab</span><span class="p">(</span><span class="s1">'show'</span><span class="p">)</span> <span class="c1">// Select last tab</span>
<span class="nx">$</span><span class="p">(</span><span class="s1">'#myTab li:nth-child(3) a'</span><span class="p">).</span><span class="nx">tab</span><span class="p">(</span><span class="s1">'show'</span><span class="p">)</span> <span class="c1">// Select third tab</span></code></pre></figure>
<h3 id="fade-effect">Fade effect</h3>
<p>To make tabs fade in, add <code class="highlighter-rouge">.fade</code> to each <code class="highlighter-rouge">.tab-pane</code>. The first tab pane must also have <code class="highlighter-rouge">.show</code> to make the initial content visible.</p>
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"tab-content"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"tab-pane fade show active"</span> <span class="na">id=</span><span class="s">"home"</span> <span class="na">role=</span><span class="s">"tabpanel"</span> <span class="na">aria-labelledby=</span><span class="s">"home-tab"</span><span class="nt">></span>...<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"tab-pane fade"</span> <span class="na">id=</span><span class="s">"profile"</span> <span class="na">role=</span><span class="s">"tabpanel"</span> <span class="na">aria-labelledby=</span><span class="s">"profile-tab"</span><span class="nt">></span>...<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"tab-pane fade"</span> <span class="na">id=</span><span class="s">"messages"</span> <span class="na">role=</span><span class="s">"tabpanel"</span> <span class="na">aria-labelledby=</span><span class="s">"messages-tab"</span><span class="nt">></span>...<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"tab-pane fade"</span> <span class="na">id=</span><span class="s">"settings"</span> <span class="na">role=</span><span class="s">"tabpanel"</span> <span class="na">aria-labelledby=</span><span class="s">"settings-tab"</span><span class="nt">></span>...<span class="nt"></div></span>
<span class="nt"></div></span></code></pre></figure>
<h3 id="methods">Methods</h3>
<div class="bd-callout bd-callout-danger">
<h4 id="asynchronous-methods-and-transitions">Asynchronous methods and transitions</h4>
<p>All API methods are <strong>asynchronous</strong> and start a <strong>transition</strong>. They return to the caller as soon as the transition is started but <strong>before it ends</strong>. In addition, a method call on a <strong>transitioning component will be ignored</strong>.</p>
<p><a href="/docs/4.2/getting-started/javascript/">See our JavaScript documentation for more information</a>.</p>
</div>
<h4 id="tab">$().tab</h4>
<p>Activates a tab element and content container. Tab should have either a <code class="highlighter-rouge">data-target</code> or an <code class="highlighter-rouge">href</code> targeting a container node in the DOM.</p>
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><ul</span> <span class="na">class=</span><span class="s">"nav nav-tabs"</span> <span class="na">id=</span><span class="s">"myTab"</span> <span class="na">role=</span><span class="s">"tablist"</span><span class="nt">></span>
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"nav-item"</span><span class="nt">></span>
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"nav-link active"</span> <span class="na">id=</span><span class="s">"home-tab"</span> <span class="na">data-toggle=</span><span class="s">"tab"</span> <span class="na">href=</span><span class="s">"#home"</span> <span class="na">role=</span><span class="s">"tab"</span> <span class="na">aria-controls=</span><span class="s">"home"</span> <span class="na">aria-selected=</span><span class="s">"true"</span><span class="nt">></span>Home<span class="nt"></a></span>
<span class="nt"></li></span>
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"nav-item"</span><span class="nt">></span>
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"nav-link"</span> <span class="na">id=</span><span class="s">"profile-tab"</span> <span class="na">data-toggle=</span><span class="s">"tab"</span> <span class="na">href=</span><span class="s">"#profile"</span> <span class="na">role=</span><span class="s">"tab"</span> <span class="na">aria-controls=</span><span class="s">"profile"</span> <span class="na">aria-selected=</span><span class="s">"false"</span><span class="nt">></span>Profile<span class="nt"></a></span>
<span class="nt"></li></span>
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"nav-item"</span><span class="nt">></span>
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"nav-link"</span> <span class="na">id=</span><span class="s">"messages-tab"</span> <span class="na">data-toggle=</span><span class="s">"tab"</span> <span class="na">href=</span><span class="s">"#messages"</span> <span class="na">role=</span><span class="s">"tab"</span> <span class="na">aria-controls=</span><span class="s">"messages"</span> <span class="na">aria-selected=</span><span class="s">"false"</span><span class="nt">></span>Messages<span class="nt"></a></span>
<span class="nt"></li></span>
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"nav-item"</span><span class="nt">></span>
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"nav-link"</span> <span class="na">id=</span><span class="s">"settings-tab"</span> <span class="na">data-toggle=</span><span class="s">"tab"</span> <span class="na">href=</span><span class="s">"#settings"</span> <span class="na">role=</span><span class="s">"tab"</span> <span class="na">aria-controls=</span><span class="s">"settings"</span> <span class="na">aria-selected=</span><span class="s">"false"</span><span class="nt">></span>Settings<span class="nt"></a></span>
<span class="nt"></li></span>
<span class="nt"></ul></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"tab-content"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"tab-pane active"</span> <span class="na">id=</span><span class="s">"home"</span> <span class="na">role=</span><span class="s">"tabpanel"</span> <span class="na">aria-labelledby=</span><span class="s">"home-tab"</span><span class="nt">></span>...<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"tab-pane"</span> <span class="na">id=</span><span class="s">"profile"</span> <span class="na">role=</span><span class="s">"tabpanel"</span> <span class="na">aria-labelledby=</span><span class="s">"profile-tab"</span><span class="nt">></span>...<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"tab-pane"</span> <span class="na">id=</span><span class="s">"messages"</span> <span class="na">role=</span><span class="s">"tabpanel"</span> <span class="na">aria-labelledby=</span><span class="s">"messages-tab"</span><span class="nt">></span>...<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"tab-pane"</span> <span class="na">id=</span><span class="s">"settings"</span> <span class="na">role=</span><span class="s">"tabpanel"</span> <span class="na">aria-labelledby=</span><span class="s">"settings-tab"</span><span class="nt">></span>...<span class="nt"></div></span>
<span class="nt"></div></span>
<span class="nt"><script></span>
<span class="nx">$</span><span class="p">(</span><span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
<span class="nx">$</span><span class="p">(</span><span class="s1">'#myTab li:last-child a'</span><span class="p">).</span><span class="nx">tab</span><span class="p">(</span><span class="s1">'show'</span><span class="p">)</span>
<span class="p">})</span>
<span class="nt"></script></span></code></pre></figure>
<h4 id="tabshow">.tab(‘show’)</h4>
<p>Selects the given tab and shows its associated pane. Any other tab that was previously selected becomes unselected and its associated pane is hidden. <strong>Returns to the caller before the tab pane has actually been shown</strong> (i.e. before the <code class="highlighter-rouge">shown.bs.tab</code> event occurs).</p>
<figure class="highlight"><pre><code class="language-js" data-lang="js"><span class="nx">$</span><span class="p">(</span><span class="s1">'#someTab'</span><span class="p">).</span><span class="nx">tab</span><span class="p">(</span><span class="s1">'show'</span><span class="p">)</span></code></pre></figure>
<h4 id="tabdispose">.tab(‘dispose’)</h4>
<p>Destroys an element’s tab.</p>
<h3 id="events">Events</h3>
<p>When showing a new tab, the events fire in the following order:</p>
<ol>
<li><code class="highlighter-rouge">hide.bs.tab</code> (on the current active tab)</li>
<li><code class="highlighter-rouge">show.bs.tab</code> (on the to-be-shown tab)</li>
<li><code class="highlighter-rouge">hidden.bs.tab</code> (on the previous active tab, the same one as for the <code class="highlighter-rouge">hide.bs.tab</code> event)</li>
<li><code class="highlighter-rouge">shown.bs.tab</code> (on the newly-active just-shown tab, the same one as for the <code class="highlighter-rouge">show.bs.tab</code> event)</li>
</ol>
<p>If no tab was already active, then the <code class="highlighter-rouge">hide.bs.tab</code> and <code class="highlighter-rouge">hidden.bs.tab</code> events will not be fired.</p>
<table class="table table-bordered table-striped">
<thead>
<tr>
<th style="width: 150px;">Event Type</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>show.bs.tab</td>
<td>This event fires on tab show, but before the new tab has been shown. Use <code>event.target</code> and <code>event.relatedTarget</code> to target the active tab and the previous active tab (if available) respectively.</td>
</tr>
<tr>
<td>shown.bs.tab</td>
<td>This event fires on tab show after a tab has been shown. Use <code>event.target</code> and <code>event.relatedTarget</code> to target the active tab and the previous active tab (if available) respectively.</td>
</tr>
<tr>
<td>hide.bs.tab</td>
<td>This event fires when a new tab is to be shown (and thus the previous active tab is to be hidden). Use <code>event.target</code> and <code>event.relatedTarget</code> to target the current active tab and the new soon-to-be-active tab, respectively.</td>
</tr>
<tr>
<td>hidden.bs.tab</td>
<td>This event fires after a new tab is shown (and thus the previous active tab is hidden). Use <code>event.target</code> and <code>event.relatedTarget</code> to target the previous active tab and the new active tab, respectively.</td>
</tr>
</tbody>
</table>
<figure class="highlight"><pre><code class="language-js" data-lang="js"><span class="nx">$</span><span class="p">(</span><span class="s1">'a[data-toggle="tab"]'</span><span class="p">).</span><span class="nx">on</span><span class="p">(</span><span class="s1">'shown.bs.tab'</span><span class="p">,</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">e</span><span class="p">.</span><span class="nx">target</span> <span class="c1">// newly activated tab</span>
<span class="nx">e</span><span class="p">.</span><span class="nx">relatedTarget</span> <span class="c1">// previous active tab</span>
<span class="p">})</span></code></pre></figure>
</main>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="/docs/4.2/assets/js/vendor/jquery-slim.min.js"><\/script>')</script><script src="/docs/4.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-zDnhMsjVZfS3hiP7oCBRmfjkQC4fzxVxFhBx8Hkz2aZX8gEvA/jsP3eXRCvzTofP" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/docs/4.2/assets/js/docs.min.js"></script>
</body>
</html>
|
