Button groups
Bootstrap allows us to group a series of buttons together in a single line vertically or horizontally(without spaces) using the button group class. These classes are as follows:
Class | Description | Syntax |
---|---|---|
Style | Add styles to buttons | .btn-primary|default|success|info|link |
Size | Changes the sizing of buttons. | .btn-group-* |
Nesting | Stacks the button in vertical manner | .btn-group-vertical |
Vertical | Creates a dropdown menu within the buttons | .btn-group |
Button toolbar | Combine button groups into button toolbars | .btn-toolbar |
Example Code:
<!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/4.5.2/css/bootstrap.min.css">
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js">
</script>
<script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js">
</script>
</head>
<body>
<p>Styling Button Groups</p>
<div class="btn-group">
<button type="button" class="btn btn-danger">Click</button>
<button type="button" class="btn btn-warning">Click</button>
<button type="button" class="btn btn-success">Click</button>
</div>
<br />
<p>Sizing Button Groups</p>
<div>
<div class="btn-group btn-group-lg">
<button type="button" class="btn btn-danger">Click</button>
<button type="button" class="btn btn-warning">Click</button>
<button type="button" class="btn btn-success">Click</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-danger">Click</button>
<button type="button" class="btn btn-warning">Click</button>
<button type="button" class="btn btn-success">Click</button>
</div>
<div class="btn-group btn-group-sm">
<button type="button" class="btn btn-danger">Click</button>
<button type="button" class="btn btn-warning">Click</button>
<button type="button" class="btn btn-success">Click</button>
</div>
<div class="btn-group btn-group-xs">
<button type="button" class="btn btn-danger">Click</button>
<button type="button" class="btn btn-warning">Click</button>
<button type="button" class="btn btn-success">Click</button>
</div>
</div>
<br>
<p>Vertical Button groups</p>
<div class="btn-group-vertical">
<button type="button" class="btn btn-danger">Click</button>
<button type="button" class="btn btn-warning">Click</button>
<button type="button" class="btn btn-success">Click</button>
</div>
<p>Nesting of button groups</p>
<div class="btn-group">
<button type="button" class="btn btn-danger">Click</button>
<button type="button" class="btn btn-warning">Click</button>
<div class="btn-group">
<button type="button" class="btn btn-success
dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown</button>
<ul class="dropdown-menu" aria-labelledby="btnGroupDrop1">
<li><a class="dropdown-item" href="#">Item 1</a></li>
<li><a class="dropdown-item" href="#">Item 2</a></li>
</ul>
</div>
</div>
</body>
</html>
Bootstrap Cheat Sheet – A Basic Guide to Bootstrap
Bootstrap is a free, open-source, potent CSS framework and toolkit used to create modern and responsive websites and web applications. It is the most popular HTML, CSS, and JavaScript framework for developing responsive, mobile-first websites. Nowadays, websites are perfect for all browsers and all sizes of screens.
Contact Us