<div class="card shadow" style="width: 400px">
  <div class="card-body">
    <h6>Button group</h6>
 <div class="btn-group mb-4" role="group" aria-label="Button group 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>

    <h6>Button group toolbar</h6>
 <div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
  <div class="btn-group mr-2" role="group" aria-label="Button group example">
    <button type="button" class="btn btn-outline-secondary">B</button>
    <button type="button" class="btn btn-outline-secondary">I</button>
    <button type="button" class="btn btn-outline-secondary">U</button>
  </div>

  <div class="btn-group" role="group" aria-label="Button group example">
    <button type="button" class="btn btn-outline-secondary">L</button>
    <button type="button" class="btn btn-outline-secondary">R</button>
    <button type="button" class="btn btn-outline-secondary">T</button>
  </div>
</div>
  </div>
</div>
body {padding: 20px}

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.2.1/js/bootstrap.bundle.min.js