Ways to achieve a clickable user icon that leads to the user's profile display

I am attempting to create a clickable user profile icon in bootstrap/html that reveals the user's information (email address) and logout functionality. Can anyone provide guidance on how to achieve this using bootstrap or html, similar to the example demonstrated with Angular materials?

View User Profile Icon Screenshot

Here is a link to the codepen and snippet showcasing my current progress:

Codepen - HTML

<!DOCTYPE html>
<html lang="en">
<head>
...
(HTML code continues)
...

 </html>

Any assistance or suggestions related to my query would be greatly appreciated.

htmlcssbootstrap-4icons

Answer №1

To implement a single button dropdown, you can include your user information and logout options within the div container. Style the button with an image icon instead of text.

For detailed instructions, refer to: https://getbootstrap.com/docs/4.0/components/dropdowns/#single-button-dropdowns

Below is some example code to help you start:

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="user-icon"></i></button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <div class="info-header">Profile</div>
    <div class="user-email"><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="fb8893909b829290dab698959c9499999098949188928a90e233989590ddea7978909895">[email protected]</a></div>
    <button class="btn btn-primary">Logout</button>
  </div>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Problem with translating a variable into a selector in JQuery

When attempting to make my Jquery code more flexible, I decided to extract the selector and access it through a variable. However, despite creating variables for both selectors, neither of them seem to be functioning properly. I am confident that the issue ...

javascriptjqueryhtmlcss

Django is experiencing difficulties showcasing static images and loading CSS files

Working with PyCharm 2019.2.5, Python 3.7, and Django 2.2.5, I am in the process of developing a website by importing a template and creating apps for it through Django. However, I am facing issues with the static files not loading properly. Despite runnin ...

pythonhtmlcssdjangopycharm

Update the button text dynamically when clicked without using an identifier or a class

If we take a look at my button in the following code: <input type="button" value="BLUE" name="button_blue" /> My goal is to have the value="BLUE" changed to value="RED" or any other desired value when the button is clicked. ...

javascriptjqueryhtml

4 products - all discounted by 25% - featuring stylish borders and margins

After extensively searching the internet, I have come across similar issues but not quite the same as mine. I have a list that I want to display in table form within a parent div taking up the entire width (100%). I aim to show 4 items per row and attempt ...

htmlcss

iOS7 webkit introduces a new feature called span word break

After upgrading my phone to iOS7 today, I came across a strange issue. (blog.niwyclin.org) This is just a test post on my website Everything looks good on the desktop browser. When I used Responsivator to check, it appeared perfect, like this (i.minus.c ...

htmlioscsswebkitios7

VueJS is utilized to duplicate the innerHTML output value

Currently diving into the world of Vue, I encountered an issue while rendering an HTML text. My component template is a WYSIWYG editor. <template> <div id='editor_container'> <slot name="header" /> <div id='editor ...

javascripthtmlvue.js

Implement the map function to validate every input and generate a border around inputs that are deemed invalid or empty upon button click

Currently, I'm in the process of developing a form with multiple steps. At each step, when the next button is clicked, I need to validate the active step page using the map function. My goal is to utilize the map function to validate every input and ...

javascripthtmljquerymap-function

Transforming global CSS into CSS modules: A step-by-step guide

In my nextjs project, I am utilizing react-bootstrap and bootstrap which requires me to include the global css: // _app.js import 'bootstrap/dist/css/bootstrap.min.css'; The issue arises when loading a significant amount of unused css on every p ...

cssreactjswebpackbootstrap-4next.js

Creating a drop-down menu in HTML with PHP and MySQL integration

I'm currently working on populating a list into a drop-down menu, but right now it's displaying each name in its own separate drop-down. I'd like to have all the names listed in just one single drop-down instead. Any ideas on how I could ach ...

phphtmlmysql

Having difficulty arranging the elements in a straight line

I am currently working on designing the footer for my website. My goal is to have 2 divs and one list displayed inline within this footer. However, I am facing an issue where using the CSS Property display:inline-block is not achieving the desired result. ...

htmlcss

Pause the event listener temporarily and reattach it after specific actions have been completed

I am currently working on a React app that includes a scrollable div. Here is an example: <main id="main" onScroll={this.handleScroll}> My question is, how can I temporarily remove the onScroll event listener from the main element and then reattach ...

javascriptjquerycssreactjs

What is the best way to retrieve a style property from a <style> tag using JavaScript?

Is there a way to retrieve CSS properties set in the <style> tag in JavaScript, rather than just those set in the element's style attribute? For example: <style> div{background:red;} </style> How can I access these styles, such ...

javascripthtmlcss

Achieve a vertical fill effect within a parent container using CSS to occupy the remaining space

I have set my sights on a specific goal. https://i.sstatic.net/BqqTX.jpg This represents my current progress in achieving that goal. https://i.sstatic.net/unQY9.jpg On the left side, I have an image with a fixed height. The aqua color fills the left s ...

htmlcssbootstrap-5

block height has become a constant challenge for me - despite my various attempts, I still cannot seem

Struggling with adjusting the height of my posts. Any help would be appreciated! For more details, please visit: <li> <div class="thumb-img"> <a title="Hiring a Professional Designer for Your Kitchen" href="http://www.mulberrydesignerkitc ...

htmlcss

Changing the dropdown icon in Autocomplete with Material-UI: A Step-by-Step Guide

Is it possible to change the icon for the open/close dropdown list without affecting the functionality? I attempted to use endAdornment but lost functionality for both remove and open/close icons. I simply want to replace Material-UI's custom arrow w ...

reactjsautocompletematerial-uiicons

Tips for resolving an issue with an overflowing Uber React-Vis multicolor bar chart

I am trying to create a multi-colored bar chart using Uber's react-vis library. However, I am encountering an issue where the leftmost bar of the chart is overflowing below the YAxis instead of remaining contained to the right of it. You can view the ...

javascriptcssreactjsreact-vis

Tips on showcasing triple rows of text in a single navbar <li> item

I am trying to create a navbar that looks like the following design: +--------------------------------------------+ + navbar-brand img | | | Link 1 | + navbar-brand img | Home | About | Link 2 | + navbar-brand img | | | Link 3 ...

htmlcsstwitter-bootstrap

Refreshing forms in Angular 2

I am attempting to retrieve values from forms using the submit event. However, I am encountering difficulty resetting those forms later on. I am using an id called "myForm" and an onclick function to try and achieve this. <form (Submit)="addMarker()" i ...

javascripthtmlcssangularjs

Text input field with uneditable text displayed at the end

Click here to view the input field I am looking to create an input field that always displays a "%" at the end of the input. Here is what my react component looks like currently: <StyledBaseInput type="text" ...

javascriptcssreactjsinput

When using <a> with routerLink and fragment, the focus is not automatically set on the element

Struggling with meeting WCAG standards for page navigation in Angular 9.0.6. This is how my app-component is structured: <nav class="pageNav"> <ul> <li><a [routerLink]="" fragment="main-nav">Navigation</a></li> ...

htmlangulartypescript