<div class="container">
  <div class="row">
    <form class="col-md-4 col-md-offset-4 myform" action="" method="post">
      <h4>Show / Hide Password</h4>
      <input class="myinput" type="password" name="" value="" id="pass">
      <span id="mybutton" onclick="change()"><i class="glyphicon glyphicon-eye-open"></i></span>
    </form>
  </div>
  <br />
  <center>Copyright © 2018 kangjaz. All Rights Reserved.</center>
</div>
body {
            color: #5c5c5c;
         }
         #mybutton {
            position: relative;
            z-index: 1;
            left: 90%;
            top: -25px;
			cursor: pointer;
         }
         .myform {
            margin-top: 15%;
            background: #fafafa;
            padding: 20px;
            border: 1px solid #f4f4f4;
         }
         .myinput {
            width: 100%;
            padding: 5px;
         }
function change()
         {
            var x = document.getElementById('pass').type;

            if (x == 'password')
            {
               document.getElementById('pass').type = 'text';
               document.getElementById('mybutton').innerHTML = '<i class="glyphicon glyphicon-eye-close"></i>';
            }
            else
            {
               document.getElementById('pass').type = 'password';
               document.getElementById('mybutton').innerHTML = '<i class="glyphicon glyphicon-eye-open"></i>';
            }
         }

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css

External JavaScript

This Pen doesn't use any external JavaScript resources.