<!DOCTYPE html>
<
html
lang
=
"en"
>
<
head
>
<
meta
charset
=
"utf-8"
>
<
meta
name
=
"viewport"
content
=
"width=device-width, initial-scale=1"
>
<
link
rel
=
"stylesheet"
href
=
<
script
src
=
</
script
>
<
script
src
=
</
script
>
<
script
src
=
</
script
>
</
head
>
<
body
>
<
div
class
=
"container"
>
<
center
>
<
h1
style
=
"color:green;padding:13px;"
>
GeeksforGeeeks</
h1
>
<
br
>
<
br
>
<
p
>Nav Fill Unequal spatial of Nav Pills</
p
>
<
br
>
<
nav
class
=
"nav nav-pills nav-fill"
>
<
a
class
=
"nav-item nav-link active"
href
=
"#"
>Active</
a
>
<
a
class
=
"nav-item nav-link"
href
=
"#"
>Much longer nav 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
>
<
br
>
<
p
>Nav Justified -Equal spatial of Nav Pills</
p
>
<
br
>
<
nav
class
=
"nav nav-pills nav-justified"
>
<
a
class
=
"nav-item nav-link active"
href
=
"#"
>
Active
</
a
>
<
a
class
=
"nav-item nav-link"
href
=
"#"
>
Much longer nav 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
>
</
center
>
</
div
>
<
script
>
$(document).ready(function () {
$('nav a').click(function () {
$('nav a').removeClass("active");
$(this).addClass("active");
});
});
</
script
>
</
body
>
</
html
>