I am currently working on a project that involves designing a login and registration form. To achieve this, I have opted to utilize Bootstrap pills.
This is the HTML code for the login and registration form:
<link href="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/3.3.0/mdb.min.css" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c7a5a8a8b3b4b3b5a6b787f3e9f2e9f4">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"/>
<!-- Pills navs -->
<ul class="nav nav-pills nav-justified mb-3" id="ex1" role="tablist">
<li class="nav-item" role="presentation">
<a class="nav-link active" id="tab-login" data-mdb-toggle="pill" href="#pills-login" role="tab" aria-controls="pills-login" aria-selected="true">Login</a
>
</li>
<li class="nav-item" role="presentation">
<a
class="nav-link"
id="tab-register"
data-mdb-toggle="pill"
href="#pills-register"
role="tab"
aria-controls="pills-register"
aria-selected="false"
>Register</a
>
</li>
</ul>
<!-- Pills navs -->
<!-- Pills content -->
<div class="tab-content">
<div
class="tab-pane fade show active"
id="pills-login"
role="tabpanel"
aria-labelledby="tab-login"
>
<form action="/login" method="post">
<br>
<!-- Email/Username input -->
<div class="form-outline mb-4 login">
<input type="text" id="loginCred" name="loginCred" autofocus autocomplete="off" class="form-control" />
<label class="form-label" for="loginCred">Email or username</label>
</div>
<br>
<!-- Password input -->
<div class="form-outline mb-4 login">
<input type="password" id="loginPassword" name="loginPassword" class="form-control" />
<label class="form-label" for="loginPassword">Password</label>
</div>
<div class="row mb-4">
<div class="col-md-12 d-flex justify-content-center">
<a href="#!">Forgot password?</a>
</div>
</div>
<button type="submit" id="login" disabled="disabled" class="btn btn-dark btn-block mb-4">Log in</button>
<div class="text-center">
<p>Not a member? <a id="reg" href="">Register</a></p>
</div>
</form>
</div>
<div class="tab-pane fade" id="pills-register" role="tabpanel" aria-labelledby="tab-register">
<form action="/register" method="post" onchange="onFormUpdate()">
<br>
<div class="form-outline mb-4 register">
<input type="text" id="registerName" name="registerName" autofocus autocomplete="off" class="form-control" />
<label class="form-label" for="registerName">Full Name</label>
</div>
<div class="form-check d-flex justify-content-center mb-4">
<input class="form-check-input me-2" type="checkbox" value="" id="registerCheck" aria-describedby="registerCheckHelpText" />
<label class="form-check-label" for="registerCheck">
I have read and agree to the <a href="/terms">terms and conditions </a>
</label>
</div>
<button type="submit" id="register" disabled="disabled" class="btn btn-dark btn-block mb-3">Register</button>
<div class="text-center">
<p>Already a member? <a id="log" href="">Log in</a></p>
</div>
</form>
</div>
</div>
<!-- Pills content -->
The form seems to be spanning across the page horizontally. To address this, I utilized the w-50
Bootstrap class as shown below:
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="0e6c61617a7d7a7a7d7a6a54e326239543e373e37">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/3.3.0/mdb.min.css" rel="stylesheet"/>
<!-- Pills navs -->
<ul class="nav nav-pills nav-justified mb-3 w-50" id="ex1" role="tablist">
<li class="nav-item" role="presentation">
<a class="nav-link active" id="tab-login" data-mdb-toggle="pill" href="#pills-login" role="tab" aria-controls="pills-login" aria-selected="true">Login</a
>
</li>
<li class="nav-item" role="presentation">
<a
class="nav-link"
id="tab-register"
data-mdb-toggle="pill"
href="#pills-register"
role="tab"
aria-controls="pills-register"
aria-selected="false"
>Register</a
>
</li>
</ul>
<!-- Pills navs -->
<!-- Pills content -->
<div class="tab-content">
<div
class="tab-pane fade show active"
id="pills-login"
role="tabpanel"
aria-labelledby="tab-login"
>
<form action="/login" method="post">
<br>
<div class="form-outline mb-4 w-50 login">
<input type="text" id="loginCred" name="loginCred" autofocus autocomplete="off" class="form-control" />
<label class="form-label" for="loginCred">Email or username</label>
</div>
<br>
<div class="form-outline mb-4 login">
<input type="password" id="loginPassword" name="loginPassword" class="form-control" />
<label class="form-label" for="loginPassword">Password</label>
</div>
<div class="row mb-4">
<div class="col-md-12 d-flex justify-content-center">
<a href="#!">Forgot password?</a>
</div>
</div>
<button type="submit" id="login" disabled="disabled" class="btn btn-dark btn-block mb-4">Log in</button>
</div>
<!-- Pills content -->
A new issue arises as the form is now left-aligned. I attempted to find solutions online but most of them involved flex and grids which I couldn't apply to my current code structure. Unfortunately, no information regarding centering the form with nav pills and content was found.
If anyone has suggestions on how to center the form properly, your assistance would be greatly appreciated.
Edit: I also tried using justify-content-center
without success.