Bootstrap 4 | Button Groups
Bootstrap offers classes which allow to group buttons along the same line, horizontally or vertically. The buttons to be grouped are nested inside a <div> element with the class .btn-group.
Horizontally arranged button groups: The .btn-group class is used to create horizontally arranged button groups.
Example:
html
<!DOCTYPE html><html lang="en"><head> <title>Bootstrap Button Groups</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href= <script src= </script> <script src= </script> <script src= </script></head><body> <div class="container"> <div class="btn-group"> <button type="button" class="btn btn-success"> HTML </button> <button type="button" class="btn btn-success"> CSS </button> <button type="button" class="btn btn-success"> JavaScript </button> </div> </div></body></html> |
Output:
Vertically arranged button groups: The .btn-group-vertical class is used in parent div to create vertical button group.
Example:
html
<!DOCTYPE html><html lang="en"><head> <title>Bootstrap Button Groups</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href= <script src= </script> <script src= </script> <script src= </script></head><body> <div class="container"> <div class="btn-group-vertical"> <button type="button" class="btn btn-success"> HTML </button> <button type="button" class="btn btn-success"> CSS </button> <button type="button" class="btn btn-success"> JavaScript </button> </div> </div></body></html> |
Output:
Button group sizing: The whole button group can be given the same size by including the class btn-group-* (* could be sm, md or lg) in the .btn-group parent element, instead of including sizing classes in each button.
Example:
html
<!DOCTYPE html><html lang="en"><head> <title>Bootstrap Button Groups</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href= <script src= </script> <script src= </script> <script src= </script></head><body> <div class="container"> <div class="btn-group btn-group-lg"> <button type="button" class="btn btn-success"> HTML </button> <button type="button" class="btn btn-success"> CSS </button> <button type="button" class="btn btn-success"> JavaScript </button> </div> <br><br> <div class="btn-group btn-group-md"> <button type="button" class="btn btn-success"> HTML </button> <button type="button" class="btn btn-success"> CSS </button> <button type="button" class="btn btn-success"> JavaScript </button> </div> <br><br> <div class="btn-group btn-group-sm"> <button type="button" class="btn btn-success"> HTML </button> <button type="button" class="btn btn-success"> CSS </button> <button type="button" class="btn btn-success"> JavaScript </button> </div> </div></body></html> |
Output:
Nesting button groups and making dropdown menus: A button group can be nested within another button group and dropdown menus can be created this way.
- Single button dropdown:
Example:
html
<!DOCTYPE html><htmllang="en"><head><title>Bootstrap Button Groups</title><metacharset="utf-8"><metaname="viewport"content="width=device-width, initial-scale=1"><linkrel="stylesheet"href=<scriptsrc=</script><scriptsrc=</script><scriptsrc=</script></head><body><divclass="container"><divclass="btn-group"><buttontype="button"class="btn btn-success">HTML</button><buttontype="button"class="btn btn-success btn-group">CSS</button><divclass="btn-group"><buttontype="button"class="btn btn-success dropdown-toggle"data-toggle="dropdown">JavaScript<spanclass="caret"></span></button><ulclass="dropdown-menu"role="menu"><li><ahref="#">React</a></li><li><ahref="#">Vue</a></li></ul></div></div></div></body></html>
Output:
- Split button dropdown:
Example:
html
<!DOCTYPE html><htmllang="en"><head><title>Bootstrap Button Groups</title><metacharset="utf-8"><metaname="viewport"content="width=device-width, initial-scale=1"><linkrel="stylesheet"href=<scriptsrc=</script><scriptsrc=</script><scriptsrc=</script></head><body><divclass="container"><divclass="btn-group"><buttontype="button"class="btn btn-success">HTML</button><buttontype="button"class="btn btn-success btn-group">CSS</button><divclass="btn-group"><buttontype="button"class="btn btn-success">JavaScript</button><buttontype="button"class="btn btn-success dropdown-toggle"data-toggle="dropdown"><spanclass="caret"></span></button><ulclass="dropdown-menu"role="menu"><li><ahref="#">React</a></li><li><ahref="#">Vue</a></li></ul></div></div></div></body></html>
Output:
However, the split button dropdown does not work as expected when the buttons are nested under .btn-group-vertical class.
Example:
html
<!DOCTYPE html><htmllang="en"><head><title>Bootstrap Button Groups</title><metacharset="utf-8"><metaname="viewport"content="width=device-width, initial-scale=1"><linkrel="stylesheet"href=<scriptsrc=</script><scriptsrc=</script><scriptsrc=</script></head><body><divclass="container"><divclass="btn-group-vertical"><buttontype="button"class="btn btn-success">HTML</button><buttontype="button"class="btn btn-success">CSS</button><divclass="btn-group"><buttontype="button"class="btn btn-success dropdown-toggle"data-toggle="dropdown">JavaScript</button><ulclass="dropdown-menu"role="menu"><li><ahref="#">React</a></li><li><ahref="#">Vue</a></li></ul></div></div></div></body></html>
Output:
Supported Browser:
- Google Chrome
- Internet Explorer
- Firefox
- Opera
- Safari
Please Login to comment...