PHP Bootstrap

      PHP Bootstrap 5
A toolbox for creating mobile friendly websites!


Your "Source Code" Resource for PHP and Bootstrap Development

Start Here Basic Page Setup || Navigation Bars || Column Grids || Buttons || Modal Generators || Bootstrap Icons || Badges & Labels || Progress Bars || Themes || Plugins

Buttons - PHP Bootstrap 5 - A toolbox for creating mobile friendly websites!

Mouse over and click for source code of a button or badge. Use custom button styles for actions in forms, on pages, available in multiple sizes and states.

Info Badge Success Badge Danger Badge Warning Badge Light Badge Dark Badge Primary Badge Secondary Badge Info Label Info Badge Success Badge Danger Badge Warning Badge Light Badge Dark Badge Primary Badge Secondary Badge Info Label Info Badge Success Badge Danger Badge Warning Badge Light Badge Dark Badge Primary Badge Secondary Badge Info Label Info Badge Success Badge Danger Badge Warning Badge Light Badge Dark Badge Primary Badge Secondary Badge Info Label

Various Buttons

Default



<div class="btn" aria-label="Basic button example">
      <button type="button">Button 1</button>
      <button type="button">Button 2</button>
      <button type="button">Button 3</button>
</div>

Button Group



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

Warnings



<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-link">Link</button>

Sizes



<button type="button" class="btn btn-primary btn-lg">Large</button>
<button type="button" class="btn btn-primary btn-md">Medium</button>
<button type="button" class="btn btn-primary btn-sm">Small</button>

Active or Disabled Buttons



<button type="button" class="btn btn-warning active">Active Warning</button>
<button type="button" class="btn btn-warning disabled">Disabled Warning</button>

Badges

Primary Secondary Success Danger Warning Info Light Dark 

<span class="badge bg-primary">Primary</span>
<span class="badge bg-secondary">Secondary</span>
<span class="badge bg-success">Success</span>
<span class="badge bg-danger">Danger</span>
<span class="badge bg-warning text-dark">Warning</span>
<span class="badge bg-info text-dark">Info</span>
<span class="badge bg-light text-dark">Light</span>
<span class="badge bg-dark">Dark</span>

Full Container Width Buttons


<div class="d-grid gap-2">
<button type="button" class="btn btn-primary btn-block">Button 1</button> 
<button type="button" class="btn btn-success btn-block">Button 2</button> 
<button type="button" class="btn btn-info btn-block">Button 3</button> 
<button type="button" class="btn btn-warning btn-block">Button 4</button> 
<button type="button" class="btn btn-danger btn-block">Button 5</button> 
<button type="button" class="btn btn-link btn-block">Button 6</button> 
</div>

Dismissable Buttons



<div class="alert alert-warning alert-dismissible fade show" role="alert">
  <center><strong>Hello</strong>, this is used for informing visitors about current events. This information bar can be dismissed on click.</center>
  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>

<div class="alert alert-info alert-dismissible fade show" role="alert">
  <center><strong>Hello</strong>, this is used for informing visitors about current events. This information bar can be dismissed on click.</center>
  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>

<div class="alert alert-danger alert-dismissible fade show" role="alert">
  <center><strong>Hello</strong>, this is used for informing visitors about current events. This information bar can be dismissed on click.</center>
  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>

<div class="alert alert-success alert-dismissible fade show" role="alert">
  <center><strong>Hello</strong>, this is used for informing visitors about current events. This information bar can be dismissed on click.</center>
  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>