Bootstrap Nested button groups

Create Nested button groups

Place a .btn-group within another .btn-group when you want dropdown menus mixed with a series of buttons.


<!DOCTYPE HTML>
<html> 
<head> 
<link href="http://java2s.com/style/bootstrap.min.css" rel="stylesheet">
<!--  w w w  .j av a  2s. co  m-->
<script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
<script src="http://java2s.com/style/bootstrap.min.js"></script>

</head>
<body style='margin:20px;'>

<div class="btn-group">
  <button type="button" class="btn btn-default">1</button>
  <button type="button" class="btn btn-default">2</button>

  <div class="btn-group">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
      Dropdown
      <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
      <li><a href="#">Dropdown link</a></li>
      <li><a href="#">Dropdown link</a></li>
    </ul>
  </div>
</div>
    
</body> 
</html>

Bootstrap Nested button groups

Create Nested button groups

Introduction

Basic HTML Style

List

Table

Form

Layout

Navigation Bar

Button

Control