Article Categories

Selected Reading

Split Button Dropdowns with Bootstrap

Bootstrap HTML jQuery Javascript

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.

Basic Structure

A split button dropdown consists of two buttons wrapped in a btn-group container:

Primary button: Performs the main action when clicked
Dropdown toggle: Shows/hides the dropdown menu with additional options

Example

You can try to run the following code to create split button dropdowns:

<!DOCTYPE html>
<html>
   <head>
      <title>Bootstrap Split Button Dropdowns</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="container" style="margin-top: 20px;">
         <h3>Split Button Dropdowns</h3>
         
         <!-- Default Split Button -->
         <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>
               <li class="divider"></li>
               <li><a href="#">Diploma</a></li>
            </ul>
         </div>
         
         <!-- Primary Split Button -->
         <div class="btn-group" style="margin-left: 10px;">
            <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>
         
         <!-- Success Split Button -->
         <div class="btn-group" style="margin-left: 10px;">
            <button type="button" class="btn btn-success">Actions</button>
            <button type="button" class="btn btn-success 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="#">Edit</a></li>
               <li><a href="#">Delete</a></li>
               <li><a href="#">Archive</a></li>
            </ul>
         </div>
      </div>
   </body>
</html>

Key Components

Class	Purpose
`btn-group`	Container that groups the two buttons together
`dropdown-toggle`	Applied to the second button to enable dropdown functionality
`caret`	Creates the small arrow indicating dropdown availability
`dropdown-menu`	Container for the dropdown options

Button Variations

Split button dropdowns support all Bootstrap button styles:

btn-default - Standard gray button
btn-primary - Blue primary action button
btn-success - Green success button
btn-info - Light blue info button
btn-warning - Orange warning button
btn-danger - Red danger button

Conclusion

Split button dropdowns provide an elegant way to combine a primary action with secondary options. They maintain visual consistency while offering users both immediate action and additional choices in a compact interface.

Daniol Thomas

Updated on: 2026-03-15T23:18:59+05:30

628 Views

Kickstart Your Career

Get certified by completing the course

Get Started

Previous Next