<div class="container">

    <div class="row justify-content-center">
      <div class="col-lg-8">

        <div class="py-5">
          <a class="btn btn-outline-primary btn-block" href="javascript: (function () { var jsCode = document.createElement('script'); jsCode.setAttribute('src', 'https://bits.orangedrop.com/bookmarklets/showpassword.js'); document.body.appendChild(jsCode); }());">
            Show hidden password
          </a>
        </div>

        <div class="card">
          <div class="card-header">

            <h2>Fai un test...</h2>

          </div>
          <div class="card-body">

            <form>
              <div class="form-group">
                <label for="username">Username</label>
                <input class="form-control" type="text" name="usernam" value="jonhdoe" autocomplete="name">
              </div>

              <div class="form-group">
                <label for="password">Password</label>
                <input class="form-control" type="password" name="password" value="abcd1234" autocomplete="new-password">
              </div>

            </form>
          </div>
        </div>

      </div>
    </div>
  </div>
Run Pen

External CSS

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

External JavaScript

This Pen doesn't use any external JavaScript resources.