Buttonsv4.x

Buttons foreground important features, functions or calls to action.

Bootstrap 4.x | Buttons



Standard Buttons

Split & Dropdown Buttons

Outlined Buttons

Links
Link as Button
Input 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>

This will reset the page. Are you sure?