How to create Responsive Bottom Navigation Bar using Bootstrap ?

A navigation bar is used in every website to make it more user-friendly so that the navigation through the website becomes easy and the user can directly search for the topic of their interest.
The word “Navigation” means the science of moving from one place to another. In this article, we create a navigation bar on the bottom of the web page. The navigation at the bottom of the web page or website which can be either fixed or moving and can be adjusted in all types of screen sizes. This article deals with the process of creating a “Responsive Bottom Navigation” in Bootstrap.

Example 1: In this code, we create a navigation menu and fix it at the bottom of the page. It is one of the easiest ways to have bottom navigation. The class “fixed-bottom” sticks the navbar to the page bottom.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <title>
        Responsive Bottom navigation
    </title>
  
    <link rel="stylesheet" 
          href=
          integrity=
"sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" 
          crossorigin="anonymous">
  
            integrity=
"sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
            crossorigin="anonymous">
  </script>
    
    <script src=
            integrity=
"sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" 
            crossorigin="anonymous">
  </script>
    
    <script src=
            integrity=
"sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" 
            crossorigin="anonymous">
  </script>
  
    <meta charset="utf-8">
  
    <meta name="viewport" 
          content="width=device-width, initial-scale=1, shrink-to-fit=no">
  
    <style>
        .navbar {
            width: 100%;
            background-color: rgb(80, 220, 100);
        }
          
        ul {
            font-size: 20px;
        }
          
        body {
            text-align: center;
            padding-top: 200px;
        }
          
        h1 {
            color: green;
        }
    </style>
</head>
  
<body>
    <h1>GeeksforGeeks</h1>
  
    <h3>A responsive bottom navigation<h3>
  
    <nav class="navbar fixed-bottom navbar-expand-lg navbar-light">
        <a class="navbar-brand" href="#">GeeksforGeeks</a>
        <button class="navbar-toggler"
                type="button"
                data-toggle="collapse"
                data-target="#navbarSupportedContent"
                aria-controls="navbarSupportedContent"
                aria-expanded="false"
                aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
  
        <div class="collapse navbar-collapse"
                    id="navbarSupportedContent">
            <ul class="navbar-nav mr-auto">
                <li class="nav-item active">
                    <a class="nav-link" href="#">
                        Home 
                        <span class="sr-only">
                            (current)
                        </span>
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">
                        Link
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">
                        About
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">
                        Contact
                    </a>
                </li>
            </ul>
        </div>
  
        <div>
            <form class="form-inline my-2 my-lg-0">
                <input class="form-control mr-sm-2"
                        type="search" placeholder="Search"
                        aria-label="Search">
                <button class="btn btn-outline-success my-2 my-sm-0"
                            type="submit">
                    Search
                </button>
            </form>
        </div>
    </nav
</body>
  
</html>

chevron_right


Output:



  • Navbar on small screens:
  • Navbar in large screen:

Example 2: In the above code, we saw how we fixed a simple navigation menu at the bottom of the page. In this example we place a vertical pill having a menu at the bottom of the page that can be navigated.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <title>Responsive Navigation</title>
  
    <link rel="stylesheet"
          href=
          integrity=
"sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" 
          crossorigin="anonymous">
  
            integrity=
"sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
            crossorigin="anonymous">
  </script>
    
    <script src=
            integrity=
"sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" 
            crossorigin="anonymous">
  </script>
    
    <script src=
            integrity=
"sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
            crossorigin="anonymous">
  </script>
  
    <meta charset="utf-8">
  
    <meta name="viewport" 
          content="width=device-width, initial-scale=1, shrink-to-fit=no">
  
    <style>
        h1 {
            text-align: center;
            font-size: 50px;
            padding-top: 200px;
            margin-bottom: 300px;
        }
          
        body {
            background-color: rgb(11, 102, 35);
        }
    </style>
</head>
  
<body>
    <h1>
        GeeksForGeeks: A computer
        science portal for the geeks
    </h1>
  
    <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">
                    <h6>
                        <font color="black">Home</font>
                    </h6>
                </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">
                    <h6>
                        <font color="black">Policies</font>
                    </h6>
                </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">
                    <h6>
                        <font color="black">Vacancies</font>
                    </h6>
                </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">
                    <h6>
                        <font color="black">Contact</font>
                    </h6>
                </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">
                    <h4>
                        Welcome to the world of geeks. 
                        This portal has been created to 
                        provide well written, well thought
                        and well-explained solutions for 
                        selected questions. It is the best 
                        place to learn exciting things about
                        the world of programming. We've got 
                        exciting problems for interviews, 
                        placements and much more.                                 
                    </h4>
                </div>
                <div class="tab-pane fade" 
                     id="v-pills-profile" 
                     role="tabpanel" 
                     aria-labelledby="v-pills-profile-tab">
                    <h4>
                        Application Privacy Statement
                        We Sanchhaya Education Pvt. Ltd.,
                        are registered and headquartered at
                        BC 227, 2nd Floor, Matrix Business
                        Tower, B4, Sector 132, Noida, UP-201301,
                        hereinafter referred to as GeeksforGeeks.
                        We also offer paid Courses managed by
                        Sanchhaya Classes Pvt. Ltd. with registered 
                        office address B-142, Vishwas Park, Uttam Nagar,
                        New Delhi, North Delhi, Delhi, India, 110059. 
                        At GeeksforGeeks, we value your trust & respect
                        your privacy. This privacy statement
                        (“Privacy Statement”) applies to the 
                        treatment of personally identifiable information
                        submitted by, or otherwise obtained from, you in
                        connection with the associated application 
                        (“Application”). The Application is provided by 
                        GeeksforGeeks (and may be provided by Geeksforgeeks
                        on behalf of a GeeksforGeeks licensor or partner 
                        (“Application Partner”). By using or otherwise 
                        accessing the Application, you acknowledge that
                        you accept the practices and policies outlined in
                        this Privacy Statement.
                    </h4>
                </div>
                <div class="tab-pane fade" 
                     id="v-pills-messages" 
                     role="tabpanel" 
                     aria-labelledby="v-pills-messages-tab">
                    <h4>
                        What impact will you make?
                        Are you ready to apply your knowledge and background
                        to exciting new challenges? From learning to leadership,
                        this is your chance to take your career to the next level.
                        Apply for below-listed vacancies and our team will
                        get in touch with you.
                    </h4>
                </div>
                <div class="tab-pane fade" 
                     id="v-pills-settings" 
                     role="tabpanel" 
                     aria-labelledby="v-pills-settings-tab">
                    <h4>
                        Address: GeeksforGeeks 4th,5th & 6th Floor, 
                        Royal Kapsons, A- 118, Sector- 136, Noida,
                        Uttar Pradesh (201305) For feedback and queries: 
                        feedback@geeksforgeeks.org For course related queries:
                        geeks.classes@geeksforgeeks.org For payment related issues:
                        geeks.classes@geeksforgeeks.org For any issue in a purchased
                        course : complaints@geeksforgeeks.org
                    </h4>
                </div>
            </div>
        </div>
    </div>
</body>
  
</html>

chevron_right


Output:



My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.