Center Pills nav and Pills content Bootstrap

user_15440172 0
Viewed 104

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.

bootstrap-4 twitter-bootstrap css html
1 Answers

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 -->

user_46167220
Related