skip to Main Content

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>

2

Answers


  1. 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>
    Login or Signup to reply.
  2. 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>
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search