Buttons

The mighty little button. Unlimited power at your fingertips!

These are the basic button flavors included with Bootstrap. ¬†For the purposes of this demo, I’ve added a little custom css to this pattern to make them automagically change to full-width at mobile screen sizes.

Live Demo

Standalone Demo

Requires

Bootstrap

Markup

<button type="button" class="btn btn-default">Default</button>
<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>

CSS

@media (max-width: 440px) {
  .btn{
    width:100%;
    margin:.2em 0;
    font-size:1.2em;
  }
}