Get started with bootstrap-avatars CDN

MIT licensed

Bootstrap-avatars is a component library for creating responsive and customizable avatars using Bootstrap framework.

Tags:
  • bootstrap
  • avatar
  • bootstrap5
  • circle-image-view

Stable version

Copied!

How to start using bootstrap-avatars CDN


<!DOCTYPE html>
<html>
<head>
  <title>Get started with bootstrap-avatars CDN - cdnhub.io</title>
  <!-- Add Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
  <!-- Add Bootstrap Avatars CSS -->
  <link rel="stylesheet" href="https://cdn.cdnhub.io/bootstrap-avatars/1.0.4/bootstrap-avatars.min.css">
</head>
<body>
  <div class="container mt-5">
    <h1 class="text-center mb-5">Bootstrap Avatars Example</h1>
    <div class="row">
      <div class="col-md-3 mb-4">
        <div class="card">
          <img src="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/icons/person-circle.svg" class="card-img-top avatar-xl" alt="...">
          <div class="card-body text-center">
            <h5 class="card-title">John Doe</h5>
            <p class="card-text">john.doe@example.com</p>
          </div>
        </div>
      </div>
      <div class="col-md-3 mb-4">
        <div class="avatar-container text-center">
          <button type="button" class="btn btn-primary btn-lg avatar-selector" data-bs-toggle="modal" data-bs-target="#avatarModal">Select Avatar</button>
          <img id="selectedAvatar" src="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/icons/person-circle.svg" class="avatar-xl">
        </div>
      </div>
    </div>
  </div>

  <!-- Add Bootstrap and Bootstrap Avatars JS -->
  <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.min.js"></script>
  <script src="https://cdn.cdnhub.io/bootstrap-avatars/1.0.4/bootstrap-avatars.min.js"></script>

  <!-- Add custom modal for avatar selection -->
  <div class="modal fade" id="avatarModal" tabindex="-1" aria-labelledby="avatarModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="avatarModalLabel">Select an Avatar</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body text-center">
          <button type="button" class="btn btn-primary me-2" data-bs-toggle="modal" data-bs-target="#maleAvatarModal">Male Avatars</button>
          <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#femaleAvatarModal">Female Avatars</button>
        </div>
      </div>
    </div>
  </div>

  <!-- Add male and female avatar modals -->
  <div class="modal fade" id="maleAvatarModal" tabindex="-1" aria-labelledby="maleAvatarModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="maleAvatarModalLabel">Male Avatars</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body text-center">
          <button type="button" class="btn btn-primary me-2" data-bs-toggle="modal" data-bs-target="#maleAvatar1Modal">Avatar 1</button>
          <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#maleAvatar2Modal">Avatar 2</button>
          <!-- Add more male avatar modals as needed -->
        </div>
      </div>
    </div>
  </div>

  <div class="modal fade" id="maleAvatar1Modal" tabindex="-1" aria-labelledby="maleAvatar1ModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="maleAvatar1ModalLabel">Avatar 1</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body text-center">
          <img src="male_avatar_1.png" class="img-fluid" alt="Male Avatar 1">
          <button type="button" class="btn btn-primary" data-bs-dismiss="modal" data-bs-toggle="modal" data-bs-target="#avatarModal" data-bs-avatar-image="male_avatar_1.png">Set as Avatar</button>
        </div>
      </div>
    </div>
  </div>

  <!-- Add more male and female avatar modals as needed -->
</body>
</html>
Copied!
Copied!
Copied!
Copied!

All versions