Default
Apply .btnclass to give default styling.
.btn-primary
.btn-outline-primary
<button class="btn btn-primary mb-2">Primary</button><button class="btn btn-outline-primary mb-2">Primary</button>
Rounded
Use .btn-roundedto make buttons rounded.
<button class="btn btn-primary btn-rounded mb-2">Primary</button><button class="btn btn-outline-primary btn-rounded mb-2">Primary</button>
Solid
Apply .btn-*class followed by .btn class to create defaultbuttons.
<!-- Primary --><button class="btn btn-primary mb-2">Primary</button><!-- Info --><button class="btn btn-info mb-2">Info</button><!-- Success --><button class="btn btn-success mb-2">Success</button><!-- Warning --><button class="btn btn-warning mb-2">Warning</button><!-- Danger --><button class="btn btn-danger mb-2">Danger</button><!-- Secondary --><button class="btn btn-secondary mb-2">Secondary</button><!-- Dark --><button class="btn btn-dark mb-2">Dark</button>
Outline
Apply .btn-outline-*class followed by .btn class to create outlinebuttons.
<!-- Primary --><button class="btn btn-outline-primary mb-2">Primary</button><!-- Info --><button class="btn btn-outline-info mb-2">Info</button><!-- Success --><button class="btn btn-outline-success mb-2">Success</button><!-- Warning --><button class="btn btn-outline-warning mb-2">Warning</button><!-- Danger --><button class="btn btn-outline-danger mb-2">Danger</button><!-- Secondary --><button class="btn btn-outline-secondary mb-2">Secondary</button><!-- Dark --><button class="btn btn-outline-dark mb-2">Dark</button>
Button Sizes
<button class="btn btn-primary mb-4 mr-2 btn-lg">Large button</button><button class="btn btn-secondary mb-4 mr-2">Default button</button><button class="btn btn-warning mb-4 mr-2 btn-sm">Small button</button><button class="btn btn-dark mb-4 mr-2 btn-sm disabled">Disabled Button</button>
Button with Icons
<button class="btn btn-primary mb-2 mr-2"><svg> ... </svg> Left</button><button class="btn btn-warning mb-2 mr-2 btn-rounded">Right <svg> ... </svg></button><button class="btn btn-danger mb-2 mr-2"><svg> ... </svg></button><button class="btn btn-dark mb-2 mr-2 rounded-circle"><svg> ... </svg></button>
Block Buttons
<button class="btn btn-primary btn-block mb-4 mr-2">Button</button><input type="submit" class="btn btn-info btn-block mb-4 mr-2" value="Input"><a href="javascript:void(0);" class="btn btn-success btn-block mb-4 mr-2">Link</a>
Copyright © 2020 DesignReset, All rights Reserved .
Coded with