Buttonsv4.x
Buttons foreground important features, functions or calls to action.
Standard Buttons
Split & Dropdown Buttons
Outlined Buttons
Links
Link as ButtonInput Buttons
Button Sizes
<!-- Standard Buttons ----------------------->
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>
<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-secondary">Secondary</button>
<button type="button" class="btn btn-outline-success">Success</button>
<button type="button" class="btn btn-outline-danger">Danger</button>
<button type="button" class="btn btn-outline-warning">Warning</button>
<button type="button" class="btn btn-outline-info">Info</button>
<button type="button" class="btn btn-outline-dark">Dark</button>
<!-- Dropdown Button -->
<div class="btn-group" role="group">
<button id="btnGroupDrop1" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown Buttton
</button>
<div class="dropdown-menu" aria-labelledby="btnGroupDrop1">
<a class="dropdown-item" href="#">Sub-button</a>
<a class="dropdown-item active" href="#">Active Sub-button</a>
<a class="dropdown-item" href="#">Sub-button</a>
</div>
</div>
<!-- Split Button -->
<div class="btn-group">
<button type="button" class="btn btn-secondary">Split Button</button>
<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Sub-button</a>
<a class="dropdown-item" href="#">Sub-button</a>
<a class="dropdown-item" href="#">Sub-button</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Sub-button</a>
</div>
</div>
<!-- Links ----------------------->
<button type="button" class="btn btn-link">Button as Link </button>
<a class="btn btn-primary" href="#" role="button">Link as Button</a>
<!-- Input Buttons ----------------------->
<input class="btn btn-primary" type="submit" value="Submit">
<input class="btn btn-link" type="reset" value="Reset">
<!-- Button Sizes ----------------------->
<button type="button" class="btn btn-primary btn-sm">Small button</button>
<button type="button" class="btn btn-primary">Regular button</button>
<button type="button" class="btn btn-primary btn-lg">Large button</button>
<br><br>
<button type="button" class="btn btn-primary btn-lg btn-block">Full-width button</button>