include buttons
.button-primary + .button-secondary
A primary button is commonly used for a user action; a secondary button may then be used to close out.
<button type=”button” class=”btn btn-primary”>Primary</button>
<button type=”button” class=”btn btn-secondary”>Secondary</button>
.btn-light, -dark .btn-primary, -secondary, -transparent, -white,
-warning, -success, -info, -danger
Design your buttons using the standard predefined styling options:
<button type=”button” class=”btn btn-light”>Light</button>
<button type=”button” class=”btn btn-dark”>Dark</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-danger”>Danger</button>
<button type=”button” class=”btn btn-warning”>Warning</button>
<button type=”button” class=“button-transparent”>Transparent</button>
<button type=”button” class=“button-white”>White</button>
.btn-outline
Choose a button outline following these snippet samples:
<button type=”button” class=”btn btn-outline-primary”>Primary</button>
.btn-lg + .btn-sm
Change the size of your buttons.
<button type=”button” class=”btn btn-primary btn-lg”>I’m the large button</button>
<button type=”button” class=”btn btn-primary btn-sm”>I’m a small button</button>
.btn-block
Group your buttons into a block. All grouped buttons will span the full width of a parent.
<button type=”button” class=”btn btn-primary btn-lg btn-block”>Block level button</
button>
.active
By default, all buttons will be displayed as pressed - with a dark border, darker background and inset shadow - when
active.
You don’t need to add a class to <button>s as they use a pseudo-class.
But, if for some reason, you need to force that same active look, use the following code snippet:
<a href=”#!” class=”btn btn-primary btn-lg active” role=”button” ariapressed=”true”>Primary link</a>
Note: You can also add the disabled Boolean attribute to any button to make it look inactive.
<button type=”button” class=”btn btn-lg btn-primary” disabled>Disabled button</