Jump to: navigation, search

Bootstrapskin Buttons

Buttons

Default Buttons

default
light
lighter
dark
darker
info
success
warning
danger
neutral
neutral-light
primary
cyanide
meadow
cocktail
mango
berry
hearts
party
midnight
cello
hollow
concrete

Small Buttons

default
light
lighter
dark
darker
info
success
warning
danger
neutral
neutral-light
primary
cyanide
meadow
cocktail
mango
berry
hearts
party
midnight
cello
hollow
concrete

Extra Small Buttons

default
light
lighter
dark
darker
info
success
warning
danger
neutral
neutral-light
primary
cyanide
meadow
cocktail
mango
berry
hearts
party
midnight
cello
hollow
concrete

Disabled Class Buttons

default
light
lighter
dark
darker
info
success
warning
danger
neutral
neutral-light
primary
cyanide
meadow
cocktail
mango
berry
hearts
party
midnight
cello
hollow
concrete

Using the examples below, the main classes to take note of are "btn" which is the default css class for a button i.e. border, padding and border-radius etc and "btn-default" which is the colour of the button, which in this case is blue, but will depend on the stylesheet you are using.

Default Buttons;

<div class="btn btn-default"><i class="fa fa-exclamation-triangle"></i> [[Your Text]]</div> 

Small Buttons;

<div class="btn btn-default btn-sm"><i class="fa fa-exclamation-triangle"></i> [[Your Text]]</div>

Extra Small Buttons;

<div class="btn btn-default btn-xs"><i class="fa fa-exclamation-triangle"></i> [[Your Text]]</div> 

Large Buttons;

<div class="btn btn-default btn-lg"><i class="fa fa-exclamation-triangle"></i> [[Your Text]]</div> 

Disabled Class Buttons;

<div class="btn btn-default disabled"><i class="fa fa-exclamation-triangle"></i> [[Your Text]]</div> 

As with all aspects of Bootstrap, Buttons are highly flexible, offering numerous opportunities to customise the look and feel.

In the examples section we have listed several colours and sizes, which can be used with any of the icons.

If you view the other guides, you'll find numerous examples of how buttons can be applied to any other Bootstrap feature.

Traditional "a class" links do not work with Mediawiki, use [[]] wiki syntax with buttons when linking to internal articles and [] wiki syntax for external links.

bootstrapskin-commercial-skin.png