Bootstrap 5 Button group Nesting
Bootstrap 5 Button group nesting is used to create a dropdown menu mixed with a series of buttons. To make the button group nesting, we will use .btn-group class.
Button group nesting used Class:
- .btn-group: This class is used to create a button group nesting in a dropdown menu.
Syntax:
<div class="btn-group" role="group" aria-label=""> ... </div>
Example 1: In this example, we will use .btn-group class to create a button group nesting.
HTML
<!DOCTYPE html> < html lang = "en" > < head > < title >Bootstrap 5 Button group Nesting</ title > < meta charset = "utf-8" > < meta name = "viewport" content = "width=device-width, initial-scale=1" > < link href = "https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel = "stylesheet" integrity = "sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin = "anonymous" > < 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 > </ head > < body style = "text-align:center;" > < div class = "container mt-3" > < h1 class = "text-success" > w3wiki </ h1 > < h2 >Bootstrap 5 Button group Nesting</ h2 > < div class = "btn-group" role = "group" aria-label = "Basic group nesting example" > < button type = "button" class = "btn btn-primary" > w3wiki </ button > < div class = "btn-group" role = "group" > < button id = "btn1" type = "button" class = "btn btn-primary dropdown-toggle" data-bs-toggle = "dropdown" aria-expanded = "false" > Web Technology </ button > < ul class = "dropdown-menu" aria-labelledby = "btn1" > < li >< a class = "dropdown-item" href = "#" >HTML</ a ></ li > < li >< a class = "dropdown-item" href = "#" >CSS</ a ></ li > < li >< a class = "dropdown-item" href = "#" >JavaScript</ a ></ li > < li >< a class = "dropdown-item" href = "#" >Bootstrap</ a ></ li > </ ul > </ div > < button type = "button" class = "btn btn-primary" > Programming </ button > < button type = "button" class = "btn btn-primary" > Data Structure </ button > </ div > </ div > </ body > </ html > |
Output:
Example 2: In this example, we will use .btn-group-vertical class to create a button group nesting in a vertical way.
HTML
<!DOCTYPE html> < html lang = "en" > < head > < title >Bootstrap 5 Button group Nesting</ title > < meta charset = "utf-8" > < meta name = "viewport" content = "width=device-width, initial-scale=1" > < link href = "https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel = "stylesheet" integrity = "sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin = "anonymous" > < 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 > </ head > < body style = "text-align:center;" > < div class = "container mt-3" > < h1 class = "text-success" > w3wiki </ h1 > < h2 >Bootstrap 5 Button group Nesting</ h2 > < div class = "btn-group-vertical" role = "group" aria-label = "Basic group nesting example" > < button type = "button" class = "btn btn-primary" > w3wiki </ button > < div class = "btn-group" role = "group" > < button id = "btn1" type = "button" class = "btn btn-primary dropdown-toggle" data-bs-toggle = "dropdown" aria-expanded = "false" > Web Technology </ button > < ul class = "dropdown-menu" aria-labelledby = "btn1" > < li >< a class = "dropdown-item" href = "#" >HTML</ a ></ li > < li >< a class = "dropdown-item" href = "#" >CSS</ a ></ li > < li >< a class = "dropdown-item" href = "#" >JavaScript</ a ></ li > < li >< a class = "dropdown-item" href = "#" >Bootstrap</ a ></ li > </ ul > </ div > < button type = "button" class = "btn btn-primary" > Programming </ button > < button type = "button" class = "btn btn-primary" > Data Structure </ button > </ div > </ div > </ body > </ html > |
Output:
Reference: https://getbootstrap.com/docs/5.0/components/button-group/#nesting
Contact Us