Back
Dark Mode

Bootstrap buttons examples. version > 4

Bootsrap buttons style

<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-link">Link</button>

Outline buttons

<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-light">Light</button>
<button type="button" class="btn btn-outline-dark">Dark</button>

Button tags

Link
<a class="btn btn-primary" href="#" role="button">Link</a>
<button class="btn btn-primary" type="submit">Button</button>
<input class="btn btn-primary" type="button" value="Input">
<input class="btn btn-primary" type="submit" value="Submit">
<input class="btn btn-primary" type="reset" value="Reset">

Buttons size

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

Buttons full width

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

Button group

<div class="btn-group" role="group" aria-label="Basic example">
	<button type="button" class="btn btn-primary">Left</button>
	<button type="button" class="btn btn-primary">Middle</button>
	<button type="button" class="btn btn-primary">Right</button>
</div>

Button group vertical

<div class="btn-group-vertical" role="group" aria-label="Basic example">
	<button type="button" class="btn btn-primary">Top</button>
	<button type="button" class="btn btn-primary">Middle</button>
	<button type="button" class="btn btn-primary">Bottom</button>
</div>

Button disabled state

Link
<a class="btn btn-primary disabled" href="#" role="button">Link</a>
<button class="btn btn-primary" type="submit" disabled>Button</button>
<input class="btn btn-primary" type="button" value="Input" disabled>
<input class="btn btn-primary" type="submit" value="Submit" disabled>
<input class="btn btn-primary" type="reset" value="Reset" disabled>