Bootstrap Snippet User Profile menu using HTML CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Roboto:400,500,700" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!--[if IE]> <link href="~/Content/NewHomePage/all-ie-only.css" rel="stylesheet" /> <![endif]-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
   
   <div class="user-profile d-none d-lg-block "><div class="user-profile-wrap"><!----> <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAC2ElEQVRYR9WYQWgTURCG/0l6UKR6sWKh0E3bdEVQBCXRQhtPntSCCF68FBtQDx4UbA82h+DBCnrwYIUovXgRRE315Mkqtt2gJ0FMa5sEChXbU6HQQ5Inb80uSbqbvGxeku1e983M9+a9mXkzBIdfwucfAjyhPMMpAi7aqIkT4TsD+xRMLX5xYopqEZrr6u3ztrWFCRhhQEctsgSsM2A6l83GBlaXf4vKCgEmlKOHGXIRADdEFVdZN0XwRgPpn3+q6asKqHWr10B4Xk2Rk/95xsJnMosVdVcE1BT1qUSv2e1hKphO3rT7aQuoKeoMgAtOPONA5n0wnbQMNEvAJsMZ+7GE3AHYpGMVPu4SwPnu/lEPUczBEckTYRgNZpIvDIUmYCGVrMmz5FwTwdtppCATsMVHW74bM7J1wEKFWHK+Z/mSuWzWzyuODqgp6iSAu/LN1KXxYTCdHNMBE4r6t9baWpdpAWFeuwPp5CHSfP2DYPRZQAa+B/fRceWy5dL1V6+RGr9n/jv28QO87e1YuTOGzbkFEfU71hDlQ5TwqROMISqigQMevDSMtWcxrD5+YooY4MWQcgARIU1R3wEYrgdw/8Bp9DyaxPbyCn5dHdFVyQBkwAwHZCJwfI2dBxsFyG1KAeTgB0KDJfdNhgcdAdoFSW5rC5mJKDbexqUdsSNAqyDpun0LndfD2E5n8OPcefcBcqIjL6ex78Rx04stO2IrDzYUcEFR4xXaxpIAt4tiA3BPb48ZKJI8GJeSqI07uPEmblYTGYBEiBBvwBnzzIrkwlpL3V5/n6Xaza/zZkKvaJfYkPsfC7viueX6B2vBi81o0kWuOl9T+uT//2jV5y/ubZp0LzZwDiPquvJ5ze5q3I1dunr00SLI2oZHRZDNiGxn4zcDsqHzmrI5jFUgVZ2wFqUgd46Ai3fl2iG6let5w0+gs4zhpF3byttGD+EbkJ8NpJaEhgPltv4Br6iuy6YUqEgAAAAASUVORK5CYII=" width="40" height="40"> <!----> <img src="/ciena/images/down-arrow.svg" alt="images" class="arrow">
   </div> <!---->
   <div class="user-content"><div><div class="d-flex align-items-center mb-2"><!----> <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAC2ElEQVRYR9WYQWgTURCG/0l6UKR6sWKh0E3bdEVQBCXRQhtPntSCCF68FBtQDx4UbA82h+DBCnrwYIUovXgRRE315Mkqtt2gJ0FMa5sEChXbU6HQQ5Inb80uSbqbvGxeku1e983M9+a9mXkzBIdfwucfAjyhPMMpAi7aqIkT4TsD+xRMLX5xYopqEZrr6u3ztrWFCRhhQEctsgSsM2A6l83GBlaXf4vKCgEmlKOHGXIRADdEFVdZN0XwRgPpn3+q6asKqHWr10B4Xk2Rk/95xsJnMosVdVcE1BT1qUSv2e1hKphO3rT7aQuoKeoMgAtOPONA5n0wnbQMNEvAJsMZ+7GE3AHYpGMVPu4SwPnu/lEPUczBEckTYRgNZpIvDIUmYCGVrMmz5FwTwdtppCATsMVHW74bM7J1wEKFWHK+Z/mSuWzWzyuODqgp6iSAu/LN1KXxYTCdHNMBE4r6t9baWpdpAWFeuwPp5CHSfP2DYPRZQAa+B/fRceWy5dL1V6+RGr9n/jv28QO87e1YuTOGzbkFEfU71hDlQ5TwqROMISqigQMevDSMtWcxrD5+YooY4MWQcgARIU1R3wEYrgdw/8Bp9DyaxPbyCn5dHdFVyQBkwAwHZCJwfI2dBxsFyG1KAeTgB0KDJfdNhgcdAdoFSW5rC5mJKDbexqUdsSNAqyDpun0LndfD2E5n8OPcefcBcqIjL6ex78Rx04stO2IrDzYUcEFR4xXaxpIAt4tiA3BPb48ZKJI8GJeSqI07uPEmblYTGYBEiBBvwBnzzIrkwlpL3V5/n6Xaza/zZkKvaJfYkPsfC7viueX6B2vBi81o0kWuOl9T+uT//2jV5y/ubZp0LzZwDiPquvJ5ze5q3I1dunr00SLI2oZHRZDNiGxn4zcDsqHzmrI5jFUgVZ2wFqUgd46Ai3fl2iG6let5w0+gs4zhpF3byttGD+EbkJ8NpJaEhgPltv4Br6iuy6YUqEgAAAAASUVORK5CYII=" width="40" height="40" class="mr-2 avatar"> <!----> <div><h6 class="mb-0 text-truncate">Bluelupin</h6> <p class="text-truncate" style="font-size: 12px;">
                    
                  </p></div></div> <p class="m-0"><a href="javascript:void(0)">My Dashboard</a></p> <p class="m-0"><a href="javascript:void(0)">Show Help Guide</a></p> <p class="m-0"><a href="#">Sign out</a></p></div></div>
   </div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
user-profile {
    cursor: unset;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
.user-profile .user-profile-wrap {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
.user-profile img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
}
.user-profile .arrow {
    width: 10px;
    margin-left: 5px;
}
.user-content {
    display:none;
    position: absolute;
    top: 40px;
    right: 0;
    background: #ffffff;
    border-radius: 10px;
    padding: 15px 15px;
    /* width: 230px; */
    z-index: 999;
   
    box-shadow: 0 1rem 3rem rgb(0 0 0 / 18%);
   
    animation-name: DropDownSlide;
    
    animation-duration: 0.3s;
   
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"User Profile menu"
Bootstrap 4.1.1 Snippet by imsachin

Related: See More

Questions / Comments:

"User Profile menu" Bootstrap 4.1.1 Snippet by imsachin

Related: See More

Questions / Comments:

"User Profile menu"
Bootstrap 4.1.1 Snippet by imsachin