Button Group | GoSnippets

Buttons Bootstrap 5Free

Free Bootstrap 5 button snippet — Button Group. Preview, copy HTML, drop it into any Bootstrap 5 project.

3.1k views892 downloadslast year

gosnippets.com/preview/button-group

Source Code

1<div class="container py-4">
2  <!-- Solid variants -->
3  <div class="d-flex flex-wrap gap-2 mb-3">
4    <button class="btn btn-primary">Primary</button>
5    <button class="btn btn-secondary">Secondary</button>
6    <button class="btn btn-success">Success</button>
7    <button class="btn btn-danger">Danger</button>
8    <button class="btn btn-warning">Warning</button>
9    <button class="btn btn-info text-white">Info</button>
10  </div>
11  <!-- Outline variants -->
12  <div class="d-flex flex-wrap gap-2 mb-3">
13    <button class="btn btn-outline-primary">Outline Primary</button>
14    <button class="btn btn-outline-secondary">Outline Secondary</button>
15    <button class="btn btn-outline-success">Outline Success</button>
16    <button class="btn btn-outline-danger">Outline Danger</button>
17  </div>
18  <!-- Pill + sizes -->
19  <div class="d-flex flex-wrap align-items-center gap-2 mb-3">
20    <button class="btn btn-primary rounded-pill btn-sm">Small Pill</button>
21    <button class="btn btn-primary rounded-pill">Medium Pill</button>
22    <button class="btn btn-primary rounded-pill btn-lg">Large Pill</button>
23  </div>
24  <!-- Loading state -->
25  <div class="d-flex gap-2">
26    <button class="btn btn-primary" type="button" disabled>
27      <span class="spinner-border spinner-border-sm me-2" role="status"></span>
28      Loading...
29    </button>
30    <button class="btn btn-outline-secondary" disabled>Disabled</button>
31  </div>
32</div>

More Buttons snippets

Pure CSS Neon Button

Add a button to your UI with Pure CSS Neon Button. Free Bootstrap 5 code — HTML & CSS ready to copy, MIT licensed.

ButtonsView →

Firework Animation on Button Click

Firework Animation on Button Click — a free Bootstrap 5 button snippet. Copy the HTML, CSS & JS and paste straight into your Bootstrap 5 project.

ButtonsView →

Pure CSS Pulsing Button ripple effect animation

Pure CSS Pulsing Button ripple effect animation: a hand-crafted, open-source Bootstrap 5 button. HTML & CSS included, ready to copy.

ButtonsView →

Comments(0)

No comments yet — be the first to start the discussion.

1<div class="container py-4"> 2  3 <div class="d-flex flex-wrap gap-2 mb-3"> 4 <button class="btn btn-primary">Primary</button> 5 <button class="btn btn-secondary">Secondary</button> 6 <button class="btn btn-success">Success</button> 7 <button class="btn btn-danger">Danger</button> 8 <button class="btn btn-warning">Warning</button> 9 <button class="btn btn-info text-white">Info</button> 10 </div> 11  12 <div class="d-flex flex-wrap gap-2 mb-3"> 13 <button class="btn btn-outline-primary">Outline Primary</button> 14 <button class="btn btn-outline-secondary">Outline Secondary</button> 15 <button class="btn btn-outline-success">Outline Success</button> 16 <button class="btn btn-outline-danger">Outline Danger</button> 17 </div> 18  19 <div class="d-flex flex-wrap align-items-center gap-2 mb-3"> 20 <button class="btn btn-primary rounded-pill btn-sm">Small Pill</button> 21 <button class="btn btn-primary rounded-pill">Medium Pill</button> 22 <button class="btn btn-primary rounded-pill btn-lg">Large Pill</button> 23 </div> 24  25 <div class="d-flex gap-2"> 26 <button class="btn btn-primary" type="button" disabled> 27 <span class="spinner-border spinner-border-sm me-2" role="status"></span> 28 Loading... 29 </button> 30 <button class="btn btn-outline-secondary" disabled>Disabled</button> 31 </div> 32</div>