<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container h-80"> <div class="row align-items-center h-100"> <div class="col-3 mx-auto"> <div class="text-center"> <img id="profile-img" class="profile-img-card" src="https://mir-s3-cdn-cf.behance.net/project_modules/max_1200/664e6561547281.5a71f50c9077b.png" /> <p>Zagadka numer 1</p> <p id="profile-name" class="profile-name-card"></p> <form class="form-signin"> <input id="rozwiazanie" type="text" class="form-control form-group" placeholder="tu wpisz rozwiazanie" required autofocus /> <script> function question1() { var value = document.getElementById("rozwiazanie").value; if (value == 32) { window.alert("poprawne!"); } else { window.alert("zla odpowiedz"); } } </script> <button onclick="question1()" class="btn btn-lg btn-success btn-block btn-signin" type="submit">Sprawdź!</button> <br /><br /> <button class="btn btn-sm btn-basic btn-block btn-signin" type="submit">Podpowiedz</button> <button class="btn btn-sm btn-basic btn-block btn-signin" type="submit">Rozwiazanie</button> </form> </div> </div> </div> </div>

body,html { background-image: url('http://www.4usky.com/data/out/59/164522341-maze-runner-wallpapers.jpg'); height: 100%; } #profile-img { height:180px; } .h-80 { height: 80% !important; } p {background-color: black; color:white;}