Login Logout
Jump to: navigation, search

Bootstrap Buttons

Including what must be the largest collection of wiki buttons

Default

Default
Default
Default
Default
Default
<div type="button" class="btn btn-default"><i class="fa fa-folder-open"></i> Default</div>
<div type="button" class="btn btn-default btn-sm"><i class="fa fa-folder-open"></i> Default</div>
<div type="button" class="btn btn-default btn-xs"><i class="fa fa-folder-open"></i> Default</div>
<div type="button" class="btn btn-default btn-lg"><i class="fa fa-folder-open"></i> Default</div>
<div type="button" class="btn btn-default disabled"><i class="fa fa-folder-open"></i> Default</div>

Primary

Primary
Primary
Primary
Primary
Primary
<div type="button" class="btn btn-primary"><i class="fa fa-folder-open"></i> Primary</div>
<div type="button" class="btn btn-primary btn-sm"><i class="fa fa-folder-open"></i> Primary</div>
<div type="button" class="btn btn-primary btn-xs"><i class="fa fa-folder-open"></i> Primary</div>
<div type="button" class="btn btn-primary btn-lg"><i class="fa fa-folder-open"></i> Primary</div>
<div type="button" class="btn btn-primary disabled"><i class="fa fa-folder-open"></i> Primary</div>

Light

Light
Light
Light
Light
Light
<div type="button" class="btn btn-light"><i class="fa fa-folder-open"></i> Light</div>
<div type="button" class="btn btn-light btn-sm"><i class="fa fa-folder-open"></i> Light</div>
<div type="button" class="btn btn-light btn-xs"><i class="fa fa-folder-open"></i> Light</div>
<div type="button" class="btn btn-light btn-lg"><i class="fa fa-folder-open"></i> Light</div>
<div type="button" class="btn btn-light disabled"><i class="fa fa-folder-open"></i> Light</div>

Lighter

Lighter
Lighter
Lighter
Lighter
Lighter
<div type="button" class="btn btn-lighter"><i class="fa fa-folder-open"></i> Lighter</div>
<div type="button" class="btn btn-lighter btn-sm"><i class="fa fa-folder-open"></i> Lighter</div>
<div type="button" class="btn btn-lighter btn-xs"><i class="fa fa-folder-open"></i> Lighter</div>
<div type="button" class="btn btn-lighter btn-lg"><i class="fa fa-folder-open"></i> Lighter</div>
<div type="button" class="btn btn-lighter disabled"><i class="fa fa-folder-open"></i> Lighter</div>

Dark

Default
Dark
Dark
Dark
Dark
<div type="button" class="btn btn-dark"><i class="fa fa-folder-open"></i> Default</div>
<div type="button" class="btn btn-dark btn-sm"><i class="fa fa-folder-open"></i> Dark</div>
<div type="button" class="btn btn-dark btn-xs"><i class="fa fa-folder-open"></i> Dark</div>
<div type="button" class="btn btn-dark btn-lg"><i class="fa fa-folder-open"></i> Dark</div>
<div type="button" class="btn btn-dark disabled"><i class="fa fa-folder-open"></i> Dark</div>

Darker

Darker
Darker
Darker
Darker
Darker
<div type="button" class="btn btn-darker"><i class="fa fa-folder-open"></i> Darker</div>
<div type="button" class="btn btn-darker btn-sm"><i class="fa fa-folder-open"></i> Darker</div>
<div type="button" class="btn btn-darker btn-xs"><i class="fa fa-folder-open"></i> Darker</div>
<div type="button" class="btn btn-darker btn-lg"><i class="fa fa-folder-open"></i> Darker</div>
<div type="button" class="btn btn-darker disabled"><i class="fa fa-folder-open"></i> Darker</div>

Neutral

Neutral
Neutral
Neutral
Neutral
Neutral
<div type="button" class="btn btn-neutral"><i class="fa fa-folder-open"></i> Neutral</div>
<div type="button" class="btn btn-neutral btn-sm"><i class="fa fa-folder-open"></i> Neutral</div>
<div type="button" class="btn btn-neutral btn-xs"><i class="fa fa-folder-open"></i> Neutral</div>
<div type="button" class="btn btn-neutral btn-lg"><i class="fa fa-folder-open"></i> Neutral</div>
<div type="button" class="btn btn-neutral disabled"><i class="fa fa-folder-open"></i> Neutral</div>

Neutral Light

Neutral Light
Neutral Light
Neutral Light
Neutral Light
Neutral Light
<div type="button" class="btn btn-neutral-light"><i class="fa fa-folder-open"></i> Neutral Light</div>
<div type="button" class="btn btn-neutral-light btn-sm"><i class="fa fa-folder-open"></i> Neutral Light</div>
<div type="button" class="btn btn-neutral-light btn-xs"><i class="fa fa-folder-open"></i> Neutral Light</div>
<div type="button" class="btn btn-neutral-light btn-lg"><i class="fa fa-folder-open"></i> Neutral Light</div>
<div type="button" class="btn btn-neutral-light disabled"><i class="fa fa-folder-open"></i> Neutral Light</div>

Success

Success
Success
Success
Success
Success
<div type="button" class="btn btn-success"><i class="fa fa-folder-open"></i> Success</div>
<div type="button" class="btn btn-success btn-sm"><i class="fa fa-folder-open"></i> Success</div>
<div type="button" class="btn btn-success btn-xs"><i class="fa fa-folder-open"></i> Success</div>
<div type="button" class="btn btn-success btn-lg"><i class="fa fa-folder-open"></i> Success</div>
<div type="button" class="btn btn-success disabled"><i class="fa fa-folder-open"></i> Success</div>

Info

Info
Info
Info
Info
Info
<div type="button" class="btn btn-info"><i class="fa fa-folder-open"></i> Info</div>
<div type="button" class="btn btn-info btn-sm"><i class="fa fa-folder-open"></i> Info</div>
<div type="button" class="btn btn-info btn-xs"><i class="fa fa-folder-open"></i> Info</div>
<div type="button" class="btn btn-info btn-lg"><i class="fa fa-folder-open"></i> Info</div>
<div type="button" class="btn btn-info disabled"><i class="fa fa-folder-open"></i> Info</div>

Warning

Warning
Warning
Warning
Warning
Warning
<div type="button" class="btn btn-warning"><i class="fa fa-folder-open"></i> Warning</div>
<div type="button" class="btn btn-warning btn-sm"><i class="fa fa-folder-open"></i> Warning</div>
<div type="button" class="btn btn-warning btn-xs"><i class="fa fa-folder-open"></i> Warning</div>
<div type="button" class="btn btn-warning btn-lg"><i class="fa fa-folder-open"></i> Warning</div>
<div type="button" class="btn btn-warning disabled"><i class="fa fa-folder-open"></i> Warning</div>

Danger

Danger
Danger
Danger
Danger
Danger
<div type="button" class="btn btn-danger"><i class="fa fa-folder-open"></i> Danger</div>
<div type="button" class="btn btn-danger btn-sm"><i class="fa fa-folder-open"></i> Danger</div>
<div type="button" class="btn btn-danger btn-xs"><i class="fa fa-folder-open"></i> Danger</div>
<div type="button" class="btn btn-danger btn-lg"><i class="fa fa-folder-open"></i> Danger</div>
<div type="button" class="btn btn-danger disabled"><i class="fa fa-folder-open"></i> Danger</div>

Links and color

Add a link to the button thus (note the span style which adds a color to the URL text);

<div class="btn btn-default">[[Bootstrap_Components|<span style="color:#fff">Bootstrap Components</span>]]</div>

Rate us!

Did you find this article useful? Why not rate it?