"Instagram Style User Online"
Bootstrap 4.1.1 Snippet by muhamadsobari198

<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="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!--Coded with love by Mutiullah Samim--> <body> <div class="container"> <div class="d-flex justify-content-center h-100"> <div class="image_outer_container"> <div class="green_icon"></div> <div class="image_inner_container"> <img src="data:image/png;base64,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"> </div> </div> </div> </div> </body>
html,body{ height: 100%; } .container{ height: 100%; align-content: center; } .image_outer_container{ margin-top: auto; margin-bottom: auto; border-radius: 50%; position: relative; } .image_inner_container{ border-radius: 50%; padding: 5px; background: #833ab4; background: -webkit-linear-gradient(to bottom, #fcb045, #fd1d1d, #833ab4); background: linear-gradient(to bottom, #fcb045, #fd1d1d, #833ab4); } .image_inner_container img{ height: 200px; width: 200px; border-radius: 50%; border: 5px solid white; } .image_outer_container .green_icon{ background-color: #4cd137; position: absolute; right: 30px; bottom: 10px; height: 30px; width: 30px; border:5px solid white; border-radius: 50%; }

Related: See More


Questions / Comments: