Answers for "bootstrap button groups"

bootstrap button group

<div class="btn-group">
  <button type="button" class="btn btn-success">Add</button>
  <button type="button" class="btn btn-warning">Update</button>
  <button type="button" class="btn btn-danger">Delete</button>
</div>

bootstrap button group

<!-- Basic example -->
<div class="btn-group" role="group" aria-label="Basic example">
   <button type="button" class="btn btn-primary">Left</button>
   <button type="button" class="btn btn-primary">Middle</button>
   <button type="button" class="btn btn-primary">Right</button>
</div>

<!-- Outlined styles -->
<div class="btn-group" role="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>

<!-- Checkbox and radio button groups -->
<div
   class="btn-group"
   role="group"
   aria-label="Basic checkbox toggle button group"
>
   <input type="checkbox" class="btn-check" id="btncheck1" autocomplete="off" />
   <label class="btn btn-outline-primary" for="btncheck1">Checkbox 1</label>

   <input type="checkbox" class="btn-check" id="btncheck2" autocomplete="off" />
   <label class="btn btn-outline-primary" for="btncheck2">Checkbox 2</label>

   <input type="checkbox" class="btn-check" id="btncheck3" autocomplete="off" />
   <label class="btn btn-outline-primary" for="btncheck3">Checkbox 3</label>
</div>

<!-- Button toolbar -->
<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
   <div class="btn-group me-2" role="group" aria-label="First group">
      <button type="button" class="btn btn-primary">1</button>
      <button type="button" class="btn btn-primary">2</button>
      <button type="button" class="btn btn-primary">3</button>
      <button type="button" class="btn btn-primary">4</button>
   </div>
   <div class="btn-group me-2" role="group" aria-label="Second group">
      <button type="button" class="btn btn-secondary">5</button>
      <button type="button" class="btn btn-secondary">6</button>
      <button type="button" class="btn btn-secondary">7</button>
   </div>
   <div class="btn-group" role="group" aria-label="Third group">
      <button type="button" class="btn btn-info">8</button>
   </div>
</div>

Bootstrap 4 Button Groups

<div class="btn-group">
  <button type="button" class="btn btn-primary">Apple</button>
  <button type="button" class="btn btn-primary">Samsung</button>
  <button type="button" class="btn btn-primary">Sony</button>
</div>

bootstrap button group

<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
  <div class="btn-group mr-2" role="group" aria-label="First group">
    <button type="button" class="btn btn-secondary">1</button>
    <button type="button" class="btn btn-secondary">2</button>
    <button type="button" class="btn btn-secondary">3</button>
    <button type="button" class="btn btn-secondary">4</button>
  </div>
  <div class="btn-group mr-2" role="group" aria-label="Second group">
    <button type="button" class="btn btn-secondary">5</button>
    <button type="button" class="btn btn-secondary">6</button>
    <button type="button" class="btn btn-secondary">7</button>
  </div>
  <div class="btn-group" role="group" aria-label="Third group">
    <button type="button" class="btn btn-secondary">8</button>
  </div>
</div>

button group bootstrap

<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>
  
  
  <div class="btn-group-vertical">
    <button type="button" class="btn btn-primary">Apple</button>
    <button type="button" class="btn btn-primary">Samsung</button>
    <button type="button" class="btn btn-primary">Sony</button>
  </div>

bootstrap Button tags

The .btn classes are designed to be used with the <button> element. 
However, you can also use these classes on <a> or <input> elements
(though some browsers may apply a slightly different rendering).

When using button classes on <a> elements that are used to trigger in-page 
functionality (like collapsing content), rather than linking to new pages or 
sections within the current page, these links should be given a role="button" 
to appropriately convey their purpose to assistive technologies such as screen 
readers.

<a class="btn btn-primary" href="#" role="button">Link</a>
<button class="btn btn-primary" type="submit">Button</button>
<input class="btn btn-primary" type="button" value="Input">
<input class="btn btn-primary" type="submit" value="Submit">
<input class="btn btn-primary" type="reset" value="Reset">