How to align two navbars in bootstrap ?
Navbar is a section of a web application that allows users to navigate to different sections of the website. As the name suggests, a navbar is basically a navigation bar. Bootstrap 4 comes up with an inbuilt navbar class that allows us to create navbars. Also, we can create custom navbars by defining the various CSS styles as per our requirements. In this article, we will demonstrate both the methods of aligning two navbars using CSS inbuilt classes as well as custom CSS styles.
Example 1: In the first approach, we have made use of the inbuilt navbar class of Bootstrap 4. Two navbars are placed one after the other. The first navbar has a dark background and the navigation links are left-aligned whereas the “Register” and “Logout” buttons are right-aligned. The first navbar also consists of a dropdown menu that has links to several sections of the website. The second navbar has the navigation links aligned to the right and plaintext with a hyperlink aligned to the left. Both the navbars are responsive to the screen size. The navbar toggle button appears when the screen size reduces and disappears when the screen size increases. The toggle button when clicked displays the navbar.
Example 2: In this approach, navbars are created using custom CSS styles. The topnav class division represents the first navbar and the bottomnav class division represents the second navbar. The first navbar has the navigation links aligned to the left and the login link to the right. The second navbar has the navigation links to the left and the “register” and “logout” buttons to the right. Unlike the previous example, the navbars in this example are not responsive. The navbars do not adapt to the screen size.
- Google Chrome
- Internet Explorer