What are Button Groups in Bootstrap ?
“Button Groups” in Bootstrap is a class of name “btn-group” which is used to create a series of buttons in groups (without spaces) vertically or horizontally.
Syntax: This is the basic syntax of the button group class where each button has its own class of “btn”.
<div class="btn-group"> <button type="button" class="btn">Click</button> </div>
Buttons have a default border-radius on the first and last buttons of the group.
Adding Styles on Buttons: Bootstrap allows you to add styles to your buttons using the following classes:
- .btn-default
- .btn-primary
- .btn-success
- .btn-info
- .btn-warning
- .btn-danger
- .btn-link
Example: In this example, we will create button groups using Bootstrap.
HTML
<!DOCTYPE html> < html lang = "en" > < head > < title >Bootstrap Example</ title > < meta charset = "utf-8" > < meta name = "viewport" content = "width=device-width, initial-scale=1" > < link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" > < script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js" > </ script > < script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js" > </ script > < script src = "https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" > </ script > </ head > < body > < div class = "btn-group" > < button type = "button" class = "btn btn-danger" >Click</ button > < button type = "button" class = "btn btn-warning" >Click</ button > < button type = "button" class = "btn btn-success" >Click</ button > </ div > </ body > </ html > |
Output:
Sizing of your Buttons: Bootstrap provides 4 button sizes which you can add directly to your buttons by adding an additional class of “btn-group-*” to your “btn-group” class. No need to add separate classes to each button.
All 4 sizes can be used as follows:
Example: In this example, we will size our button.
HTML
<!DOCTYPE html> < html lang = "en" > < head > < title >Bootstrap Example</ title > < meta charset = "utf-8" > < meta name = "viewport" content = "width=device-width, initial-scale=1" > < link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" > < script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js" > </ script > < script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js" > </ script > < script src = "https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" > </ script > </ head > < body > < div class = "btn-group btn-group-lg" > < button type = "button" class = "btn btn-danger" >Click</ button > < button type = "button" class = "btn btn-warning" >Click</ button > < button type = "button" class = "btn btn-success" >Click</ button > </ div > < div class = "btn-group" > < button type = "button" class = "btn btn-danger" >Click</ button > < button type = "button" class = "btn btn-warning" >Click</ button > < button type = "button" class = "btn btn-success" >Click</ button > </ div > < div class = "btn-group btn-group-sm" > < button type = "button" class = "btn btn-danger" >Click</ button > < button type = "button" class = "btn btn-warning" >Click</ button > < button type = "button" class = "btn btn-success" >Click</ button > </ div > < div class = "btn-group btn-group-xs" > < button type = "button" class = "btn btn-danger" >Click</ button > < button type = "button" class = "btn btn-warning" >Click</ button > < button type = "button" class = "btn btn-success" >Click</ button > </ div > </ body > </ html > |
Output:
Vertical Button Groups: Bootstrap also supports vertical button groups stacked in a vertical manner rather than horizontally. Use the class “btn-group-vertical” to create a vertical button group:
Example: In this example, we will create vertical button groups.
HTML
<!DOCTYPE html> < html lang = "en" > < head > < title >Bootstrap Example</ title > < meta charset = "utf-8" > < meta name = "viewport" content = "width=device-width, initial-scale=1" > < link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" > < script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js" > </ script > < script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js" > </ script > < script src = "https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" > </ script > </ head > < body > < div class = "btn-group-vertical" > < button type = "button" class = "btn btn-danger" >Click</ button > < button type = "button" class = "btn btn-warning" >Click</ button > < button type = "button" class = "btn btn-success" >Click</ button > </ div > </ body > </ html > |
Output:
Nesting of Buttons: Bootstrap allows you to create dropdown menus under your buttons through nesting. Add a class of “btn-group” within your main “btn-group” class to have a dropdown menu within your button:
Example: In this example, we will create a nested button.
HTML
<!DOCTYPE html> < html lang = "en" > < head > < title >Bootstrap Example</ title > < meta charset = "utf-8" > < meta name = "viewport" content = "width=device-width, initial-scale=1" > < link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" > < script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js" > </ script > < script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js" > </ script > < script src = "https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" > </ script > </ head > < body > < div class = "btn-group" > < button type = "button" class = "btn btn-danger" >Click</ button > < button type = "button" class = "btn btn-warning" >Click</ button > < div class = "btn-group" > < button type = "button" class = "btn btn-success dropdown-toggle" data-bs-toggle = "dropdown" aria-expanded = "false" > Dropdown </ button > < ul class = "dropdown-menu" aria-labelledby = "btnGroupDrop1" > < li >< a class = "dropdown-item" href = "#" >Item 1</ a ></ li > < li >< a class = "dropdown-item" href = "#" >Item 2</ a ></ li > </ ul > </ div > </ div > </ body > </ html > |
Output:
Contact Us