Center Pills nav and Pills content Bootstrap - html

Question

I'm currently working on a project that involves a login and register form. I decided to use bootstrap pills for this matter.
This is login and register html 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/bootstrap#4.5.3/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>
<!-- 2 column grid layout -->
<div class="row mb-4">
<div class="col-md-12 d-flex justify-content-center">
<!-- Simple link -->
Forgot password?
</div>
</div>
<!-- Submit button -->
<button type="submit" id="login" disabled="disabled" class="btn btn-dark btn-block mb-4">Log in</button>
<!-- Register 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>
<!-- Name input -->
<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>
<!-- Username input -->
<div class="form-outline mb-4 register">
<input type="text" id="registerUsername" name="registerUsername" autocomplete="off" class="form-control" />
<label class="form-label" for="registerUsername">Username</label>
</div>
<div class="row-sm-3 mb-2">
<small id="passwordHelp" class="text-danger"></small>
</div>
<!-- Email input -->
<div class="form-outline mb-4 register">
<input type="email" id="registerEmail" name="registerEmail" autocomplete="off" class="form-control" />
<label class="form-label" for="registerEmail">Email</label>
</div>
<!-- Password input -->
<div id="pass" class="form-outline mb-4 register">
<input type="password" id="registerPassword" name="registerPassword" class="form-control" />
<label class="form-label" for="registerPassword">Password</label>
</div>
<div class="row-sm-3 mb-2">
<small id="passwordHelp" class="text-danger"></small>
</div>
<!-- Confirm Password input -->
<div id="confirm-pass" class="form-outline mb-4 register">
<input type="password" id="registerConfirmPassword" name="registerConfirmPassword" class="form-control" />
<label class="form-label" for="registerConfirmPassword">Confirm Password</label>
</div>
<div class="row-sm-3 mb-2">
<small id="confirmPasswordHelp" class="text-danger"></small>
</div>
<!-- Checkbox -->
<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 terms and conditions
</label>
</div>
<!-- Submit button -->
<button type="submit" id="register" disabled="disabled" class="btn btn-dark btn-block mb-3">Register</button>
<!-- Login button -->
<div class="text-center">
<p>Already a member? <a id="log" href="">Log in</a></p>
</div>
</form>
</div>
</div>
<!-- Pills content -->
As you can see, the form is stretched over the page. So I tried to minimize it using bootstrap w-50 as you can see below
<link href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/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>
<!-- Email/Username input -->
<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>
<!-- 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>
<!-- 2 column grid layout -->
<div class="row mb-4">
<div class="col-md-12 d-flex justify-content-center">
<!-- Simple link -->
Forgot password?
</div>
</div>
<!-- Submit button -->
<button type="submit" id="login" disabled="disabled" class="btn btn-dark btn-block mb-4">Log in</button>
</div>
<!-- Pills content -->
Now another problem arises. The from is left aligned. I searched and came to a few answers but most of them were using flex and grids. I couldn't use it in my code. I didn't find anything about nav pills and nav content.
Any help to center the form is appreciated.
Edit: I tried using justify-content-center and it didn't work also.

Answer 1

You could use the .mx-auto class with your .w-50 class, it will horizontally center your form
<link href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/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 mx-auto" 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 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>
<!-- 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>
<!-- 2 column grid layout -->
<div class="row mb-4">
<div class="col-md-12 d-flex justify-content-center">
<!-- Simple link -->
Forgot password?
</div>
</div>
<!-- Submit button -->
<button type="submit" id="login" disabled="disabled" class="btn btn-dark btn-block mb-4">Log in</button>
</div>
<!-- Pills content -->