<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 ----------> <div class="container"> <div class="row justify-content-center"> <div class="col-sm-6 col-md-4"> <div class="account-wall"> <img class="institute-img" src="https://idp.mtmt.hu/simplesaml/module.php/authmtmt2/images/m2logoWhiteBg104x103.png" alt=""> <form class="form-signin" method="POST" role="form"> <div class="row border-left border-success ml-1 my-1 align-items-center"> <div class="col-2"> <div class=""> <img src="https://idp.mtmt.hu/simplesaml/module.php/mfaregclient/wwy-badge-caption.svg" style="max-height: 2rem"> </div> </div> <div class="col"> <div>kedvenc, kicsi</div> <div class="small">id: ccccccejnvrg</div> </div> <div class="col"> <div class="float-right"> <button class="btn btn-info btn-sm">></button> </div> </div> </div> <div class="row m-2"> <input class="btn btn-sm btn-warning float-right mt-2" type="submit" name="skip" value="Kihagyás, tovább második lépcső nélkül"> <span class="clearfix"></span> </div> <input type="hidden" name="token_id" value="ccccccejnvrg"> <input type="hidden" name="type" value="yubikey"> <input type="hidden" name="AuthState" value="_734e4530f9c5316ccba2cb9d95287e4ac5ef572a22:https://idp.mtmt.hu/simplesaml/saml2/idp/SSOService.php?spentityid=https%3A%2F%2Fattributes.eduid.hu%2Fshibboleth&cookieTime=1543388992&RelayState=ss%3Amem%3A71275b5ddbf47dc212ff94c6e27cc34f3ac73679d5bc49714ed07e8637a1e2dc"> </form> </div> </div> </div> </div>

.form-signin { max-width: 330px; padding: 15px; margin: 0 auto; } .form-signin .form-signin-heading, .form-signin .checkbox { margin-bottom: 10px; } .form-signin .checkbox { font-weight: normal; } .form-signin .form-control { position: relative; font-size: 16px; height: auto; padding: 10px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .form-signin .form-control:focus { z-index: 2; border-color: #00FFB0; } .form-signin input[type="text"] { margin-bottom: -1px; border-radius: 3px 3px 0px 0px; width: 100%; } .form-signin input[type="password"] { margin-bottom: 10px; border-radius: 0px 0px 3px 3px; width: 100%; } .form-signin input[type="submit"] { border-radius: 3px; } .account-wall { margin-top: 60px; padding: 40px 0px 20px 0px; background-color: #ffffff; } .login-title { color: #555; font-size: 18px; font-weight: 400; display: block; } .institute-img { width: 96px; height: 96px; margin: 0 auto 10px; display: block; } .need-help { margin-top: 10px; } .new-account { margin-top: 10px; } .federation-logo { height: 24px; } .narrow { margin: auto; width: 400px; } .logo-container { text-align: right; margin-top: 12px; } .link-container { margin-top: 8px; } .btn-primary { color: #fff; background-color: #1caf9a; border-color: #157B69; } .btn-primary:hover { color: #fff; background-color: #157B69; border-color: #105243; } .btn-primary:focus { color: #fff; background-color: #156957; border-color: #104b3c; } .btn-primary:active { color: #fff; background-color: #114b3b; border-color: #0f2d20; } .btn-primary:active:hover { color: #fff; background-color: #114b3b; border-color: #0f2d20; } a { color: #1caf9a; } a:hover { color: #157B69; }