{% extends 'layouts/base_background.html' %} {% load static %} {% block title %} Material Kit 2 by Creative Tim {% endblock title %} {% block body %} class="avatars-sections" {% endblock body %} {% block header %} {% include 'includes/navigation_light.html' %} {% endblock header %} {% block content %}

Avatars

Avatar Group

Copy 
<div class="container py-6">
  <div class="row mt-5 text-center">
    <div class="col-12">
      <div class="avatar-group">
        <a href="javascript:;" class="avatar avatar-lg rounded-circle" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Ryan Tompson">
          <img alt="Image placeholder" src="{% static 'img/team-1.jpg' %}">
        </a>
        <a href="javascript:;" class="avatar avatar-lg rounded-circle" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Romina Hadid">
          <img alt="Image placeholder" src="{% static 'img/team-2.jpg' %}">
        </a>
        <a href="javascript:;" class="avatar avatar-lg rounded-circle" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Alexander Smith">
          <img alt="Image placeholder" src="{% static 'img/team-3.jpg' %}">
        </a>
        <a href="javascript:;" class="avatar avatar-lg rounded-circle" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Jessica Doe">
          <img alt="Image placeholder" src="{% static 'img/team-4.jpg' %}">
        </a>
      </div>
    </div>
  </div>
</div>



<!-- initialization script for tooltips -->
<script>
  var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
  var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
    return new bootstrap.Tooltip(tooltipTriggerEl)
  })
</script>

Avatar Size

Copy 
<div class="container py-6">
  <div class="row mt-5 text-center">
    <div class="col-12">
      <a href="javascript:;" class="avatar avatar-xs rounded-circle">
        <img alt="Image placeholder" src="{% static 'img/team-4.jpg' %}">
      </a>
      <a href="javascript:;" class="avatar avatar-sm rounded-circle">
        <img alt="Image placeholder" src="{% static 'img/team-4.jpg' %}">
      </a>
      <a href="javascript:;" class="avatar rounded-circle">
        <img alt="Image placeholder" src="{% static 'img/team-4.jpg' %}">
      </a>
      <a href="javascript:;" class="avatar avatar-lg rounded-circle">
        <img alt="Image placeholder" src="{% static 'img/team-4.jpg' %}">
      </a>
      <a href="javascript:;" class="avatar avatar-xl rounded-circle">
        <img alt="Image placeholder" src="{% static 'img/team-4.jpg' %}">
      </a>
    </div>
  </div>
</div>
{% endblock content %} {% block footer %} {% include 'includes/footer_fullscreen.html' %} {% endblock footer %} {% block javascripts %} {% include 'includes/scripts_sections.html' %} {% endblock javascripts %}