How do i group multiple buttons in to group and create nested Button groups
Published September 27, 2021In the previous example we covered create button in bootstrap, we don't know how to group the multiple buttons into group. In this example we will create grouped button using btn-group class
Let's create simple example to group the buttons
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <html lang = "en"> <head> <!-- Meta tags --> <meta charset = "utf-8"> <meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no"> <!-- Bootstrap CSS --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> <title>Bootstrap 5 Group Buttons Example</title> </head> <body style="padding:20px;"> <h2>Grouped Buttons</h2> <div class="btn-group" role="group" aria-label="Basic example"> <button type="button" class="btn btn-success">HTML</button> <button type="button" class="btn btn-warning">CSS</button> <button type="button" class="btn btn-danger">Bootstrap</button> </div> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script> </div></div> </body> </html> </body> </html> |
Make Links as Group
<h2>Grouped Liks Buttons</h2> <div class="btn-group"> <a href="#" class="btn btn-primary " >HTML</a> <a href="#" class="btn btn-primary active" aria-current="page">CSS</a> <a href="#" class="btn btn-primary">Bootstrap</a> </div> |
How do i create Checkbox grouped buttons
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <html lang = "en"> <head> <!-- Meta tags --> <meta charset = "utf-8"> <meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no"> <!-- Bootstrap CSS --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> <title>Bootstrap 5 Group Buttons Example</title> </head> <body style="padding:20px;"> <h2>Check Box Buttons</h2> <div class="btn-group" role="group" aria-label="Basic checkbox toggle button group"> <input type="checkbox" class="btn-check" id="btncheck1" autocomplete="off"> <label class="btn btn-outline-primary" for="btncheck1">HTML</label> <input type="checkbox" class="btn-check" id="btncheck2" autocomplete="off"> <label class="btn btn-outline-primary" for="btncheck2">CSS</label> <input type="checkbox" class="btn-check" id="btncheck3" autocomplete="off"> <label class="btn btn-outline-primary" for="btncheck3">Bootstrap</label> </div> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script> </div></div> </body> </html> </body> </html> |
Output
Align Buttons as vertical
using the btn-group-vertical class we can arrange the button groups in vertical direction
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <html lang = "en"> <head> <!-- Meta tags --> <meta charset = "utf-8"> <meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no"> <!-- Bootstrap CSS --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> <title>Bootstrap 5 Group Buttons Example</title> </head> <body style="padding:20px;"> <h2>Vertical Button Group</h2> <div class = "btn-group-vertical" role = "group"> <button type = "button" class = "btn btn-info">JAVA</button> <button type = "button" class = "btn btn-info">C++</button> <button type = "button" class = "btn btn-info">C</button> <button type = "button" class = "btn btn-info">PHP</button> <button type = "button" class = "btn btn-info">Nodejs</button> <button type = "button" class = "btn btn-info">Python</button> </div> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script> </div></div> </body> </html> </body> </html> |
Bootstrap5 Nested Button Groups
By place a .btn-group
within another .btn-group we can create nested groups
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <html lang = "en"> <head> <!-- Meta tags --> <meta charset = "utf-8"> <meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no"> <!-- Bootstrap CSS --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> <title>Bootstrap 5 Group Buttons Example</title> </head> <body style="padding:20px;"> <div class = "container"> <h2>Nesting Button Group</h2> <div class = "btn-group" role = "group"> <button type = "button" class = "btn btn-primary">Web Apps</button> <button type = "button" class = "btn btn-primary">Desktop Apps</button> <div class = "btn-group" role = "group"> <button id = "btnGroupDrop1" type = "button" class = "btn btn-info dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false"> Mobile Apps </button> <ul class="dropdown-menu" aria-labelledby="btnGroupDrop1"> <li><a class="dropdown-item" href="#">Android Apps</a></li> <li><a class="dropdown-item" href="#">ios Apps</a></li> <li><a class="dropdown-item" href="#">Flutter Apps</a></li> </ul> </div> </div> </div> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script> </div></div> </body> </html> </body> </html> |
Conclusion: In this bootstrap example we covered how to create grouped buttons, align buttons vertically and how to create nested groupd buttons
Article Contributed By :
|
|
|
|
1368 Views |