- Elements
- Buttons
Default
Code<!-- default --> <button type="button" class="btn btn-primary">Primary</button> <!-- outline --> <button type="button" class="btn btn-outline-primary">Primary</button>
Rounded
Code<!-- default circle--> <button type="button" class="btn btn-primary rounded-full">Primary</button> <!-- outline circle --> <button type="button" class="btn btn-outline-primary rounded-full">Primary</button>
Solid
Code<!-- primary --> <button type="button" class="btn btn-primary">Primary</button> <!-- info --> <button type="button" class="btn btn-info">Info</button> <!-- success --> <button type="button" class="btn btn-success">Success</button> <!-- warning --> <button type="button" class="btn btn-warning">Warning</button> <!-- danger --> <button type="button" class="btn btn-danger">Danger</button> <!-- secondary --> <button type="button" class="btn btn-secondary">Secondary</button> <!-- dark --> <button type="button" class="btn btn-dark">Dark</button>
Outline
Code<!-- outline-primary --> <button type="button" class="btn btn-outline-primary">Primary</button> <!-- outline-info --> <button type="button" class="btn btn-outline-info">Info</button> <!-- outline-success --> <button type="button" class="btn btn-outline-success">Success</button> <!-- outline-warning --> <button type="button" class="btn btn-outline-warning">Warning</button> <!-- outline-danger --> <button type="button" class="btn btn-outline-danger">Danger</button> <!-- outline-secondary --> <button type="button" class="btn btn-outline-secondary">Secondary</button> <!-- outline-dark --> <button type="button" class="btn btn-outline-dark">Dark</button>
Button Sizes
Code<!-- large --> <button type="button" class="btn btn-primary btn-lg">Primary</button> <!-- default --> <button type="button" class="btn btn-info">Info</button> <!-- small success --> <button type="button" class="btn btn-success btn-sm">Success</button> <!-- small warning --> <button type="button" class="btn btn-warning btn-sm">Warning</button>
Button with Icons
Code
<!-- left icon -->
<button type="button" class="btn btn-primary">
<svg> ... </svg> Left
</button>
<!-- right icon -->
<button type="button" class="btn btn-warning rounded-full">
Right
<svg> ... </svg>
</button>
<!-- icon -->
<button type="button" class="btn btn-danger">
<svg> ... </svg>
</button>
<!-- circle icon -->
<button type="button" class="btn btn-dark w-10 h-10 p-0 rounded-full">
<svg> ... </svg>
</button>
Block Buttons
Code<!-- primary --> <button type="button" class="btn btn-primary w-full">Button</button> <!-- info --> <button type="button" class="btn btn-info w-full">Button</button> <!-- success --> <button type="button" class="btn btn-success w-full">Button</button>
© . Vristo All rights reserved.