PHP Bootstrap
A toolbox for creating mobile friendly websites!

Creating buttons with PHP Bootstrap!

Use custom button styles for actions in forms, on pages, available in multiple sizes and states.


Various Buttons

Default



<p>
      <button class="default">Button 1</button>
      <button class="default">Button 2</button>
      <button class="default">Button 3</button>
</p>

Basic



<p>
      <button class="btn">Button 1</button>
      <button class="btn">Button 2</button>
      <button class="btn">Button 3</button>
</p>

Warnings



<p>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-link">Link</button>
</p>

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>
<button type="button" class="btn btn-primary btn-xs">XSmall</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 Width Buttons



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

Dismissable Buttons



<div class="alert alert-info alert-dismissible" role="alert" align="center">
        <button type="button" class="close" data-dismiss="alert"><span aria-hidden="true"><i class="fa fa-window-close"></i>
</span><span class="sr-only">Close</span></button>
        <strong>Hello</strong>, this is used for informing visitors about current events. This information bar can be dismissed on click.
</div>

<div class="alert alert-warning alert-dismissible" role="alert" align="center">
        <button type="button" class="close" data-dismiss="alert"><span aria-hidden="true"><i class="fa fa-window-close"></i>
</span><span class="sr-only">Close</span></button>
        <strong>Hello</strong>, this is used for warning visitors about current events. This warning bar can be dismissed on click.
</div>

<div class="alert alert-danger alert-dismissible" role="alert" align="center">
        <button type="button" class="close" data-dismiss="alert"><span aria-hidden="true"><i class="fa fa-window-close"></i>
</span><span class="sr-only">Close</span></button>
        <strong>Hello</strong>, this is used for informing visitors about dangerous events. This dangerous bar can be dismissed on click.
</div>

<div class="alert alert-success alert-dismissible" role="alert" align="center">
        <button type="button" class="close" data-dismiss="alert"><span aria-hidden="true"><i class="fa fa-window-close"></i>
</span><span class="sr-only">Close</span></button>
        <strong>Hello</strong>, this is used for informing visitors about successful events. This success bar can be dismissed on click.
</div>