Home Whiteboard Graphing Calculator Online Compilers Articles Tools
Tutorials Courses Jobs

Align Dropdown to the right with Bootstrap

Bootstrap Web Development CSS Framework

To align dropdown to the right, add the class .pull-right to .dropdown-menu. You can try to run the following code to align dropdown to the right

Example

Live Demo

<!DOCTYPE html>
<html>
   <head>
      <title>Bootstrap Example</title>
      <link href = "/bootstrap/css/bootstrap.min.css" rel = "stylesheet">
      <script src = "/scripts/jquery.min.js"></script>
      <script src = "/bootstrap/js/bootstrap.min.js"></script>
   </head>
   <body>
      <div class = "dropdown">
         <button type = "button" class = "btn dropdown-toggle" id = "dropdownMenu1" data-toggle = "dropdown">
            Cars
            <span class = "caret"></span>
         </button>
         <ul class = "dropdown-menu pull-right" role = "menu" aria-labelledby = "dropdownMenu1">
            <li role = "presentation">
               <a role = "menuitem" tabindex = "-1" href = "#">BMW</a>
            </li>
            <li role = "presentation">
               <a role = "menuitem" tabindex = "-1" href = "#">Audi</a>
            </li>
            <li role = "presentation">
               <a role = "menuitem" tabindex = "-1" href = "#">
                  Hyundai
               </a>
            </li>
            <li role = "presentation">
               <a role = "menuitem" tabindex = "-1" href = "#">
                  Mitsubishi
               </a>
            </li>
            <li role = "presentation">
               <a role = "menuitem" tabindex = "-1" href = "#">
                  Nissan
               </a>
            </li>
         </ul>
      </div>
   </body>
</html>
Updated on: 2020-06-12T15:15:11+05:30

743 Views

Learn More in Our Tutorials

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements