"Instagram Style User Online"
Bootstrap 4.1.1 Snippet by haniye

<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="https://i0.wp.com/tricksmaze.com/wp-content/uploads/2017/04/Stylish-Girls-Profile-Pictures-36.jpg?resize=300%2C300&ssl=1"> </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; background-color: yellow; } .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: