{% extends "partials/base.html" %} {% load static %} {% block title %}Avatars{% endblock title %} {% block extra_css %} {% endblock extra_css %} {% block pagetitle %} {% include "partials/page-title.html" with pagetitle="Base UI" title="Avatars" %} {% endblock pagetitle %} {% block content %}

Sizing - Images

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.

image

.avatar-xs

image

.avatar-sm

image

.avatar-md

image

.avatar-lg

image

.avatar-xl

Rounded Circle

Using an additional class .rounded-circle in <img> element creates the rounded avatar.

image

.avatar-md .rounded-circle

image

.avatar-lg .rounded-circle

image

.avatar-xl .rounded-circle

Sizing - Background Color

Using utilities classes of background e.g. bg-* allows you to have any background color as well.

xs

Using .avatar-xs

sm

Using .avatar-sm

MD

Using .avatar-md

LG

Using .avatar-lg

XL

Using .avatar-xl

Rounded Circle Background

Using an additional class .rounded-circle in <img> element creates the rounded avatar.

MD

Using .avatar-md .rounded-circle

LG

Using .avatar-lg .rounded-circle

XL

Using .avatar-xl .rounded-circle

Images Shapes

Avatars with different sizes and shapes.

image

.rounded

image

.rounded

image

.rounded-circle

image

.img-thumbnail

image

.rounded-circle .img-thumbnail

Avatar Group

Use avatar-group class to show avatar images with the group. Use avatar-group class with data-bs-toggle="tooltip" to show avatar group images with tooltip.

{% endblock content %} {% block extra_js %} {% endblock extra_js %}