Split Button Dropdowns with Bootstrap

BootstrapHTMLjQueryJavascript

Split button dropdowns use the same general style as the dropdown button but add a primary action along with the dropdown. Split buttons have the primary action on the left and a toggle on the right that displays the dropdown.

Example

You can try to run the following code to split button dropdowns −

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 = "btn-group">
         <button type = "button" class = "btn btn-default">Admissions</button>
         <button type = "button" class = "btn btn-default dropdown-toggle" data-toggle = "dropdown">
            <span class = "caret"></span>
            <span class = "sr-only">Toggle Dropdown</span>
         </button>
         <ul class = "dropdown-menu" role = "menu">
            <li><a href = "#">Masters</a></li>
            <li><a href = "#">Bachelors</a></li>
         </ul>
      </div>
      <div class = "btn-group">
         <button type = "button" class = "btn btn-primary">Faculty</button>
         <button type = "button" class = "btn btn-primary dropdown-toggle" data-toggle = "dropdown">
            <span class = "caret"></span>
            <span class = "sr-only">Toggle Dropdown</span>
         </button>
         <ul class = "dropdown-menu" role = "menu">
            <li><a href = "#">Management</a></li>
            <li><a href = "#">Technical</a></li>
            <li><a href = "#">Staff</a></li>
         </ul>
      </div>
   </body>
</html>
raja
Published on 20-Jun-2018 07:30:23
Advertisements