Center Pills nav and Pills content Bootstrap

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 --> <a href="#!">Forgot password?</a> </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 <a href="/terms">terms and conditions </a> </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 --> <a href="#!">Forgot password?</a> </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 --> <a href="#!">Forgot password?</a> </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 -->