{% extends "pxy_dashboard/partials/base.html" %} {% load static %} {% block title %}Avatars{% endblock title %} {% block extra_css %} {% endblock extra_css %} {% block pagetitle %} {% include "pxy_dashboard/partials/page-title.html" with pagetitle="Base UI" title="Avatars" %} {% endblock pagetitle %} {% block content %}
Create and group avatars of different sizes and shapes with the css classes. Using Bootstrap's naming convention, you can control size of avatar including standard avatar, or scale it up to different sizes.
.avatar-xs
.avatar-sm
.avatar-md
.avatar-lg
.avatar-xl
Using an additional class .rounded-circle
in <img>
element creates
the rounded avatar.
.avatar-md .rounded-circle
.avatar-lg .rounded-circle
.avatar-xl .rounded-circle
Using utilities classes of background e.g. bg-*
allows you to have any background color
as well.
Using .avatar-xs
Using .avatar-sm
Using .avatar-md
Using .avatar-lg
Using .avatar-xl
Using an additional class .rounded-circle
in <img>
element creates
the rounded avatar.
Using .avatar-md .rounded-circle
Using .avatar-lg .rounded-circle
Using .avatar-xl .rounded-circle
Avatars with different sizes and shapes.
.rounded
.rounded
.rounded-circle
.img-thumbnail
.rounded-circle .img-thumbnail