Bootstrap 4 Button Code Generator

This interactive generator preserves the original Bootstrap 4 button builder: choose a style, optional outline, size, block-level behavior, width/height utility and button text, then copy the generated HTML.

How the Generator Works Top ↑

The preview is created as a real button element, while the generated markup is displayed as text. User-entered button text is never concatenated into raw HTML for the preview.

function updateButtonPreview() {
    const $button = $( "<button>", {
        type: "button",
        id: "b1",
        text: $( "#button-text" ).val()
    });

    $button.addClass(
        buildButtonClasses()
    );

    $( "#button-preview" )
        .empty()
        .append( $button );

    $( "#button-code" ).text(
        $button.prop( "outerHTML" )
    );
}

Bootstrap 4 Notes Top ↑

• btn-xs is not a Bootstrap 4 size class, so the generator uses default, btn-sm, and btn-lg.
• btn-block is kept because this generator is explicitly for Bootstrap 4.
• Outline variants are generated as btn-outline-primary, btn-outline-success, and so on. The btn-link style is left unchanged.
• Width and height selections use Bootstrap 4 sizing utilities such as w-100 and h-75.

← Bootstrap tutorials Buttons & jQuery →

Subhendu Mohapatra

Author & Instructor at plus2net

I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.

About the author   Watch on YouTube

Connect: