Bootstrap 5 Learning Kit

   Copy to clipboard

   Open in CodePen

<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>

   Copy to clipboard

   Open in CodePen

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

   Copy to clipboard

   Open in CodePen

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

   Copy to clipboard

   Open in CodePen

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

   Copy to clipboard

   Open in CodePen

<button type="button" class="btn btn-secondary btn-sm">Small</button>
<button type="button" class="btn btn-secondary">Default</button>
<button type="button" class="btn btn-secondary btn-lg">Large</button>

   Copy to clipboard

   Open in CodePen

<h4 class="h5 text-muted mt-3">Full width using sizing utility</h4>
<button type="button" class="btn btn-secondary w-100">Block button</button>
<h4 class="h5 text-muted mt-3">Full width using display utility</h4>
<div class="d-grid">
  <button type="button" class="btn btn-secondary">Block button</button>
</div>
<h4 class="h5 text-muted mt-3">Column width</h4>
<div class="d-grid col-6 mx-auto">
  <button type="button" class="btn btn-secondary">Block button</button>
</div>
<h4 class="h5 text-muted mt-3">Multiple block buttons</h4>
<div class="d-grid gap-2">
  <button type="button" class="btn btn-secondary">Block button</button>
  <button type="button" class="btn btn-secondary">Block button</button>
</div>
<h4 class="h5 text-muted mt-3">Responsive</h4>
<div class="d-grid gap-2 d-lg-block">
  <button type="button" class="btn btn-secondary">Block button</button>
  <button type="button" class="btn btn-secondary">Block button</button>
</div>

   Copy to clipboard

   Open in CodePen

<h4 class="h5 text-muted mt-3">Active</h4>
<button type="button" class="btn btn-primary">Not active</button>
<button type="button" class="btn btn-primary active">Active</button>
<h4 class="h5 text-muted mt-3">Disabled</h4>
<button type="button" class="btn btn-primary" disabled="">Disabled button</button>
<a class="btn btn-secondary disabled" tabindex="-1" role="button" aria-disabled="true">Disabled link</a>

   Copy to clipboard

   Open in CodePen

<h4 class="h5 text-muted mt-3">Toggle buttons</h4>
<button type="button" class="btn btn-primary" data-bs-toggle="button" autocomplete="off">Not active</button>
<button type="button" class="btn btn-primary active" data-bs-toggle="button" autocomplete="off" aria-pressed="true">Active</button>
<button type="button" class="btn btn-primary" data-bs-toggle="button" autocomplete="off" disabled="">Disabled</button>
<h4 class="h5 text-muted mt-3">Toggle links</h4>
<a href="#" class="btn btn-primary" role="button" data-bs-toggle="button">Not active</a>
<a href="#" class="btn btn-primary active" role="button" data-bs-toggle="button" aria-pressed="true">Active</a>
<a href="#" class="btn btn-primary disabled" role="button" data-bs-toggle="button">Disabled</a>