Buttons

Default Buttons

Primary
Secondary
Success
Warning
Danger
Info
Light
Dark
Link
1
<button type="button" class="btn btn-primary">Primary</button>
Copied!
1
<button type="button" class="btn btn-secondary">Secondary</button>
Copied!
1
<button type="button" class="btn btn-success">Success</button>
Copied!
1
<button type="button" class="btn btn-warning">Warning</button>
Copied!
1
<button type="button" class="btn btn-danger">Danger</button>
Copied!
1
<button type="button" class="btn btn-info">Info</button>
Copied!
1
<button type="button" class="btn btn-light">Light</button>
Copied!
1
<button type="button" class="btn btn-dark">Dark</button>
Copied!
1
<button type="button" class="btn btn-link">Link</button>
Copied!

Button Types

Link
Button
Input
Submit
Reset
1
<a class="btn btn-primary" href="javascript:void(0)" role="button">Link</a>
Copied!
1
<button class="btn btn-primary" type="submit">Button</button>
Copied!
1
<input class="btn btn-primary" type="button" value="Input">
Copied!
1
<input class="btn btn-primary" type="submit" value="Submit">
Copied!
1
<input class="btn btn-primary" type="reset" value="Reset">
Copied!

Button With Different Sizes

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

Outline Buttons

Primary
Secondary
Success
Danger
Warning
Info
Light
Dark
1
<button type="button" class="btn btn-outline-primary">Primary</button>
Copied!
1
<button type="button" class="btn btn-outline-secondary">Secondary</button>
Copied!
1
<button type="button" class="btn btn-outline-success">Success</button>
Copied!
1
<button type="button" class="btn btn-outline-danger">Danger</button>
Copied!
1
<button type="button" class="btn btn-outline-warning">Warning</button>
Copied!
1
<button type="button" class="btn btn-outline-info">Info</button>
Copied!
1
<button type="button" class="btn btn-outline-light">Light</button>
Copied!
1
<button type="button" class="btn btn-outline-dark">Dark</button>
Copied!

Block Level Buttons

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

Button States

Active Button
Active Link
Disabled Button
Disabled Link
1
<button type="button" class="btn btn-secondary active">Default Button</button>
Copied!
1
<a href="javascript:void(0)" class="btn btn-primary active" role="button" aria-pressed="true">Primary link</a>
Copied!
1
<button type="button" class="btn btn-primary" disabled="">Primary buttonD</button>
Copied!
1
<a href="javascript:void(0)" class="btn btn-secondary disabled" tabindex="-1" role="button" aria-disabled="true">Link</a>
Copied!

Checkbox Buttons

Checked
Unchecked
1
<span class="btn-group-toggle" data-toggle="buttons">
2
<label class="btn btn-secondary">
3
<input type="checkbox" checked=""> Checked
4
</label>
5
</span>
Copied!
1
<span class="btn-group-toggle" data-toggle="buttons">
2
<label class="btn btn-outline-primary">
3
<input type="checkbox"> Unchecked
4
</label>
5
</span>
Copied!

Radio Buttons

Default
Outline
1
<div class="btn-group btn-group-toggle" data-toggle="buttons">
2
<label class="btn btn-primary"> <input type="radio" name="options" id="option1">
3
Radio
4
</label>
5
<label class="btn btn-primary active"> <input type="radio" name="options" id="option2" checked=""> Active
6
</label>
7
<label class="btn btn-primary"> <input type="radio" name="options" id="option3">
8
Radio
9
</label>
10
</div>
Copied!
1
<div class="btn-group btn-group-toggle" data-toggle="buttons">
2
<label class="btn btn-outline-secondary"> <input type="radio" name="options" id="option4"> Radio
3
</label>
4
<label class="btn btn-outline-secondary active">
5
<input type="radio" name="options" id="option5" checked=""> Active
6
</label>
7
<label class="btn btn-outline-secondary"> <input type="radio" name="options" id="option6"> Radio
8
</label>
9
</div>
Copied!

Toggle States

Default
Outline
1
<button type="button" class="btn btn-primary active" data-toggle="button" aria-pressed="true">
2
Single toggle
3
</button>
Copied!
1
<button type="button" class="btn btn-outline-secondary" data-toggle="button" aria-pressed="false">
2
Single toggle
3
</button>
Copied!
Last modified 1yr ago