Creating a personalized avatar display with Bootstrap 5

Question

Creating a personalized avatar display with Bootstrap 5

I'm trying to create a display that resembles a rounded avatar with text next to it. While I've successfully made the rounded avatar, an issue arises when I place text beside it where the avatar sometimes appears oval instead of round. What could be causing this?

This is the code I'm using: View Code on JSFiddle

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

.red-label {
    color: red;
}

.fs-small {
    font-size: 0.8em;
}
// More CSS classes and styling

// Code snippet continuation

html css bootstrap-5 avatar

Answer 1

Answer №1

This code snippet ensures that your avatar remains circular and doesn't turn into an oval shape. It also utilizes CSS Grid's place-items property to align the text next to the avatar.

.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-contai...

</div>

Answer 2

This code snippet ensures that your avatar remains circular and doesn't turn into an oval shape. It also utilizes CSS Grid's place-items property to align the text next to the avatar.

.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-contai...

</div>

Answer 3

Answer №2

To change the width: 48px;, you can use flex: 0 0 48px; as it represents:

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

This means that the element will neither grow nor shrink and will have a fixed size of 48px.

Alternatively, you could go with:

width: 48px;
flex-shrink: 0;

By default, a flex item has flex-shrink: 1, so specifying flex-shrink: 0 is necessary in this case to prevent shrinking.

Another approach would be using:

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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="74161b1b00070006150434415a475a47">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="debcb1b1aaadaaacbfae9eebf0edf0ed">[email protected]</a>/dist/js/bootstrap.bundle.min.js"></script>
<div class="accordion-body row g-3">
... (The rest of the content remains unchanged)
  <div class="px-3 pe-4 m-3 text-end">
    <a href="#">View All</a>
  </div>
</div>

Answer 4

To change the width: 48px;, you can use flex: 0 0 48px; as it represents:

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

This means that the element will neither grow nor shrink and will have a fixed size of 48px.

Alternatively, you could go with:

width: 48px;
flex-shrink: 0;

By default, a flex item has flex-shrink: 1, so specifying flex-shrink: 0 is necessary in this case to prevent shrinking.

Another approach would be using:

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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="74161b1b00070006150434415a475a47">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="debcb1b1aaadaaacbfae9eebf0edf0ed">[email protected]</a>/dist/js/bootstrap.bundle.min.js"></script>
<div class="accordion-body row g-3">
... (The rest of the content remains unchanged)
  <div class="px-3 pe-4 m-3 text-end">
    <a href="#">View All</a>
  </div>
</div>

Answer 5

Answer №3

It turns out that the solution was simpler than expected. I just had to switch the DOM element containing the image from

<div style="background-image:url('path/to/image')" class="rounded-circle">

to

<img src="path/to/image" class="rounded-circle">

because, for some reason, the .rounded-circle class only seems to work on an <img> tag.

I hope this information is useful for anyone facing a similar issue.

Answer 6

It turns out that the solution was simpler than expected. I just had to switch the DOM element containing the image from

<div style="background-image:url('path/to/image')" class="rounded-circle">

to

<img src="path/to/image" class="rounded-circle">

because, for some reason, the .rounded-circle class only seems to work on an <img> tag.

I hope this information is useful for anyone facing a similar issue.

Creating a personalized avatar display with Bootstrap 5

Answer №1

Answer №2

Answer №3

Similar questions

Change the class of the div when the first div is selected

What could be the reason that angularjs html template requests aren't appearing in the top websites when viewed in a

Eliminating every single dynamic 'data attribute' from a specific Element

JavaScript implementation of a carousel slider with responsive design

I need assistance with retrieving an image from a database using PHP

Difficulty arises when trying to engage with the addition span within a span using jQuery

The default padding and margin in Bootstrap are making the images protrude beyond the edges of the container

Converting Bootstrap rows into columns based on viewport size

Showing a hidden div after an unsuccessful AJAX call

Vertical scroll bar positioned on the left side of a DIV

What is the best way to toggle and slide two forms within a single page?

Redirecting files from the file system to the emulator is not functioning properly

ASP Table extends into adjacent column

I seem to be having trouble with this JavaScript code. Could it be a syntax error, or is it possibly another issue causing it

How can I incorporate checkboxes and crosses for validation in AngularJS?

Unable to display and conceal div elements

Undoing alterations to the user interface in Angular 2 after discontinuing bi-directional data binding

Issues persist with TCPDF when rendering HTML tables accurately

Latest versions of Bootstrap are facing issues with the functionality of the Carousel feature

Unveiling the mystery of extracting information from a string post serialization