Html - how to make avatar-like display using bootstrap 5

dapidmini
March 18, 2024
144 views
0 votes
2 Answers

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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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">[email protected]</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">[email protected]</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">[email protected]</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">[email protected]</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">[email protected]</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">[email protected]</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">[email protected]</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">[email protected]</div>
      </div>
    </div>
  </div>

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

Answers

This code will keep your avatar round and prevent it from becoming oval. It also centers the text beside the avatar using CSS Grid’s place-items property.

.user-avatar {
    display: grid;
    place-items: center;
    flex-shrink: 0;
}

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

#map {
    width: 100%;
    height: 100vh;
    background-color: #f0f0f0;
}

.autocomplete {
    position: relative;
    display: inline-block;
}

.autocomplete .suggestions {
    list-style: none;
    padding: 0;
    margin: 0;
    position: absolute;
    z-index: 3;
    width: 100%;
}

.autocomplete .suggestions li {
    padding: 8px;
    background-color: #f1f1f1;
    border: 1px solid #ddd;
    cursor: pointer;
}

.autocomplete .suggestions li:hover {
    background-color: #5db8fd;
}

.red-label {
    color: red;
}

/* Override Bootstrap styles for offcanvas backdrop */
.offcanvas {
    z-index: 99;
}
.offcanvas.offcanvas-start {
    width: 40% !important;
}

.offcanvas-backdrop {
    z-index: 90;
}

.navbar {
    z-index: 100;
    position: fixed;
    width: 100%;
}

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

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

.search-container {
    position: absolute;
    top: 10px;
    background-color: #fff;
    padding: 10px;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    z-index: 1;
}

.search-container.center {
    left: 50%;
    transform: translateX(-50%);
}
.search-container.end {
    right: 10px;
}

.search-container > * {
    white-space: nowrap;
}

/* .search-container input, */
/* .search-container select {
    max-width: 200px !important;
    height: 30px !important;
} */

.result-item .img-thumb {
    background-repeat: no-repeat;
    background-size: cover;
    background-color: white;
    background-position: center;
    height: 122px;
    width: 100%;
}

.user-avatar {
    background-repeat: no-repeat;
    background-size: cover;
    background-color: white;
    background-position: center;
    height: 48px;
    width: 48px;
    display: grid;
    place-items: center;
    flex-shrink: 0;
}

.result-item a {
    text-decoration: none;
}

#location-input {
    width: 300px;
    padding: 8px;
    font-size: 14px;
    border: 1px solid #ddd;
    border-radius: 5px;
    outline: none;
}

#search-btn {
    background-color: #4caf50;
    color: #fff;
    border: none;
    padding: 8px 16px;
    border-radius: 5px;
    cursor: pointer;
}

.place-photo-carousel {
    height: 80vh !important;
    width: 100% !important;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.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;
}

.btn.btn-link:hover {
    text-decoration: underline !important;
}
.sidebar-menus a:hover {
    color: royalblue !important;
}

.card-img-icons-wrapper {
    position: absolute !important;
    bottom: 0px !important;
    right: 0px !important;
    margin-bottom: -10px;
    margin-right: -10px;
}

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

<div class="accordion-body row g-3">
  <div class="col-sm-4">
    <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')">User</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">[email protected]</div>
      </div>
    </div>
  </div>
  <div class="col-sm-4">
    <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">[email protected]</div>
      </div>
    </div>
  </div>
  <div class="col-sm-4">
    <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">[email protected]</div>
      </div>
    </div>
  </div>
  <div class="col-sm-4">
    <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">[email protected]</div>
      </div>
    </div>
  </div>
  <div class="col-sm-4">
    <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">[email protected]</div>
      </div>
    </div>
  </div>
  <div class="col-sm-4">
    <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">[email protected]</div>
      </div>
    </div>
  </div>
  <div class="col-sm-4">
    <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">[email protected]</div>
      </div>
    </div>
  </div>
  <div class="col-sm-4">
    <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">[email protected]</div>
      </div>
    </div>
  </div>

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

You can replace width: 48px; by flex: 0 0 48px; which is the shorthand for

flex-grow: 0;
flex-shrink: 0;
flex-basis: 48px;

Which says that the element is not allowed to grow or shrink and has a main size of 48px.

Another option would be to use

width: 48px;
flex-shrink: 0;

By default, a flex element comes with flex-shrink: 1 and here you want that element to not shrink so you need to specify it.

Another option would be to use

min-width: 48px;

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;
    flex: 0 0 48px;
    background-image: url('https://placehold.co/48x48');
}

.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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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"></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">[email protected]</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"></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">[email protected]</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"></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">[email protected]</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"></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">[email protected]</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"></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">[email protected]</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"></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">[email protected]</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"></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">[email protected]</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"></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">[email protected]</div>
      </div>
    </div>
  </div>

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

Please signup or login to give your own answer.

Click here to cancel reply.

Html – how to make avatar-like display using bootstrap 5

Answers