Bootstrap:-Component “Navigation bar”

The navbar is one of the prominent features of Bootstrap sites. A navigation bar is a navigation header that is placed at the top of the page. the navigation bar can extend or collapse, depending on the screen size. A standard navigation bar is created with the .navbar class.

Format of nav bar:-

  • Vertical Navbar by using class=”navbar-nav”.
  • Centered Navbar by using .justify-content-center class to center the navigation bar.
  • Colored Navbar by using any of the .bg-color classes to change the background color of navbar.
  • Brand/Logo by using .navbar-brand class is used to highlight the brand/logo/project name of your page.
  • Collapsing The navbar  To create a collapsible navigation bar, use a button with class=”navbar-toggler”, data-toggle=”collapse” and data-target=”#thetarget”.
  • Navbar With Dropdown.
  • Navbar Froms and Buttons Add a <form> element with class=”form-inline” to group inputs and buttons side-by-side.
  • Nevbar Text use .navbar-text class to vertically align any elements inside the navbar that are not links.
  • Fixed Navbar by using .fixed-top or .fixed-bottom class to make the navbar fixed.
  • Sticky navbar use the .sticky-top class to make the navbar fixed/stay at the thop of the page.
Tagged : / / / / / / / / / / / / /