Message from Alert Bootstrap in page header

Question

I’m using Bootstrap Alerts 4 for "Invalid user or password" message, the message is showing, but at the end of the page, I need to scroll down a little to see.

I would like to insert Alert in the page header or at least in the login form.

Follow code from login page:

<form class="login100-form validate-form" method="POST" action="valida.php">
					<span class="login100-form-logo">
						<i class="zmdi zmdi-landscape"></i>
					</span>
					<span class="login100-form-title p-b-34 p-t-27">
						Entrar
					</span>
					<div class="wrap-input100 validate-input" data-validate = "Enter username">
						<input id="user" class="input100" type="text" name="user" id="user" placeholder="Usuário">
						<span class="focus-input100" data-placeholder="&#xf207;"></span>
					</div>
					<div class="wrap-input100 validate-input" data-validate="Enter password">
						<input id="senha" class="input100" type="password" name="senha" placeholder="Senha">
						<span class="focus-input100" data-placeholder="&#xf191;"></span>
					</div>
					<div class="container-login100-form-btn">
						<button class="login100-form-btn" type="submit">
							Login
						</button>
					</div>
				</form>
			</div>
		</div>
	</div>
	<p class="text-center text-danger">
			<?php if(isset($_SESSION['loginErro'])){
				echo $_SESSION['loginErro'];
				unset($_SESSION['loginErro']);
			}?>
		</p>
		<p class="text-center text-success">
			<?php 
			if(isset($_SESSION['logindeslogado'])){
				echo $_SESSION['logindeslogado'];
				unset($_SESSION['logindeslogado']);
			}
			?>

Code for the Valida.php file

//Encontrado um usuario na tabela usuário com os mesmos dados digitado no formulário
		if(isset($resultado)){
			$_SESSION['user'] = $resultado['userid'];
			$_SESSION['senha'] = $resultado['senha'];
				header("Location: pginicial.php");
	
		}else{				
			$_SESSION['loginErro'] = "<div class='alert alert-danger'>Usuário ou senha Inválido</div>";
			header("Location: index.php");
		}
	}else{
		$_SESSION['loginErro'] = "<div class='alert alert-danger'>Usuário ou senha Inválido</div>";
		header("Location: index.php");
	}

Thank you!

Answer 1

Just put the <p> of the messages in the place where you want. You are placing after the form, then it will appear below itself.

For example, you could put after span where you have the word "Login", so it is very visible to the user:

<div>
   <div>
      <div>
         <form class="login100-form validate-form" method="POST" action="valida.php">
            <span class="login100-form-logo">
               <i class="zmdi zmdi-landscape"></i>
            </span>
            <span class="login100-form-title p-b-34 p-t-27">
               Entrar
            </span>
            <p class="text-center text-danger">

               <?php if(isset($_SESSION['loginErro'])){
                    echo $_SESSION['loginErro'];
                    unset($_SESSION['loginErro']);
            }?>
            </p>
            <p class="text-center text-success">
               <?php 
               if(isset($_SESSION['logindeslogado'])){
               echo $_SESSION['logindeslogado'];
               unset($_SESSION['logindeslogado']);
               }
               ?>
            </p>
            <div class="wrap-input100 validate-input" data-validate = "Enter username">
               <input id="user" class="input100" type="text" name="user" id="user" placeholder="Usuário">
               <span class="focus-input100" data-placeholder="&#xf207;"></span>
            </div>
            <div class="wrap-input100 validate-input" data-validate="Enter password">
               <input id="senha" class="input100" type="password" name="senha" placeholder="Senha">
               <span class="focus-input100" data-placeholder="&#xf191;"></span>
            </div>
            <div class="container-login100-form-btn">
               <button class="login100-form-btn" type="submit">
                  Login
               </button>
            </div>
         </form>
      </div>
   </div>
</div>