Bootstrap 4 | Nav-pills - GeeksforGeeks

24 Dec, 2019
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 defaultAdd 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.<!DOCTYPE html><html lang="en">  <head>    <meta charset="utf-8">    <meta name="viewport"           content="width=device-width,                    initial-scale=1">    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">  </script>    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">  </script>    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">  </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:Approach 2: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.<!DOCTYPE html><html lang="en">  <head>    <meta charset="utf-8">    <meta name="viewport"           content="width=device-width,                   initial-scale=1">    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">  </script>    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">  </script>    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></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:Reference: https://getbootstrap.com/docs/4.0/components/navs/My Personal Notes
arrow_drop_upSave
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.
<!DOCTYPE html><html lang="en">  <head>    <meta charset="utf-8">    <meta name="viewport"           content="width=device-width,                    initial-scale=1">    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">  </script>    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">  </script>    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">  </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:
Approach 2:
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.
<!DOCTYPE html><html lang="en">  <head>    <meta charset="utf-8">    <meta name="viewport"           content="width=device-width,                   initial-scale=1">    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">  </script>    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">  </script>    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></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:
Reference: https://getbootstrap.com/docs/4.0/components/navs/
Bootstrap-4
Bootstrap-Misc
Picked
Bootstrap
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to change navigation bar color in Bootstrap ?
Form validation using jQuery
How to pass data into a bootstrap modal?
How to align navbar items to the right in Bootstrap 4 ?
How to Show Images on Click using HTML ?
Roadmap to Become a Web Developer in 2022
Installation of Node.js on Linux
How to fetch data from an API in ReactJS ?
How to insert spaces/tabs in text using HTML/CSS?
Top 10 Projects For Beginners To Practice HTML and CSS Skills