How do we create large button groups in Bootstrap ?

Last Updated : 09 Oct, 2021

Bootstrap is a free and open-source collection of CSS and JavaScript/jQuery code used for creating dynamic websites layout and web applications. It is one of the most popular front-end frameworks which has really a nice set of predefined CSS codes. It uses different types of classes to make responsive websites. Bootstrap 5 is the major release of Bootstrap which has renewed the UI design and make several changes. The Button is the very crucial component class provided by Bootstrap 5. By using various Buttons classes, now we can design a very responsive and attractive Button component. We can add Buttons on a web page using predefined classes. Bootstrap provides many types of Buttons & also supports several custom buttons. In this article, we will know how to create the large button group with the label on it using the Bootstrap Buttons class.

Syntax:

<button class="btn btn-className">Submit</button>

Button Group: Button group is a component provided by Bootstrap 5 which basically enables you to make a group of buttons in a series. All types of buttons classes are also supported by the buttons group.

Types: Following are the 9 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

For detailed usage of Bootstrap Buttons & other button components, please refer to the Bootstrap 5 Buttons & Bootstrap Buttons with Examples articles.

Let’s now understand how to use the btn-group class to group the series of buttons together on a single line, through the examples.

Approach 1:

Use class btn-group and btn-group-lg inside a div class.
Inside each div class, add an HTML <button> elements that want to display on the screen with predefined Bootstrap Buttons class name.

Example 1: In order to create a button group, you need to define a btn-group class in the container tag such as <div>.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
  
    <!-- Required 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>GeeksforGeeks Bootstrap Button</title> 
</head> 
  
<body> 
    <h1 class="text-success"> 
        GeeksforGeeks 
    </h1> 
      
    <h4 class="text-secondary"> 
        Bootstrap button group 
    </h4> 
  
    <div class="btn-group"> 
        <button type="button" class="btn btn-primary"> 
            Primary 
        </button> 
  
        <button type="button" class="btn btn-success"> 
            Success 
        </button> 
    </div> 
</body> 
  
</html>

Output:

We also create a buttons group of the same size by including the class btn-group-* along with the .btn-group parent class, instead of including sizing classes in each button.

There are multiple sizes of btn-group classes. Those are as follows:

btn-group-sm: Used for small button group.
btn-group-md: Used for medium button group.
btn-group-lg: Used for large button group.

Example 2: This example demonstrates the use of different button group sizing groups in Bootstrap.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
  
    <!-- Required 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>GeeksforGeeks Bootstrap Button</title> 
</head> 
  
<body> 
    <h1 class="text-success"> 
        GeeksforGeeks 
    </h1> 
      
    <h4 class="text-secondary"> 
        Bootstrap Button group sizing 
    </h4> 
  
    <div class="container"> 
        <div class="btn-group btn-group-lg"> 
            <button type="button" 
                class="btn btn-success"> 
                HTML 
            </button> 
        </div> 
  
        <div class="btn-group btn-group-md"> 
            <button type="button" 
                class="btn btn-success"> 
                CSS 
            </button> 
        </div> 
  
        <div class="btn-group btn-group-sm"> 
            <button type="button" 
                class="btn btn-success"> 
                JavaScript 
            </button> 
        </div> 
    </div> 
</body> 
  
</html>

Output:

We will follow the below steps to build Bootstrap Large Buttons Group.

Approach 2:

Step 1: To use Bootstrap component classes, we need to download the bootstrap package or we can use the Bootstrap CDN link directly, from the official page, inside of the<head> tag, as shown below.

<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>

Step 2: Declare the class as a container with values as .btn-group-lg in the outer <div>.

<div class="btn-group-lg">
    <button></button>
    <button></button>
</div>

Step 3: Now, add different predefined button classes to the inner HTML <button> tag. For instance, .btn btn-success will set the styles of the button as bootstrap success class i.e. green button, and like that, you can use different classes also.

<div class="btn-group btn-group-lg">
    <!-- Here basic Bootstrap Button Declared -->
    <button type="button" class="btn btn-success">
        Success
    </button>
</div>

We will utilize both the above approaches to create large buttons groups in Bootstrap.

Horizontally arranged large button groups in bootstrap: The .btn-group-lg class along with the parent .btn-group class is used to create horizontally arranged large button groups.

Example 3: In this example, we have created the horizontal series of large buttons group in Bootstrap.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
        Bootstrap 5 Horizontal Large 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" /> 
</head> 
  
<body class="text-center"> 
    <div class="container mt-3"> 
        <h1 class="text-success"> 
            GeeksforGeeks 
        </h1> 
          
        <h1 class="text-dark"> 
            Horizontal Large Buttons Group 
        </h1> 
  
        <div class="btn-group btn-group-lg"> 
            <button type="button" 
                class="btn btn-primary"> 
                Btn 1 
            </button> 
  
            <button type="button" 
                class="btn btn-dark"> 
                Btn 2 
            </button> 
  
            <button type="button" 
                class="btn btn-warning"> 
                Btn 3 
            </button> 
        </div> 
    </div> 
</body> 
  
</html>

Output:

Vertically arranged large button groups in bootstrap: The .btn-group-lg class along with the parent .btn-group-vertical class is used to create horizontally arranged large button groups.

Example 4: In this example, we have created a vertically series of large buttons group in Bootstrap.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
        Bootstrap 5 Vertical Large 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" /> 
</head> 
  
<body class="text-center"> 
    <div class="container mt-3"> 
        <h1 class="text-success"> 
            GeeksforGeeks 
        </h1> 
          
        <h1 class="text-dark"> 
            Vertical Large Buttons Group 
        </h1> 
  
        <div class="btn-group-vertical btn-group-lg"> 
            <button type="button" 
                class="btn btn-primary"> 
                Btn 1 
            </button> 
  
            <button type="button" 
                class="btn btn-dark"> 
                Btn 2 
            </button> 
  
            <button type="button" 
                class="btn btn-warning"> 
                Btn 3 
            </button> 
        </div> 
    </div> 
</body> 
  
</html>