Bootstrap Profile (Avatar) dropdown menu

 For Desktop:

Mobile View:

React/HTML:

 <div className="dropdown">

                            <img

                                src="https://bitl.to/3nJX"  // Replace with user's profile image

                                alt="Profile"

                                className="profile-avatar dropdown-toggle"

                                id='userDropdown'

                                data-bs-toggle="dropdown"

                            />

                            <ul className="dropdown-menu dropdown-menu-end" aria-labelledby="userDropdown">

                                <li><a className="dropdown-item" href="#profile">Profile</a></li>

                                <li><hr className="dropdown-divider" /></li>

                                <li><a className="dropdown-item" href="#logout">Logout</a></li>

                            </ul>

                        </div>

CSS:

@media (max-width: 576px) {

 

    .dropdown-menu {

        left: 0 !important;

        width: fit-content;

    }

}