How to create a basic button group in Bootstrap ?
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.
Please Login to comment...