I'm just getting started into using Bootstrap, and am having a bit of trouble getting a form to display in the center of the page. So far, what I have done is use CSS-styling to make sure that both html and body tags are at 100% height. Then I have two divs: the outer div uses the entire height of the page, and uses "justify-content-center." The inner div uses "align-items-center." With this, I have managed to get the form to display in the center. However, I'm left with this whitespace that stretches on the top and bottom of the form.
This is somewhat of a vague question, but is there a way for me to to either remove that whitespace (as in like shrink the container or something), or perhaps go about centering a div a different way?
I am using jade/pug for my view template engine. Here is the source code:
block content
div(class="row h-100 justify-content-center")
div(class="d-flex align-items-center shadow-lg p-3 mb-5 bg-white rounded")
div
h3(class="text-center") Submit Your Attendance
form
div(class="form-group")
label(for="firstname") First Name
input(class="form-control", type="text", id="firstname", placeholder="John", name="firstname")
div(class="form-group")
label(for="lastname") Last Name
input(class="form-control", type="text", id="lastname", placeholder="Doe", name="lastname")
div(class="form-group")
label(for="email") Email Address
input(class="form-control", type="text", id="email", placeholder="[email protected]", name="email")
div(class="text-center")
button(class="btn btn-primary", type="submit") Submit
Here is the layout.jade that it inherits from:
doctype html
html(style="height:100%")
head
title= title
link(rel='stylesheet', href='/node_modules/bootstrap/dist/css/bootstrap.min.css')
script(src="/../node_modules/jquery/jquery.min.js")
script(src="/../node_modules/popper.js/dist/umd/popper.min.js")
script(src="/../node_modules/bootstrap/dist/js/bootstrap.min.js")
body(style="height:100%;background-image:url(../public/images/index-background.jpg);")
block content
And here is what the page looks like: screenshot of the page
Any suggestions would be appreciated, thank you very much!
Just add align-items-center class along with row class.
block content
div(class="row h-100 justify-content-center align-items-center") /*add align-items-center here*/
div(class="d-flex flex-column align-items-center shadow-lg p-3 mb-5 bg-white rounded")
div
h3(class="text-center") Submit Your Attendance
form
div(class="form-group")
label(for="firstname") First Name
input(class="form-control", type="text", id="firstname", placeholder="John", name="firstname")
div(class="form-group")
label(for="lastname") Last Name
input(class="form-control", type="text", id="lastname", placeholder="Doe", name="lastname")
div(class="form-group")
label(for="email") Email Address
input(class="form-control", type="text", id="email", placeholder="[email protected]", name="email")
div(class="text-center")
button(class="btn btn-primary", type="submit") Submit
just I converted pug html into normal its working fine.
DEMO:
<!DOCTYPE html>
<html lang="en" style="height:100%;">
<head>
<title>Bootstrap Example</title>
<meta charset=" utf-8 ">
<meta name="viewport " content="width=device-width, initial-scale=1 ">
<link rel="stylesheet " href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css ">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js "></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js "></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js "></script>
</head>
<body style="height:100% ">
<div class="row h-100 justify-content-center align-items-center ">
<div class="d-flex flex-column align-items-center shadow-lg p-3 mb-5 bg-white rounded ">
<h3 class="text-center ">Submit Your Attendance form
</h3>
<form>
<div class="form-group ">
<label for="firstname ">First Name</label>
<input class="form-control " type="text " id="firstname " , placeholder="John " name="firstname "><br>
</div>
<div class="form-group ">
<label for="lastname ">Last Name</label>
<input class="form-control " type="text " id="firstname " , placeholder="John " name="firstname "><br> </div>
<div class="form-group ">
<label for="email ">Email</label>
<input class="form-control " type="text " id="email " placeholder="[email protected] " name="email "><br>
</div>
<div class="text-center ">
<button type="submit " value="Submit ">submit</button>
</div>
</form>
</div>
</div>
</body>
</html>