The Demo
The Code
Output
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h3>Various Styles of split buttons</h3> <div class="btn-group"> <button type="button" class="btn btn-outline-danger" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">All Tutorials</button> <button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <span class="sr-only">Toggle</span> </button> <div class="dropdown-menu" aria-labelledby="btnDropdownDemo"> <a class="dropdown-item" href="https://www.jquery-az.com/bootstrap-4/">Bootstrap 4</a> <a class="dropdown-item" href="https://www.jquery-az.com/jquery-tips/">jQuery</a> <a class="dropdown-item" href="https://www.jquery-az.com/html-tutorials/">HTML</a> <a class="dropdown-item" href="https://www.jquery-az.com/css-tutorials/">CSS</a> </div> </div> <div class="btn-group"> <button type="button" class="btn btn-danger">All Tutorials</button> <button type="button" class="btn btn-outline-danger dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <span class="sr-only">Toggle</span> </button> </div> <div class="btn-group"> <button type="button" class="btn btn-success">All Tutorials</button> <button type="button" class="btn btn-outline-warning dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <span class="sr-only">Toggle</span> </button> </div> <br /><br /> <div class="btn-group"> <button type="button" class="btn btn-dark">All Tutorials</button> <button type="button" class="btn btn-outline-primary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <span class="sr-only">Toggle</span> </button> </div> <div class="btn-group"> <button type="button" class="btn btn-outline-warning">All Tutorials</button> <button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <span class="sr-only">Toggle</span> </button> </div> <div class="btn-group"> <button type="button" class="btn btn-outline-secondary">All Tutorials</button> <button type="button" class="btn btn-outline-danger dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <span class="sr-only">Toggle</span> </button> </div> <br /><br /> <div class="btn-group"> <button type="button" class="btn btn-primary">All Tutorials</button> <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <span class="sr-only">Toggle</span> </button> </div> <div class="btn-group"> <button type="button" class="btn btn-success">All Tutorials</button> <button type="button" class="btn btn-outline-danger dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <span class="sr-only">Toggle</span> </button> </div> <div class="btn-group"> <button type="button" class="btn btn-info">All Tutorials</button> <button type="button" class="btn btn-outline-warning dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <span class="sr-only">Toggle</span> </button> </div> <br /><br /> <div class="btn-group"> <button type="button" class="btn btn-warning">All Tutorials</button> <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <span class="sr-only">Toggle</span> </button> </div> <div class="btn-group"> <button type="button" class="btn btn-outline-danger">All Tutorials</button> <button type="button" class="btn btn-warning dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <span class="sr-only">Toggle</span> </button> </div> <div class="btn-group"> <button type="button" class="btn btn-light">All Tutorials</button> <button type="button" class="btn btn-outline-danger dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <span class="sr-only">Toggle</span> </button> </div> </div> </body> </html>
Various Styles of split buttons
All Tutorials
Toggle
Bootstrap 4
jQuery
HTML
CSS
All Tutorials
Toggle
All Tutorials
Toggle
All Tutorials
Toggle
All Tutorials
Toggle
All Tutorials
Toggle
All Tutorials
Toggle
All Tutorials
Toggle
All Tutorials
Toggle
All Tutorials
Toggle
All Tutorials
Toggle
All Tutorials
Toggle