Bootstrap Button Generator

Create online Bootstrap buttons with icon. select button style add button text and click generate code, and copy paste your website

You can add an SVG or Font Awesome icon to the Bootstrap button. You can customize the position of the icon left, right, top and bottom

Select button style
Button Width
Add icon
Icon position
When you add an icon to the button, you need to include a small CSS code in the head section of your webpage.
If you include the FontAwesome icon code in the button, you must also include the icon FontAwesome link in the head section of the webpage.
Bootstrap CSS link / Icon Link
Copy and Paste this code between the head tag
Paste this code between the body tag where you want it to appear
CSS
Paste this code between the head tag

Bootstrap Button Examples Style and Code

Bootstrap Buttons Color Style

HTML
<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>

Bootstrap Outline Buttons Color Style

HTML
<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 tags (Link, Button, Input, Submit, Reset)

Link
HTML
<a class="btn btn-primary" href="#" 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 size (Small button, Large button)

HTML
<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-primary btn-lg">Large button</button>

Button group

HTML
<div class="btn-group" role="group" aria-label="Basic example">
    <button type="button" class="btn btn-primary">Left</button>
    <button type="button" class="btn btn-primary">Middle</button>
    <button type="button" class="btn btn-primary">Right</button>
</div>

Button group vertical

HTML
<div class="btn-group-vertical" role="group" aria-label="Basic example">
    <button type="button" class="btn btn-primary">Top</button>
    <button type="button" class="btn btn-primary">Middle</button>
    <button type="button" class="btn btn-primary">Bottom</button>
</div>

Button disabled state

Link
HTML
<a class="btn btn-primary disabled" href="#" role="button">Link</a>
<button class="btn btn-primary" type="submit" disabled>Button</button>
<input class="btn btn-primary" type="button" value="Input" disabled>
<input class="btn btn-primary" type="submit" value="Submit" disabled>
<input class="btn btn-primary" type="reset" value="Reset" disabled>