htmlcssbootstrap-5avatar

how to make avatar-like display using bootstrap 5

I'm trying to make a display that looks like a rounded avatar with text beside it. I've managed to make the rounded avatar but the problem is when I add text beside it, sometimes the avatar becomes oval instead of round. what am I doing wrong?

this is my code: jsfiddle

html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

.red-label {
    color: red;
}

.fs-small {
    font-size: 0.8em;
}

.fs-smaller {
    font-size: 0.5rem;
}

.user-avatar {
    background-repeat: no-repeat;
    background-size: cover;
    background-color: white;
    background-position: center;
    height: 48px;
    width: 48px;
}

.ellipsis-2 {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* number of lines to show */
    line-clamp: 2;
    -webkit-box-orient: vertical;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<div class="accordion-body row g-3">
  <div class="col-sm-3">
    <div class="px-0 d-flex justify-start align-items-top" title="xwalsh">
      <div class="border user-avatar rounded-circle" style="background-image: url('http://localhost:8001/storage/assets/img/user/profile_pic/nopic.jpg')"></div>
      <div class="ms-2">
        <div class="fw-bold">
          <span>xwalsh</span>
          <span> <i class="fa-solid fa-mars color-male" title="Laki-laki" aria-hidden="true"></i><span class="sr-only">Laki-laki</span> </span>
        </div>
        <div class="fs-small fw-bold text-success">
          <span class="me-2"> Sightseeing[ SS ] </span>
        </div>
        <div class="fst-italic fs-small ellipsis-2">Kabupaten Indramayu, Jawa Barat, Indonesia</div>
        <div class="fst-italic fs-small">lilianskiles@example.com</div>
      </div>
    </div>
  </div>
  <div class="col-sm-3">
    <div class="px-0 d-flex justify-start align-items-top" title="rigoberto00">
      <div class="border user-avatar rounded-circle" style="background-image: url('http://localhost:8001/storage/assets/img/user/profile_pic/nopic.jpg')"></div>
      <div class="ms-2">
        <div class="fw-bold">
          <span>rigoberto00</span>
          <span> <i class="fa-solid fa-mars color-male" title="Laki-laki" aria-hidden="true"></i><span class="sr-only">Laki-laki</span> </span>
        </div>
        <div class="fs-small fw-bold text-success">
          <span class="me-2"> Sightseeing[ SS ] </span>
        </div>
        <div class="fst-italic fs-small ellipsis-2">Kota Pekanbaru, Riau, Indonesia</div>
        <div class="fst-italic fs-small">allisonwillms@example.com</div>
      </div>
    </div>
  </div>
  <div class="col-sm-3">
    <div class="px-0 d-flex justify-start align-items-top" title="stracke.christ">
      <div class="border user-avatar rounded-circle" style="background-image: url('http://localhost:8001/storage/assets/img/user/profile_pic/nopic.jpg')"></div>
      <div class="ms-2">
        <div class="fw-bold">
          <span>stracke.christ</span>
          <span> <i class="fa-solid fa-mars color-male" title="Laki-laki" aria-hidden="true"></i><span class="sr-only">Laki-laki</span> </span>
        </div>
        <div class="fs-small fw-bold text-success">
          <span class="me-2"> Sightseeing[ SS ] </span>
        </div>
        <div class="fst-italic fs-small ellipsis-2">Kabupaten Kepulauan Selayar, Sulawesi Selatan, Indonesia</div>
        <div class="fst-italic fs-small">alexyshaley@example.com</div>
      </div>
    </div>
  </div>
  <div class="col-sm-3">
    <div class="px-0 d-flex justify-start align-items-top" title="jarrett79">
      <div class="border user-avatar rounded-circle" style="background-image: url('http://localhost:8001/storage/assets/img/user/profile_pic/nopic.jpg')"></div>
      <div class="ms-2">
        <div class="fw-bold">
          <span>jarrett79</span>
          <span> <i class="fa-solid fa-mars color-male" title="Laki-laki" aria-hidden="true"></i><span class="sr-only">Laki-laki</span> </span>
        </div>
        <div class="fs-small fw-bold text-success">
          <span class="me-2"> Sightseeing[ SS ] </span>
        </div>
        <div class="fst-italic fs-small ellipsis-2">Kabupaten Tambrauw, Papua Barat Daya, Indonesia</div>
        <div class="fst-italic fs-small">josephinegleason@example.com</div>
      </div>
    </div>
  </div>
  <div class="col-sm-3">
    <div class="px-0 d-flex justify-start align-items-top" title="schamberger.dannie">
      <div class="border user-avatar rounded-circle" style="background-image: url('http://localhost:8001/storage/assets/img/user/profile_pic/nopic.jpg')"></div>
      <div class="ms-2">
        <div class="fw-bold">
          <span>schamberger.dannie</span>
          <span> <i class="fa-solid fa-mars color-male" title="Laki-laki" aria-hidden="true"></i><span class="sr-only">Laki-laki</span> </span>
        </div>
        <div class="fs-small fw-bold text-success">
          <span class="me-2"> Sightseeing[ SS ] </span>
        </div>
        <div class="fst-italic fs-small ellipsis-2">Kabupaten Garut, Jawa Barat, Indonesia</div>
        <div class="fst-italic fs-small">kalefunk@example.com</div>
      </div>
    </div>
  </div>
  <div class="col-sm-3">
    <div class="px-0 d-flex justify-start align-items-top" title="prince44">
      <div class="border user-avatar rounded-circle" style="background-image: url('http://localhost:8001/storage/assets/img/user/profile_pic/nopic.jpg')"></div>
      <div class="ms-2">
        <div class="fw-bold">
          <span>prince44</span>
          <span> <i class="fa-solid fa-mars color-male" title="Laki-laki" aria-hidden="true"></i><span class="sr-only">Laki-laki</span> </span>
        </div>
        <div class="fs-small fw-bold text-success">
          <span class="me-2"> Sightseeing[ SS ] </span>
        </div>
        <div class="fst-italic fs-small ellipsis-2">Kabupaten Bangli, Bali, Indonesia</div>
        <div class="fst-italic fs-small">kellystoltenberg@example.com</div>
      </div>
    </div>
  </div>
  <div class="col-sm-3">
    <div class="px-0 d-flex justify-start align-items-top" title="xgraham">
      <div class="border user-avatar rounded-circle" style="background-image: url('http://localhost:8001/storage/assets/img/user/profile_pic/nopic.jpg')"></div>
      <div class="ms-2">
        <div class="fw-bold">
          <span>xgraham</span>
          <span> <i class="fa-solid fa-mars color-male" title="Laki-laki" aria-hidden="true"></i><span class="sr-only">Laki-laki</span> </span>
        </div>
        <div class="fs-small fw-bold text-success">
          <span class="me-2"> Sightseeing[ SS ] </span>
        </div>
        <div class="fst-italic fs-small ellipsis-2">Kabupaten Tebo, Jambi, Indonesia</div>
        <div class="fst-italic fs-small">mabelbahringer@example.com</div>
      </div>
    </div>
  </div>
  <div class="col-sm-3">
    <div class="px-0 d-flex justify-start align-items-top" title="murray.talon">
      <div class="border user-avatar rounded-circle" style="background-image: url('http://localhost:8001/storage/assets/img/user/profile_pic/nopic.jpg')"></div>
      <div class="ms-2">
        <div class="fw-bold">
          <span>murray.talon</span>
          <span> <i class="fa-solid fa-mars color-male" title="Laki-laki" aria-hidden="true"></i><span class="sr-only">Laki-laki</span> </span>
        </div>
        <div class="fs-small fw-bold text-success">
          <span class="me-2"> Sightseeing[ SS ] </span>
        </div>
        <div class="fst-italic fs-small ellipsis-2">Kabupaten Hulu Sungai Tengah, Kalimantan Selatan, Indonesia</div>
        <div class="fst-italic fs-small">todking@example.com</div>
      </div>
    </div>
  </div>

  <div class="px-3 pe-4 m-3 text-end">
    <a href="#">Lihat Semua</a>
  </div>
</div>

Solution

  • apparently the solution is much simpler than I thought.. I just needed to change the DOM element that contains the image from <div style="background-image:url('path/to/image')" class="rounded-circle"> into <img src="path/to/image" class="rounded-circle"> because for some reason, the .rounded-circle class seem to only work on an <img> tag.

    hope this helps someone who encounters the same problem.