In 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 :
|
|
|
|
679 Views |