Bootstrap navbar align right ?

navbar right align bootstrap

This is very important topic how to align navbar right side in bootstrap, How to create a navigation bar with left-aligned and right-aligned . in this article we will learn how to align navbar right side.

Just use class .ml-auto to align navbar right.

<ul class="navbar-nav ml-auto">
    
</ul>

<div class="header">
         <nav id="navbar" class="navbar navbar-expand-lg myheader" >
           <div class="container">
              <a class="navbar-brand" href="#"><img src="logo.png" /></a>
              <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
              <span class="navbar-toggler-icon">
                <i class="fa fa-navicon"></i>
              </span>
              </button>
              <div class="collapse navbar-collapse" id="navbarNavDropdown" >
                 <ul class="navbar-nav ml-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="#">About Us</a></li>
                  
                 <li class="nav-item dropdown">
                  <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    Domestic Packages
                  </a>
                  <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                    <a class="dropdown-item" href="#">Kerala</a>
                    <a class="dropdown-item" href="#">Rajasthan</a>
                    <a class="dropdown-item" href="#">Jaipur</a>
                    <a class="dropdown-item" href="#">Nainital</a>
                    <a class="dropdown-item" href="#">Laddhak</a>
                    <a class="dropdown-item" href="#">Kashmir</a>
                    <a class="dropdown-item" href="#">South India</a>
                    <a class="dropdown-item" href="#">North India</a>
                 </div>
               </li>

               <li class="nav-item dropdown">
                  <a class="nav-link dropdown-toggle" href="#" id="A1" role="button" data-toggle="dropdown" data-hover="dropdown" aria-haspopup="true" aria-expanded="false">
                    International Package
                  </a>
                  <ul class="dropdown-menu">
                    <a class="dropdown-item" href="#">Action</a>
                    <a class="dropdown-item" href="#">Another action</a>
                    <a class="dropdown-item" href="#">Something else here</a>
                 </ul>
               </li>

               <li class="nav-item"><a class="nav-link" href="#">Group Tour</a></li>
               <li class="nav-item"><a class="nav-link" href="#">Contact Us</a></li>

               </ul>
               </div>
            </div>
        </nav>
        </div>

Leave a Reply

avatar
  Subscribe  
Notify of