{% extends "partials/base.html" %} {% load static %} {% block title %}Badges{% endblock title %} {% block extra_css %} {% endblock extra_css %} {% block pagetitle %} {% include "partials/page-title.html" with pagetitle="Base UI" title="Badges" %} {% endblock pagetitle %} {% block content %}
A simple labeling component. Badges scale to match the size of the immediate parent element by using
relative font sizing and em
units.
Use the .rounded-pill
modifier class to make badges more rounded.
Use the .bg-*-subtle text-*
modifier class to make badges lighten.
Using the .badge-outline-*
to quickly create a bordered badges.
Add any of the below mentioned modifier classes to change the appearance of a badge.
Badge can be more contextual as well. Just use regular convention e.g. badge-*color
,
bg-primary
to have badge with different background.
Using the .bg-*-subtle text-*
modifier class, you can have more soften variation.
Using the .badge-outline-*
to quickly create a bordered badges.
Use utilities to modify a .badge
and position it in the corner of a
link or button.