Bootstrap Horizontal Alignment Issue

Question

I'm developing a Spring Boot Web App and am having an issue on the login page, which you can see in the attached picture, where the div is not EXACTLY centered on the page. I'm also using Bootstrap.

It appears that it is nearly centered, but is off a bit to the left for some reason. I've posted my HTML and relevant CSS below. Some parts of it must be conflicting, but I'm not sure where.

<div id="parentLogin">

    <div class="row" style="width: 40%;">
        
        <div class="col-md-12 col-md-offset-2">
        
            <div>
                <c:if test="${param.error != null}">
                    <div class="login-error" style="margin: 0 auto;">Incorrect username or password</div>
                </c:if>
            </div>
    
            <div class="panel panel-default">
    
                <div class="panel-heading">
                    <div class="panel-title" style="font-weight: bold; font-size: x-large; margin: 1%;">User Login</div>
                </div>
                
                <div class="panel-body">
    
                    <form method="post" action="${loginUrl}" class="login-form">
                    
                        <input type="hidden" name="${_csrf.parameterName}" value="${_csrf.token}" />
    
                        <div class="input-group">
                            <input type="text" name="username" placeholder="Username"
                                class="form-control" />
                        </div>
    
    
                        <div class="input-group">
                            <input type="password" name="password" placeholder="Password"
                                class="form-control" />
                        </div>
    
                        
                        <button type="submit" class="suit_and_tie">Sign In</button>
                        
                    </form>
    
                </div>
    
            </div>
    
        </div>
        
    </div>
    
</div>

#parentLogin {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 75vh;
}

Answer 1

Your div with id="parentLogin" as parent is centered... with a fixed width of 40% of the available width. But it does not appear that your bootstrap panels inside of that are centered within that div... you should add classes to the entire chain of child objects... each class should use display: flex; and should specify flex-direction, align-items, and justify-content. You can use Bootstrap classes for those... but each element in the parent-child chain should specify the alignment of its contents.

#parentLogin {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 75vh;
  width: 100%;
}

.parentRow {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  height: 75vh;
}

.parentCol {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 75vh;
}

<div id="parentLogin">
  <div class="row parentRow" style="width: 40%;">
    <div class="col-md-12 col-md-offset-2 parentCol">
      <div>
        <c:if test="${param.error != null}">
          <div class="login-error" style="margin: 0 auto;">
            Incorrect username or password
          </div>
        </c:if>
      </div>
      <div class="panel panel-default">
        <div class="panel-heading">
          <div class="panel-title" style="font-weight: bold; font-size: x-large; margin: 1%;">
            User Login
          </div>
        </div>
        <div class="panel-body">
          <form method="post" action="${loginUrl}" class="login-form">
            <input type="hidden" name="${_csrf.parameterName}" value="${_csrf.token}" />
            <div class="input-group">
              <input type="text" name="username" placeholder="Username" class="form-control" />
            </div>
            <div class="input-group">
              <input type="password" name="password" placeholder="Password" class="form-control" />
            </div>
            <button type="submit" class="suit_and_tie">
              Sign In
            </button>
          </form>
        </div>
      </div>
    </div>
  </div>
</div>