How to use Top Navigation with Left Navigation Bar using Bootstrap ? - GeeksforGeeks

14 Oct, 2020
Bootstrap is an open-source CSS framework used by frontend developers for making interactive web designs. The most recent version of Bootstrap is Bootstrap 5 alpha which has numerous added features. However, Bootstrap 5 is still under constant development phase and hence most of the web developers are still using Bootstrap 4. Bootstrap 4 also offers a wide range of components, utilities, and layouts. Navbars and sidebars are among the other components. While Bootstrap 4 has predefined navbar classes with a vast range of features, there is no dedicated predefined class for a sidebar. Hence sidebars are mainly customized division. There can be different layouts while using the top navbar with a left navigation bar. Both the layout is demonstrated in this article.
First Approach: The first approach deals with the layout having the sidebar right below the top navbar. The entire body is divided into two parts: the top navbar and the container below it. The container below the top navbar contains the sidebar division along with the division for the main content of the webpage. This container contains a row which in turn comprises two columns. The first column accommodates the sidebar and the second column holds the main content.
<!DOCTYPE html><html>  <head>    <!-- import bootstrap cdn-->    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"        integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z"        crossorigin="anonymous" />      <!-- import jquery cdn -->    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"        integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"        crossorigin="anonymous">    </script>          <!-- import popper.js cdn -->    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"        integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN"        crossorigin="anonymous">    </script>          <!-- import javascript cdn -->    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"        integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV"        crossorigin="anonymous">    </script>          <!-- CSS stylesheet -->    <style type="text/css">        html,        body {            height: 100%;        }          #green {            height: 100%;            background: green;            text-align: center;            color: black;        }    </style></head>  <body>    <!-- top navbar -->    <nav class="navbar navbar-expand-lg             navbar-light bg-primary">        <a class="navbar-brand" href="#">Navbar</a>        <!-- hamburger button that toggles the navbar-->        <button class="navbar-toggler" type="button"             data-toggle="collapse"             data-target="#navbarNavAltMarkup"            aria-controls="navbarNavAltMarkup"             aria-expanded="false"             aria-label="Toggle navigation">            <span class="navbar-toggler-icon">            </span>        </button>        <!-- navbar links -->        <div class="collapse navbar-collapse"                 id="navbarNavAltMarkup">            <div class="navbar-nav">                <a class="nav-item nav-link                     active" href="#">Home</a>                <a class="nav-item nav-link"                     href="#">Features</a>                <a class="nav-item nav-link"                     href="#">Price</a>                <a class="nav-item nav-link"                     href="#">About</a>            </div>        </div>    </nav>      <!-- This container contains the sidebar             and main content of the page -->    <!-- h-100 takes the full height of the body-->    <div class="container-fluid h-100">        <div class="row h-100">            <div class="col-2" id="green">                <h4>Sidebar</h4>                  <!-- Navigation links in sidebar-->                <a href="#">Link 1</a><br />                <br />                <a href="#">Link 2</a><br />                <br />                <a href="#">Link 3</a><br />                <br />                <a href="#">Link 4</a><br />                <br />            </div>            <!--Contains the main content                    of the webpage-->            <div class="col-10" style="text-align: justify;">                Bootstrap is a free and open-source                tool collection for creating responsive                websites and web applications. It                is the most popular HTML, CSS, and                JavaScript framework for developing                responsive, mobile-first web sites.            </div>        </div>    </div></body>  </html>
Output:
Second Approach: The second approach demonstrates a layout where the navbar occupies only the leftover width of the body after the sidebar has occupied its required space. The body of the HTML page comprises a row that comprises of two columns. The first column col-2 is used to display the sidebar. The second column col-10 is used to display the navbar. The second column also consists of the main content of the web page right below the navbar. The navbar is collapsible ie. when the screen width reduces it collapses and can be viewed using the hamburger icon.
<!DOCTYPE html><html>  <head>    <title>Topnav with sidebar</title>      <!-- Import bootstrap cdn -->    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"        integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z"        crossorigin="anonymous" />      <!-- Import jquery cdn -->    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"        integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"        crossorigin="anonymous">    </script>          <!-- Import popper.js cdn -->    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"        integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN"        crossorigin="anonymous">    </script>          <!-- Import javascript cdn -->    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"        integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV"        crossorigin="anonymous">    </script>          <!-- CSS stylesheet -->    <style type="text/css">        html,        body {            height: 100%;        }          #green {            height: 100%;            background: green;            text-align: center;            color: black;            padding: 15px;        }    </style></head>  <body>    <!-- h-100 takes the full height of the body-->    <div class="container-fluid h-100">          <!-- h-100 takes the full height                  of the container-->        <div class="row h-100">            <div class="col-2" id="green">                <h4>Sidebar</h4>                  <!-- Navigation links in sidebar-->                <a href="#">Link 1</a><br />                <br />                <a href="#">Link 2</a><br />                <br />                <a href="#">Link 3</a><br />                <br />                <a href="#">Link 4</a><br />                <br />            </div>            <div class="col-10" style="padding: 0;">                  <!-- Top navbar -->                <nav class="navbar navbar-expand-lg                                 navbar-light bg-primary">                    <a class="navbar-brand" href="#">Navbar</a>                    <!-- Hamburger button that toggles the navbar-->                    <button class="navbar-toggler"                         type="button" data-toggle="collapse"                        data-target="#navbarNavAltMarkup"                         aria-controls="navbarNavAltMarkup"                         aria-expanded="false"                        aria-label="Toggle navigation">                        <span class="navbar-toggler-icon"></span>                    </button>                    <!-- navbar links -->                    <div class="collapse navbar-collapse"                         id="navbarNavAltMarkup">                        <div class="navbar-nav">                            <a class="nav-item nav-link                                 active" href="#">Home</a>                            <a class="nav-item nav-link"                                 href="#">Features</a>                            <a class="nav-item nav-link"                                 href="#">Price</a>                            <a class="nav-item nav-link"                                 href="#">About</a>                        </div>                    </div>                </nav>                  <!-- Contains the main content of the webpage-->                <p style="padding: 15px; text-align: justify;">                    Bootstrap is a free and open-source                    tool collection for creating responsive                    websites and web applications.                    It is the most popular HTML, CSS, and                    JavaScript framework for developing                    responsive, mobile-first web sites.                </p>            </div>        </div>    </div></body>  </html>
Output:
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.
Bootstrap-Misc
HTML-Misc
Picked
Bootstrap
HTML
Web Technologies
Web technologies Questions
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
How to change navigation bar color in Bootstrap ?
Form validation using jQuery
How to align navbar items to the right in Bootstrap 4 ?
How to pass data into a bootstrap modal?
How to Show Images on Click using HTML ?
How to set input type date in dd-mm-yyyy format using HTML ?
Types of CSS (Cascading Style Sheet)
How to set the default value for an HTML <select> element ?
How to insert spaces/tabs in text using HTML/CSS?
Hide or show elements in HTML using display property