So I’m trying to design a register page with HTML , CSS and Bootstrap5 and i have 2 question :
-
In my code i have a navbar and a footer (i fix the height of footer to 55px ; and I’m not sure if it’s a good practice or no !!! because i want my footer to cover the social media icon and its height became equal to the height of my navbar )
2)i want to remove the scrollbar from register form , so the full "sign up" page will shown between my navbar and my footer and without that scrollbar
here is a pic for the page that i gotand here is my code
<html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <script src="https://code.jquery.com/jquery-1.12.3.min.js" integrity="sha256-aaODHAgvwQW1bFOGXMeX+pC4PZIPsvn2h1sArYOhgXQ=" crossorigin="anonymous"></script> <style> .footer { margin-top: auto; position: fixed; left: 0; bottom: 0; width: 100%; height: 55px; background-color: black; color: white; text-align: center; display: flex; align-items: center; } </style> </head> <body> <header> <!-- Navbar --> <nav class="navbar navbar-expand-lg navbar-dark bg-dark"> <div class="container-fluid"> <a class="navbar-brand" href="#">Navbar</a> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav me-auto mb-2 mb-lg-0"> <li class="nav-item"> <a class="nav-link active" aria-current="page" href="#">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#">About Us</a> </li> <li class="nav-item"> <a class="nav-link" href="#" tabindex="-1" a>Login</a> </li> </ul> </div> </div> </nav> </header> <main style="background-color: #eee;"> <div class="container h-100"> <div class="row d-flex justify-content-center align-items-center h-100"> <div class="col-lg-12 col-xl-11"> <div class="card text-black" style="border-radius: 25px;"> <div class="card-body p-md-5"> <div class="row justify-content-center"> <div class="col-md-10 col-lg-6 col-xl-5 order-2 order-lg-1"> <p class="text-center h1 fw-bold mb-5 mx-1 mx-md-4 mt-4">Sign up</p> <form class="mx-1 mx-md-4"> <div class="d-flex flex-row align-items-center mb-4"> <i class="fas fa-user fa-lg me-3 fa-fw"></i> <div class="form-outline flex-fill mb-0"> <input type="text" id="form3Example1c" class="form-control" /> <label class="form-label" for="form3Example1c">Your Name</label> </div> </div> <div class="d-flex flex-row align-items-center mb-4"> <i class="fas fa-envelope fa-lg me-3 fa-fw"></i> <div class="form-outline flex-fill mb-0"> <input type="email" id="form3Example3c" class="form-control" /> <label class="form-label" for="form3Example3c">Your Email</label> </div> </div> <div class="d-flex flex-row align-items-center mb-4"> <i class="fas fa-lock fa-lg me-3 fa-fw"></i> <div class="form-outline flex-fill mb-0"> <input type="password" id="form3Example4c" class="form-control" /> <label class="form-label" for="form3Example4c">Password</label> </div> </div> <div class="d-flex flex-row align-items-center mb-4"> <i class="fas fa-key fa-lg me-3 fa-fw"></i> <div class="form-outline flex-fill mb-0"> <input type="password" id="form3Example4cd" class="form-control" /> <label class="form-label" for="form3Example4cd">Repeat your password</label> </div> </div> <div class="form-check d-flex justify-content-center mb-5"> <input class="form-check-input me-2" type="checkbox" value="" id="form2Example3c" /> <label class="form-check-label" for="form2Example3"> I agree all statements in <a href="#!">Terms of service</a> </label> </div> <div class="d-flex justify-content-center mx-4 mb-3 mb-lg-4"> <button type="button" class="btn btn-primary btn-lg">Register</button> </div> </form> </div> <div class="col-md-10 col-lg-6 col-xl-7 d-flex align-items-center order-1 order-lg-2"> <img src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-registration/draw1.webp" class="img-fluid" alt="Sample image"> </div> </div> </div> </div> </div> </div> </div> </main> <footer class=" footer "> <div class="container-fluid position-b-0"> <div class="row"> <div class="col-sm-6 col-xs-6 col-md-6 col-lg-6"> <h6>© 2022 - . All right reserved.</h6> </div> <div class="col-sm-6 col-xs-6 col-md-6 col-lg-6"> <a style="color: #3b5998 ;" href="#" target="_blank"><i class="fa fa-3x fa-facebook-f fa-lg"></i></a> <a style="color: #55acee;" href="#"><i class="fa fa-3x fa-twitter fa-lg"></i></a> <a style="color: #ac2bac;" href="#!"><i class="fa fa-3x fa-instagram fa-lg"></i></a> <a style="color: #dd4b39;" href="#"><i class="fa fa-3x fa-google-plus fa-lg"></i></a> </div> </div> </div> </footer> </body> </html>
2
Answers
To eliminate the scrollbar you can add,
but it will make unable to reach the content at the bottom. So it is better to set the total content to 100vh or less.
heres the sample for you. https://codepen.io/CrystalRcodes/pen/wvPQBdZ
If you want to hide the scrollbar you can use below code.
but if you want to view the entire form on your computer you can use a specific height or use your specific viewport or like 100vh . But its gonna be tricky for other viewport.