Navigate the center pills and organize the pills content using Bootstrap

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.

Answer №1

To center your form horizontally, you can utilize the .mx-auto class in conjunction with your .w-50 class.

<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6e0c01011a1d1a1a0c1f2e5a405b405d">[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 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 -->

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to eliminate an iframe from inside itself using javascript?

Although I am aware of similar questions being asked before, I find myself having to raise this question again along with some attached code because I am struggling to figure it out. In my JSF project, I have two .xhtml files. The first one is mainPage.xht ...

Steps for generating an HTML button when an Angular function evaluates to true

I am working on a table in HTML that uses ng-repeat to display data. Here is the code snippet for this table: <tbody> <tr dir-paginate="x in serverData | filter:filterData | filter:filterData | itemsPerPage: itemPerPageValue | order ...

A step-by-step guide on utilizing URL creation in Yii1

My controller is saved in the directory Controller/SiteAction/1700/Participate and my view file can be found at views/site/eventview. I need to add a button inside eventview that directs to Controller/SiteAction/1700/Participate. Therefore, I have to utili ...

What techniques can be used to prevent a person from zooming using css or html?

I'm attempting to disable the ability to zoom (in or out) on my website. I've tried adding this meta tag: <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" /> However, it hasn't worked so far... An ...

Press the identical button arrangement with selenium using python

How do I click on buttons with the same classes one by one? This is the Python code I am using: clk_but1 = wait(driver, 10).until(EC.presence_of_element_located((By.XPATH, "//button[@class = ('applyBtn btn btn-sm btn-red')]"))) driver.execute_s ...

What is the best way to save JSON data from a URL into a JavaScript array?

Hi there! I am attempting to save this JSON data into my JavaScript array but I am facing some difficulties. Can anyone help me with this? I am currently using the code below, but it doesn't seem to be working: Here is the link to my JSON data: JSON ...

"Implement a CSS hover effect that targets the child elements within a div, rather than

Looking to experiment with a new product card layout and encountering an issue with the box shadow effect. When hovering over the product card, the hover function only affects the child elements of the div Product-Card hov instead of the actual div itself. ...

Adjust the cursor in a contenteditable division on Chrome or Webkit

Is there a way to set the caret position in a contenteditable div layer? After trying different methods and doing some research online, I finally found a solution that works in firefox: function set(element,position){ element.focus(); var range= w ...

What steps should I take to ensure that the navbar is responsive and mobile-friendly?

After creating a navigation bar in an ejs file, I included it in all the files. The issue is that it looks fine on desktop view but does not respond well on mobile devices. There is some space left on the screen and it's not utilizing the entire width ...

Spans are not creating hyperlinks within anchors

Check out the full code. Here's the relevant code snippet: <a href='http://app.bithumor.co/report_post?id=568'><span class='report_icon'></span></a> Using CSS: <style> .report_icon { width: 60p ...

Troubleshooting problem with SASS variable $str

I'm currently using sass mixins to create columns in my grid system. However, I am facing an issue with the output. Here is the sass function I am using for the .col class. Upon compiling the sass file, the generated css file contains excessive slash ...

Adjust the text orientation using CSS within an SVG element

Here is the SVG code snippet that I am working with: https://jsfiddle.net/danpan/m3ofzrc1/. It generates the image shown below. The image consists of two lines of text wrapped around a circle: HELLO_WORLD_1 HELLO_WORLD_2 I want to change the direction ...

Using inline styles for progress bars in React

Struggling to apply styling to the element labeled as "progress", I've tried multiple options but just can't seem to get it right. Any assistance or clues would be greatly welcomed! Here is the code snippet for the component: constructor(pr ...

Leveraging parameters or pre-established variables within CSS

After successfully adding CSS to customize a checkbox, I utilized a local file (check.png) as the background image and cropped it within the checkbox boundaries. Below are two examples of checkboxes: one checked and one unchecked I am now curious if ther ...

Select Box in HTML now supports the addition of a Background Image, enhancing

Currently, I am trying to customize the select option box using HTML and CSS. My main goal is to incorporate a scroll feature into the option box. However, I have encountered an issue where the image of the checked box remains visible on the screen. Below ...

HTML5 document type declarations

After switching my site's doctype from XHTML to HTML5, I have made the following changes: I currently have: <!DOCTYPE html> <html lang="en-GB" xml:lang="en-GB" dir="ltr" xmlns="http://www.w3.org/1999/xhtml"> Now my question is, do I sti ...

Node-modules CSS

In my React application, I am utilizing CSS modules. By configuring modules:true in my webpack.config.js, I can successfully apply styles from files within my src folder. However, when importing components from node-modules, the corresponding CSS is not be ...

Angular 6 Bootstrap Fixed Positioning

Looking to implement affix or scrollspy functionality from Bootstrap 4 into Angular 6, I've been searching for existing libraries. Came across JonnyBGod's scrollspy, but it appears to be designed for Angular 5 and uses rxjs 5. Does anyone know of ...

Tips for handling CSS loading delays with icons in OpenLayers markers

When using openlayers (v4.6.4) with font-awesome as marker icons, the icons do not display upon first load (even after clearing cache and hard reload). Instead, I see a rectangle resembling a broken character. It is only on the second load that they appear ...

CSS with a "true" space for a fixed element (ensuring the previous element does not overlap with the current fixed element)

I am facing an issue with the layout of my webpage. I have two horizontal columns - the left one is fixed, along with a bottom footer that is below the second content column. When I add a border to the content column, it extends all the way down to the fo ...