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=
<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.
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...