Bootstrap Badge Generator

Create Bootstrap 4 badge markup by choosing a contextual style, pill shape and text. The preview and generated code update automatically.

Generator Logic Top ↑

function updateBadge() {
    const classes = [
        "badge",
        "badge-" + $( "#badge-style" ).val()
    ];

    if ( $( "#badge-pill" ).prop( "checked" ) ) {
        classes.push( "badge-pill" );
    }

    const $badge = $( "<span>", {
        class: classes.join( " " ),
        text: $( "#badge-text" ).val()
    });

    $( "#badge-preview" ).empty().append( $badge );
    $( "#badge-code" ).text( $badge.prop( "outerHTML" ) );
}

Additional Original Learning Routes Top ↑

• bs-badges.php
• bs-label-generator.php

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: