---
title: "How to make a Button Groups in Bootstrap with dropdown menu with help of Bootstrap library?"  
description: "How to make a Button Groups in Bootstrap with dropdown menu with help of Bootstrap library?"  
author: "Ethan Karla"  
published: 2021-07-28  
canonical: https://answers.mindstick.com/qa/93859/how-to-make-a-button-groups-in-bootstrap-with-dropdown-menu-with-help-of-bootstrap-library  
category: "web application"  
tags: ["web development", "web application development"]  
reading_time: 1 minute  

---

# How to make a Button Groups in Bootstrap with dropdown menu with help of Bootstrap library?

How to make a [Button](https://www.mindstick.com/articles/63/how-to-add-button-in-datagridview-in-csharp-dot-net) [Groups](https://www.mindstick.com/interview/34156/what-are-groups-in-signalr-and-how-can-you-use-them-to-manage-chat-rooms) in [Bootstrap](https://www.mindstick.com/articles/43948/top-free-resources-for-learning-and-perfecting-bootstrap-programming) with [dropdown](https://www.mindstick.com/articles/263/ajax-toolkit-dropdownextender-in-asp-dot-net) menu with help of Bootstrap [library](https://www.mindstick.com/blog/25/class-library)?

## Answers

### Answer by Ravi Vishwakarma

we want to create a group of Html elements. in bootstrap hove some classes for making the group of Html elements. like button, input, etc. we use the '*-group' class for making a group of elements. .btn-group, .btn-group-sm, .btn-group-lg, .btn-group-vertical, .input-group, etc.

Example

```
<!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>
<div class='container mt-2'>
 <div class='btn-group' >
  <button type='button' class='btn btn-primary'>Left</button>
  <button type='button' class='btn btn-warning'>Middle</button>
  <button type='button' class='btn btn-primary'>Right</button>
</div>
<div class='btn-group'  aria-label='Basic outlined example'>
  <button type='button' class='btn btn-outline-primary'>Left</button>
  <button type='button' class='btn btn-outline-primary'>Middle</button>
  <button type='button' class='btn btn-outline-primary'>Right</button>
</div>
<div class='input-group'>
    <div class='input-group-text'>@</div>
    <input type='text' class='form-control' placeholder='Enter your usename' aria-label='Input group example' aria-describedby='btnGroupAddon'>
  </div>
</div>
</body>
</html>
```

output

![How to make a Button Groups in Bootstrap with dropdown menu with help of Bootstrap library?](https://answers.mindstick.com/questionanswer/652adabe-61b8-4c50-9630-6130687a239b/images/b6611088-e03b-4d15-a398-e0c2297cbdf5.png)

\


---

Original Source: https://answers.mindstick.com/qa/93859/how-to-make-a-button-groups-in-bootstrap-with-dropdown-menu-with-help-of-bootstrap-library

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.
