- Nav-pills is used for menu purpose in Bootstrap 4 to nav tag-based navigation.
- To Justify Nav-pills with Bootstrap 4 is possible by following approach.
Approach 1:
- To Justify Nav-pills with Bootstrap 3, nav-justify class is available but in Bootstrap 4 nav-fill or nav-justified classes available in default
- Add class nav-fill or nav-justified to nav tag or nav element.
- The difference of nav-fill and nav-justified is class nav-fill gives unequal spatial for Nav Pill item based on its name length. but nav-justified equalize the Nav Pill spatial with one another.
Example 1: Below example illustrate how to Justify Nav-pills with Bootstrap 4 using class nav-fill or nav-justified.
HTML
<!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>
|
Output:
- To Justify Nav-pills with Bootstrap 4 using flex that is if the nav is made with flex box.
- Add class flex-column and flex-sm-row to nav tag or nav element.
- This flex is somehow similar to nav-fill for its unequal spatial of Nav Pills.
Example 2: Below example illustrate how to Justify Nav-pills with Bootstrap 4 using flex.
HTML
<!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>Using Flex -Unequal spatial of Nav Pills</p>
<br>
<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="#">
Longer nav 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>
</center>
</div>
<script>
$(document).ready(function () {
$('nav a').click(function () {
$('nav a').removeClass("active");
$(this).addClass("active");
});
});
</script>
</body>
</html>
|
Output: