Buttons

From Foundation
Jump to navigation Jump to search


Examples

Bootstrap includes several predefined button styles, each serving its own semantic purpose, with a few extras thrown in for more control.

Primary
Secondary
Success
Danger
Warning
Info
Light
Dark
<div type="button" class="btn btn-primary">Primary</div>
<div type="button" class="btn btn-secondary">Secondary</div>
<div type="button" class="btn btn-success">Success</div>
<div type="button" class="btn btn-danger">Danger</div>
<div type="button" class="btn btn-warning">Warning</div>
<div type="button" class="btn btn-info">Info</div>
<div type="button" class="btn btn-light">Light</div>
<div type="button" class="btn btn-dark">Dark</div>

Outline Buttons

In need of a button, but not the hefty background colours they bring? Replace the default modifier classes with the .btn-outline-* ones to remove all background images and colours on any button.

Primary
Secondary
Success
Danger
Warning
Info
Light
Dark
<div type="button" class="btn btn-outline-primary">Primary</div>
<div type="button" class="btn btn-outline-secondary">Secondary</div>
<div type="button" class="btn btn-outline-success">Success</div>
<div type="button" class="btn btn-outline-danger">Danger</div>
<div type="button" class="btn btn-outline-warning">Warning</div>
<div type="button" class="btn btn-outline-info">Info</div>
<div type="button" class="btn btn-outline-light">Light</div>
<div type="button" class="btn btn-outline-dark">Dark</div>

Sizes

Fancy larger or smaller buttons? Add .btn-lg or .btn-sm for additional sizes.

Large button
Large button
<div type="button" class="btn btn-primary btn-lg">Large button</div>
<div type="button" class="btn btn-secondary btn-lg">Large button</div>
Small button
Small button
<div type="button" class="btn btn-primary btn-sm">Small button</div>
<div type="button" class="btn btn-secondary btn-sm">Small button</div>

Block Level

Create block level buttons—those that span the full width of a parent—by adding .btn-block.

Block level button
Block level button
<div type="button" class="btn btn-primary btn-lg btn-block">Block level button</div>
<div type="button" class="btn btn-secondary btn-lg btn-block">Block level button</div>

Wiki Links

[[Main Page|<div type="button" class="btn btn-secondary btn-lg">Read more</div>]]

Support

Please use the discussion page to ask question on Buttons.



TOP

Retrieved from ‘https://foundationextension.com/index.php?title=Buttons&oldid=2253