so I have just started using modals of bootstrap, and I had a register/login on a different page as the index. I thought that modals could be a good idea and I try to import the login/register form into modals but know that is inside the modal, all the inputs are not clickable, but if I press the tab, I go inside the inputs. For sure, I'm forgetting something, but I don't know as I'm comparing it with examples of modal and I don't see anything missing.
My modal code:
<div class="modal fade" id="login" tabindex="-1" role="dialog" aria-labelledby="login" aria-hidden="true">
<div class="modal-dialog p-3 radius bg-secondary" role="document">
<div class="row d-flex align-items-center justify-content-center m-2">
<div class="col-11 formBorderBigger bg-success">
<div class="row d-flex justify-content-center align-items-center">
<div class="col">
<div class="row">
<div class="col">
<h2 class="text-center text-white p-2">INICIAR SESIÓN</h2>
</div>
</div>
</div>
</div>
<div class="row d-flex justify-content-center align-items-center">
<div class="col-11 formBorderBigger my-2 bg-primary">
<div class="row d-flex justify-content-center align-items-center">
<div class="col-11 bg-white my-4 py-3 formBorderSmaller ">
<form>
<div class="row d-flex justify-content-center align-items-center">
<div class="col-12">
<div class="form-group row">
<div class="col-12 justify-content-center align-items-center">
<div class="row justify-content-center align-items-center">
<div class="col py-2 justify-content-center align-items-center">
<div class="input-group mb-2">
<div class="input-group-prepend">
<div class="input-group-text"><i class="bi bi-person-fill"></i></div>
</div>
<input type="text" class="form-control" id="inlineFormInputGroup" placeholder="Nombre">
</div>
</div>
</div>
<div class="row justify-content-center align-items-center">
<div class="col py-2 justify-content-center align-items-center">
<div class="input-group mb-2">
<div class="input-group-prepend">
<div class="input-group-text"><i class="bi bi-lock-fill"></i></div>
</div>
<input type="password" class="form-control" id="inlineFormInputGroup" placeholder="Contraseña">
</div>
</div><br>
</div>
</div>
<div class="col-12">
<div class="row d-flex justify-content-center align-items-center py-2">
<div class="col">
<h2 class="text-center">Captcha</h2>
</div>
</div>
<div class="row d-flex justify-content-center align-items-center py-2">
<div class="col d-flex justify-content-center align-items-center">
<div class="captcha bg-black py-2"></div>
</div>
</div>
<div class="row d-flex justify-content-center align-items-center py-2">
<div class="col d-flex justify-content-center align-items-center">
<div class="input-group mb-2">
<div class="input-group-prepend">
<div class="input-group-text"><i class="bi bi-arrow-clockwise"></i></div>
</div>
<input type="text" class="form-control" id="inlineFormInputGroup">
</div>
</div>
</div>
</div>
<div class="row d-flex justify-content-center align-items-center py-2">
<div class="col-5 d-flex justify-content-center align-items-center">
<button class="btn text-white btn-nav rounded-1" type="submit">Entrar</button>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
How this is working for me:
CodePudding user response：
You need to add the .modal-content class to the modal:
<!-- Modal Login -->
<div class="modal fade" id="login" tabindex="-1" role="dialog" aria-labelledby="login" aria-hidden="true">
<div class="modal-dialog p-3 radius bg-secondary" role="document">
<div class="modal-content">
<div class="row d-flex align-items-center justify-content-center m-2">
<div class="col-11 formBorderBigger bg-success">
<div class="row d-flex justify-content-center align-items-center">
<div class="col">
<div class="row">
<div class="col">
<h2 class="text-center text-white p-2">INICIAR SESIÓN</h2>
</div>
</div>
</div>
</div>
<div class="row d-flex justify-content-center align-items-center">
<div class="col-11 formBorderBigger my-2 bg-primary">
<div class="row d-flex justify-content-center align-items-center">
<div class="col-11 bg-white my-4 py-3 formBorderSmaller ">
<form>
<div class="row d-flex justify-content-center align-items-center">
<div class="col-12">
<div class="form-group row">
<div class="col-12 justify-content-center align-items-center">
<div class="row justify-content-center align-items-center">
<div class="col py-2 justify-content-center align-items-center">
<div class="input-group mb-2">
<div class="input-group-prepend">
<div class="input-group-text"><i class="bi bi-person-fill"></i></div>
</div>
<input type="text" class="form-control" id="inlineFormInputGroup" placeholder="Nombre">
</div>
</div>
</div>
<div class="row justify-content-center align-items-center">
<div class="col py-2 justify-content-center align-items-center">
<div class="input-group mb-2">
<div class="input-group-prepend">
<div class="input-group-text"><i class="bi bi-lock-fill"></i></div>
</div>
<input type="password" class="form-control" id="inlineFormInputGroup" placeholder="Contraseña">
</div>
</div><br>
</div>
</div>
<div class="col-12">
<div class="row d-flex justify-content-center align-items-center py-2">
<div class="col">
<h2 class="text-center">Captcha</h2>
</div>
</div>
<div class="row d-flex justify-content-center align-items-center py-2">
<div class="col d-flex justify-content-center align-items-center">
<div class="captcha bg-black py-2"></div>
</div>
</div>
<div class="row d-flex justify-content-center align-items-center py-2">
<div class="col d-flex justify-content-center align-items-center">
<div class="input-group mb-2">
<div class="input-group-prepend">
<div class="input-group-text"><i class="bi bi-arrow-clockwise"></i></div>
</div>
<input type="text" class="form-control" id="inlineFormInputGroup">
</div>
</div>
</div>
</div>
<div class="row d-flex justify-content-center align-items-center py-2">
<div class="col-5 d-flex justify-content-center align-items-center">
<button class="btn text-white btn-nav rounded-1" type="submit">Entrar</button>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Fin Modal Login -->