How to create a basic button group in Bootstrap ?

Last Updated : 30 Sep, 2021

Button: The .btn classes are used with the <button> element to create the basic button using Bootstrap. The buttons in bootstrap are used in forms, dialogs, etc.

Button Groups in Bootstrap: In Bootstrap, button groups has group of buttons together on a single line. Button group is created using class .btn-group.

Example:

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content=
        "width=device-width, initial-scale=1">
    <link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
    </script>
    <script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js">
    </script>
</head>

<body>
    <center>
        <div class="container">
            <h1 style="color:green;">
                GeeksForGeeks
            </h1>
            
            <h2>Button Group</h2>
            
            <div class="btn-group">
                <button type="button" 
                    class="btn btn-primary">
                    login
                </button>
                
                <button type="button" 
                    class="btn btn-primary">
                    signup
                </button>
                
                <button type="button" 
                    class="btn btn-primary">
                    signin
                </button>
            </div>
        </div>
    </center>
</body>

</html>

Output:

In above example, Button group is created as single like there are 3 buttons login, signup and signin arranged in a single line. These buttons are created using class btn-group.

Vertical Button Groups: In Bootstrap, vertical button groups are arranged in vertical order. These vertical button groups are created using class .btn-group-vertical.

Example:

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/3.4.1/css/bootstrap.min.css">
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
    </script>
    <script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js">
    </script>
</head>

<body>
    <center>
        <h1 style="color:green">GeeksForGeeks</h1>
        <div class="container">
            <h2>Vertical Button Group</h2>
            <div class="btn-group-vertical">
                <button type="button" 
                    class="btn btn-primary">
                    Login
                </button>
                
                <button type="button" 
                    class="btn btn-primary">
                    Signup
                </button>
                
                <button type="button" 
                    class="btn btn-primary">
                    Signin
                </button>
            </div>
        </div>
    </center>
</body>

</html>

Output:

In above example, vertical button group is created. There are 3 buttons login, signup and Signin arranged in a vertical order using class btn-group-vertical.

Justified Button Group: In Bootstrap, justified button groups are arranged with the width of screen the buttons are justified with width. Justified button group is created using class .btn-group-justified.

Example:

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/3.4.1/css/bootstrap.min.css">
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
    </script>
    <script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js">
    </script>
</head>

<body>
    <center>
        <h1 style="color:green">
            GeeksForGeeks
        </h1>
        
        <div class="container">
            <h2>Justified Button Groups</h2>
            <div class="btn-group btn-group-justified">
                <a href="#" class="btn btn-primary">
                    Login
                </a>
                
                <a href="#" class="btn btn-primary">
                    Signup
                </a>
                
                <a href="#" class="btn btn-primary">
                    Signin
                </a>
            </div>
        </div>
    </center>
</body>

</html>

Output:

In above example, justified button group are created. There are 3 buttons login, signup and signin arranged using justified order that is buttons are justified with width of screen. These justified button group is created using class btn-group-justified.