bootstrap joined buttons code example

Example 1: bootstrap 4 button

<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>

<button type="button" class="btn btn-link">Link</button>

Example 2: 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>

Example 3: button with sign in image bootstrap 4

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<p class="mb-0">px-3:</p>
<a class="btn btn-lg px-3 btn-primary" href="#" role="button">USA <img src="https://lipis.github.io/flag-icon-css/flags/4x3/in.svg" height="30" alt="USA flag"></a>
<p class="mb-0">px-4:</p>
<a class="btn btn-lg px-4 btn-primary" href="#" role="button">USA <img src="https://lipis.github.io/flag-icon-css/flags/4x3/in.svg" height="30" alt="USA flag"></a>
<p class="mb-0">px-5:</p>
<a class="btn btn-lg px-5 btn-primary" href="#" role="button">USA <img src="https://lipis.github.io/flag-icon-css/flags/4x3/in.svg" height="30" alt="USA flag"></a>

Tags:

Misc Example

Recent Posts