Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Bootstrap badges like on shields.io
<!-- Create badges / shields like on shields.io
-- but with bootstrap.
--
-- Fully adjustable, use this for whatever you want ^^
--
-- Finn M Glas, 2020-07-06
-->
<!-- Regular badges (value-only) -->
<span class="badge text-white p-0"><span class="py-1 px-2 rounded" style="background:#007bff">value</span></span>
<!---->
<br>
<br>
<!-- Key-value-color badges -->
<span class="badge text-white p-0 m-1"><span class="bg-secondary py-1 px-2 rounded-left">key</span><span class="py-1 px-2 rounded-right" style="background:#007bff;">value</span></span>
<!---->
@finnmglas
Copy link
Author

finnmglas commented Jul 6, 2020

These badges look amazing ^^

image

The major advantage of bootstrap badges over shields badges: less requests and dependencies, less loading time.


@twbs I believe, this should be included somewhere on the https://getbootstrap.com page, as it is very useful.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment