Bootstrap Button Generator

Welcome to the Bootstrap Button Generator, your online tool to creating stylish and responsive buttons effortlessly! With our intuitive online tool, you can design custom buttons that seamlessly integrate into your Bootstrap-powered websites, giving them a polished and professional look.

Our generator provides instant previews, allowing you to see how your buttons will appear in real-time as you make changes. Once you're satisfied with the design, simply copy the generated code snippet and paste it into your project. It's that easy!

How to use it

The bootstrap button generator is a nifty tool that can be used to generate the necessary code for buttons on your webpage:

Enter the textEnter the text that will be used for your web button.
Choose the optionsSelect options such as: size, color, type and state of button.
Add an iconIf you would like to use an icon with the button, choose ‘Yes’ under ‘Add Icon’ to see the icon options.
Copy the codeCopy the HTML code generated into your webpage for the button to be used.
Load BootstrapObviously you will need to include the Bootstrap CSS files for the code to work.

Adding Bootstrap to your page

Put these two lines inside the <head> of your page (the second is only needed if your buttons use icons):

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">

Frequently asked questions

Do I need Bootstrap on my site for the buttons to work?

Yes. The code uses Bootstrap 5 classes, so your page must load the Bootstrap CSS. If you use icons you also need the Bootstrap Icons CSS. Both can be loaded from a CDN with a single <link> tag each.

Which Bootstrap version does it make code for?

Bootstrap 5. The preview uses Bootstrap 5.3.3 and Bootstrap Icons 1.11.3. Most of the classes also work in Bootstrap 4, but Bootstrap 4 uses a different version of the icons and the preview may look slightly different.

Should I use a button or a link?

Use a button for actions on the page, such as submitting a form or opening a dialog. Use a link when the button takes people to another page. Choose ‘Link’ as the element and enter the address.

How does the Disabled state work?

A button gets the disabled attribute, so it cannot be clicked or tabbed to. A link cannot be disabled in HTML, so it gets the disabled class, aria-disabled and tabindex="-1" instead.

What does the Active state do?

It shows the button as pressed, with the darker style Bootstrap uses while a button is held down. It also adds aria-pressed so screen readers know it is on.

Why does the Link type hide the style options?

Bootstrap’s link button has no solid or outline version, so those choices do not apply.

Is my button text sent anywhere?

No. The code is made in your browser. The preview loads Bootstrap from a public CDN, but nothing you type is sent.