VOOZH about

URL: https://www.geeksforgeeks.org/bootstrap/bootstrap-5-button-group/

⇱ Bootstrap 5 | Button group - GeeksforGeeks

  • Courses
  • Tutorials
  • Interview Prep

Bootstrap 5 | Button group

Last Updated : 29 Jul, 2020
Bootstrap 5 is the latest major release by Bootstrap in which they have revamped the UI and made various changes. Button group is a component provided by Bootstrap 5 which helps to combine the buttons in a series in a single line. All types of buttons are supported by it.


Syntax:

<div class="btn-group"> Buttons... <div>


Types: Following are the nine types of buttons available in Bootstrap 5:

  • btn-primary
  • btn-secondary
  • btn-success
  • btn-danger
  • btn-warning
  • btn-info
  • btn-light
  • btn-dark
  • btn-link
    Horizontally arranged button groups: The .btn-group class is used to create horizontally arranged button groups.

  • Example: This example uses show the working of horizontally arranged button group in Bootstrap 5.

    Output:

    👁 Image
  • Vertically arranged button groups: The .btn-group-vertical class is used in parent div to create vertical button group.

    Example: This example uses show the working of vertical arranged button group in Bootstrap 5.

    Output:

    👁 Image
  • 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: This example uses show the working of button sizes with button group in Bootstrap 5.

    Output:

    👁 Image
  • 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: 

    <!DOCTYPE html>
<html>

<head>
 <title>
 Bootstrap 5 | Buttons group
 </title>

 <!-- Load Bootstrap -->
 <link rel="stylesheet" 
 href=
"https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css"
 integrity=
"sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I" 
 crossorigin="anonymous">
 <script src=
"https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
 integrity=
"sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
 crossorigin="anonymous">
</script>
 <script src=
"https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js"
 integrity=
"sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/"
 crossorigin="anonymous">
</script>
</head>

<body style="text-align:center;">
 <div class="container mt-3">

 <h1 style="color:green;">
 GeeksforGeeks
 </h1>

 <div class="container">
 <div class="btn-group">
 <button type="button" 
 class="btn btn-success">
 HTML
 </button>

 <button type="button"
 class="btn btn-success btn-group">
 CSS
 </button>

 <div class="btn-group">
 <div class="dropdown">
 <button type="button" 
class="btn btn-success dropdown-toggle" data-toggle="dropdown">
 JavaScript<span class="caret"></span>
 </button>

 <ul class="dropdown-menu" role="menu">
 <li><a class="dropdown-item" href="#">React</a></li>
 <li><a class="dropdown-item" href="#">Vue</a></li>
 </ul>
 </div>
 </div>
 </div>
 </div>
 </div>
</body>

</html>

    Output:

    👁 Image
  • Split button dropdown: Example:

    Output:

    👁 Image
  • Bootstrap 5 also supports Split Button Vertical Dropdown. Example:

    Output:

    👁 Image
Comment
Article Tags:

Explore