InterviewSolution
Saved Bookmarks
InterviewSolution
| 1. |
Nest button groups within another button group in Bootstrap |
|
Answer» To nest button groups within another button group, you need to include one button group into another. The following is an example that displays nested Button Groups. Here, we have three buttons in a Button group. The second button has a nested Button Groups that displays the YEAR in which India won WORLD Cup. The example: <!DOCTYPE html> <html lang="en"> <head> <title>Nest Bootstrap Button Groups</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>WorldCup</h2> <p>The following is the information about the ODI World Cup winning teams:</p> <div class="btn-group"> <button TYPE="button" class="btn btn-primary">West INDIES</button> <div class = "btn-group"> <button type = "button" class = "btn btn-primary dropdown-toggle" data-toggle = "dropdown"> India <span class = "CARET"></span> </button> <ul class = "dropdown-menu"> <li><a href = "#">1983</a></li> <li><a href = "#">2011</a></li> </ul> </div> <button type="button" class="btn btn-primary">New Zealand</button> </div> </div> </body> </html>Here is the output that displays nested Button Groups. The second button in the button group is nested as shown below: |
|