Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

How to create a basic button group in Bootstrap ?

  • Difficulty Level : Hard
  • 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=
    <script src=
    </script>
    <script src=
    </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=
    <script src=
    </script>
    <script src=
    </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=
    <script src=
    </script>
    <script src=
    </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.


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!