Set Menus to drop up with Bootstrap

BootstrapWeb DevelopmentCSS Framework

Menus can also be built to drop up rather than down. To achieve this, simply add .dropup to the parent .btn-group container.

 You can try to run the following code set menus to drop up −

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>
      <p>Dropdown</p>
      <div class = "btn-group" style = "margin-left:50px; margin-top:10px">
         <button type = "button" class = "btn btn-default dropdown-toggle btn-xs" data-toggle = "dropdown">
            Subject
               <span class = "caret"></span>
         </button>
         <ul class = "dropdown-menu" role = "menu">
            <li><a href = "#">Programming</a></li>
            <li><a href = "#">Web Dev</a></li>
            <li><a href = "#">Database</a></li>
            <li><a href = "#">Networking</a></li>
         </ul>
      </div>
      <p>Dropup</p>
      <div class = "row" style = "margin-left:50px; margin-top:120px">
         <div class = "btn-group dropup">
            <button type = "button" class = "btn btn-primary dropdown-toggle" data-toggle = "dropdown">
               Subject
                  <span class = "caret"></span>
            </button>
            <ul class = "dropdown-menu" role = "menu">
               <li><a href = "#">Programming</a></li>
               <li><a href = "#">Web Dev</a></li>
               <li><a href = "#">Database</a></li>
               <li><a href = "#">Networking</a></li>
            </ul>
         </div>
      </div>
   </body>
</html>
raja
Updated on 12-Jun-2020 15:48:42

Advertisements