Bootstrap 4 badge element?

[TwitchBlade]

Morning all,

I am loving Wappler so far. As someone who has hand coded many custom databases, I don’t think I’ve ever had this much fun developing. I plan on purchasing as soon as my trial ends.

So to my question, I’m simply trying to add a bootstrap 4 badge but I can’t find a badge element anywhere. Is this not possible? Is “make badge” perhaps a setting on another element that I’m not seeing? I couldn’t find anything searching here.

Thanks in advance,
Twitch

[TomD]

I’m not sure if the options appear in other situations too, but if you create a button and select it, you should see:

[TwitchBlade]

Thanks for the quick reply, @TomD. I’ll have a look when I get back to my computer. I’m guessing that setting creates a badge within the button label and you can disable the button and remove any text from the label.

Thanks again!

[max_gb]

Tom is correct, you can create an ‘anchor’ Badge by using the button component.

If it doesn’t need to link to anything then you can just handcode a static bade component:

<span class="badge badge-primary">Primary</span>

I believe Bootstrap 5 will also use the same classes for badges.

[TomD]

@TwitchBlade

you can disable the button and remove any text from the label.

I’m sure you can do all of this. Eg this is probably a typical example - the button’s appearance and the badge value are dynamic, just using the Wappler UI:

[TwitchBlade]

Thanks, @max_gb, I’ll probably just end up doing that as I’ve been hand coding Bootstrap for years, just figured I’d use the UI as much as possible.

I’ll also look into @TomD’s solution as well.

[TwitchBlade]

I ended up using a link and put the badge style on it. I also needed it to change dynamically so I added a few toggle class with conditionals. Works well! Thank ya’ll!