PHP Bootstrap Template
Take $3 OFF, with coupon code "SAVE-3"
Buy Now - Sale Price: $10
You will get a ZIP (3MB) file

Buttons -PHP Bootstrap Template - Purchase and download files instantly!!

Creating buttons with PHP Bootstrap Template!

Source codes for all the used custom button styles for actions in forms, on pages, available in multiple sizes and states.

Navigation Bars || Column Grids || Buttons || Badges & Labels || Progress Bars

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


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

Active or Disabled Buttons


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

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

Hello, this is used for informing visitors about current events. This information bar can be dismissed on click.


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

Ready to get started, or have questions? Reach out to us today!