How to create Responsive Bottom Navigation Bar using Bootstrap ?

Last Updated : 20 Aug, 2019

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.

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
        Responsive Bottom navigation 
    </title> 
  
    <link rel="stylesheet" 
          href= 
"https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" 
          integrity= 
"sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" 
          crossorigin="anonymous"> 
  
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" 
            integrity= 
"sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
            crossorigin="anonymous"> 
  </script> 
    
    <script src= 
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" 
            integrity= 
"sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" 
            crossorigin="anonymous"> 
  </script> 
    
    <script src= 
"https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" 
            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> 

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.

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>Responsive Navigation</title> 
  
    <link rel="stylesheet"
          href= 
"https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" 
          integrity= 
"sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" 
          crossorigin="anonymous"> 
  
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" 
            integrity= 
"sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
            crossorigin="anonymous"> 
  </script> 
    
    <script src= 
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" 
            integrity= 
"sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" 
            crossorigin="anonymous"> 
  </script> 
    
    <script src= 
"https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" 
            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> 

Output:

Suggest improvement

How to place SVG icons on a round circle side by side to another div using Bootstrap?

D3.js | d3.scan() function

Share your thoughts in the comments

How to create Responsive Bottom Navigation Bar using Bootstrap ?

Please Login to comment...

Similar Reads

What kind of Experience do you want to share?