As a newcomer here, I am in the process of learning new things. My current challenge is to create a center form.
Here is what I have experimented with so far:
<!doctype html>
<html lang="en>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap demo</title>
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="dfbdb0b0abacabadbeaf9feaf1edf1eff2bdbaabbeee">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
<style>
.container {
height: 100%;
width: 50%;
}
.center-block {
margin: auto;
display: block;
}
</style>
</head>
<body>
<div class="container">
<h1 class="text-center fst-italic mt-5">CARD NUMBER CHECKER</h1>
<br>
<br>
<div class="inpCont ">
<div class="row g-3 align-items-center">
<div class="col-auto">
<label class="col-form-label text-center">Input Number</label>
</div>
<div class="col-auto">
<input type="text" class="form-control text-center">
</div>
</div>
</div>
<br>
<div class="d-grid gap-2 col-3 mx-auto">
<button class="btn btn-warning" type="button">Submit</button>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="95f7fafae1e6e1e7f4e5d5a0bba7bba5b8f7f0e1f4a4">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>
</body>
</html>As of now, this is the appearance that I am achieving with the code above: https://i.sstatic.net/G2A4c.png
I aim to achieve the exact layout shown in the image below:
https://i.sstatic.net/Ariyr.png
Any assistance in centering the input box as depicted in the image would be greatly appreciated :)