Search
Search

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-link">Link</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" value="Input" type="button">
<input class="btn btn-primary" value="Submit" type="submit">
<input class="btn btn-primary" value="Reset" type="reset">

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>

Sizes

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

Active state

<a href="#" class="btn btn-primary btn-lg active" role="button" aria-pressed="true">Primary link</a>
<a href="#" class="btn btn-secondary btn-lg active" role="button" aria-pressed="true">Link</a>

Disabled state

<button type="button" class="btn btn-lg btn-primary" disabled="">Primary button</button>
<button type="button" class="btn btn-secondary btn-lg" disabled="">Button</button>
<a href="#" class="btn btn-primary btn-lg disabled" role="button" aria-disabled="true">Primary link</a>
<a href="#" class="btn btn-secondary btn-lg disabled" role="button" aria-disabled="true">Link</a>

Toggle states

<button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false" autocomplete="off">Single toggle</button>

Checkbox and radio buttons

<div class="btn-group" data-toggle="buttons">
	<label class="btn btn-secondary">
		<input checked="" autocomplete="off" type="checkbox"> Checkbox 1 (pre-checked)
	</label>
	<label class="btn btn-secondary">
		<input autocomplete="off" type="checkbox"> Checkbox 2
	</label>
	<label class="btn btn-secondary">
		<input autocomplete="off" type="checkbox"> Checkbox 3
	</label>
</div>
<div class="btn-group" data-toggle="buttons">
	<label class="btn btn-secondary active">
		<input name="options" id="option1" autocomplete="off" checked="" type="radio"> Radio 1 (preselected)
	</label>
	<label class="btn btn-secondary">
		<input name="options" id="option2" autocomplete="off" type="radio"> Radio 2
	</label>
	<label class="btn btn-secondary">
		<input name="options" id="option3" autocomplete="off" type="radio"> Radio 3
	</label>
</div>

Methods

Method Description
$().button('toggle') Toggles push state. Gives the button the appearance that it has been activated.
$().button('dispose') Destroys an element’s button.
GET SOCIAL
ABOUT US

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Back To Top