<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
Last updated
Was this helpful?
Was this helpful?
<button type="button" class="btn btn-success">Success</button><button type="button" class="btn btn-warning">Warning</button><button type="button" class="btn btn-danger">Danger</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><a class="btn btn-primary" href="javascript:void(0)" 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"><button type="button" class="btn btn-primary btn-lg">Large button</button><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-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 type="button" class="btn btn-primary btn-block">Block level button</button><button type="button" class="btn btn-secondary active">Default Button</button><a href="javascript:void(0)" class="btn btn-primary active" role="button" aria-pressed="true">Primary link</a><button type="button" class="btn btn-primary" disabled="">Primary buttonD</button><a href="javascript:void(0)" class="btn btn-secondary disabled" tabindex="-1" role="button" aria-disabled="true">Link</a><span class="btn-group-toggle" data-toggle="buttons">
<label class="btn btn-secondary">
<input type="checkbox" checked=""> Checked
</label>
</span><span class="btn-group-toggle" data-toggle="buttons">
<label class="btn btn-outline-primary">
<input type="checkbox"> Unchecked
</label>
</span><div class="btn-group btn-group-toggle" data-toggle="buttons">
<label class="btn btn-primary"> <input type="radio" name="options" id="option1">
Radio
</label>
<label class="btn btn-primary active"> <input type="radio" name="options" id="option2" checked=""> Active
</label>
<label class="btn btn-primary"> <input type="radio" name="options" id="option3">
Radio
</label>
</div><div class="btn-group btn-group-toggle" data-toggle="buttons">
<label class="btn btn-outline-secondary"> <input type="radio" name="options" id="option4"> Radio
</label>
<label class="btn btn-outline-secondary active">
<input type="radio" name="options" id="option5" checked=""> Active
</label>
<label class="btn btn-outline-secondary"> <input type="radio" name="options" id="option6"> Radio
</label>
</div><button type="button" class="btn btn-primary active" data-toggle="button" aria-pressed="true">
Single toggle
</button><button type="button" class="btn btn-outline-secondary" data-toggle="button" aria-pressed="false">
Single toggle
</button>