I’m new to bootstrap and I’m getting a bit lost on this interaction. I have this original password input:
<code><div class="form-floating mb-3">
<input asp-for="Input.Password" class="form-control" autocomplete="current-password" aria-required="true" placeholder="password" />
<label asp-for="Input.Password" class="form-label">Password</label>
<span asp-validation-for="Input.Password" class="text-danger"></span>
</div>
</code>
<code><div class="form-floating mb-3">
<input asp-for="Input.Password" class="form-control" autocomplete="current-password" aria-required="true" placeholder="password" />
<label asp-for="Input.Password" class="form-label">Password</label>
<span asp-validation-for="Input.Password" class="text-danger"></span>
</div>
</code>
<div class="form-floating mb-3">
<input asp-for="Input.Password" class="form-control" autocomplete="current-password" aria-required="true" placeholder="password" />
<label asp-for="Input.Password" class="form-label">Password</label>
<span asp-validation-for="Input.Password" class="text-danger"></span>
</div>
Which I changed a bit, adding an input group on a new div to create an eye icon password visibility toggle (I also got rid of the label):
<code><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css" integrity="sha384-4LISF5TTJX/fLmGSxO53rV4miRxdg84mZsxmO8Rx5jGtp/LbrixFETvWa5a6sESd" crossorigin="anonymous">
<div class="form-floating m-3">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text"><i class="bi bi-eye-fill toggle-password" data-target="password-input"></i></span>
</div>
<input class="form-control" autocomplete="current-password" aria-required="true" placeholder="Password" id="password-input" />
</div>
<span class="text-danger"></span>
</div></code>
<code><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css" integrity="sha384-4LISF5TTJX/fLmGSxO53rV4miRxdg84mZsxmO8Rx5jGtp/LbrixFETvWa5a6sESd" crossorigin="anonymous">
<div class="form-floating m-3">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text"><i class="bi bi-eye-fill toggle-password" data-target="password-input"></i></span>
</div>
<input class="form-control" autocomplete="current-password" aria-required="true" placeholder="Password" id="password-input" />
</div>
<span class="text-danger"></span>
</div></code>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css" integrity="sha384-4LISF5TTJX/fLmGSxO53rV4miRxdg84mZsxmO8Rx5jGtp/LbrixFETvWa5a6sESd" crossorigin="anonymous">
<div class="form-floating m-3">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text"><i class="bi bi-eye-fill toggle-password" data-target="password-input"></i></span>
</div>
<input class="form-control" autocomplete="current-password" aria-required="true" placeholder="Password" id="password-input" />
</div>
<span class="text-danger"></span>
</div>However when doing this the input cells lose its original design:
I am trying to have the password inputs to maintain the width and general design the other cells have, using solely the bootstrap classes and design. I tried moving around the form-controls, the mb-3, wrapping things differently in other div dispositions and went over the input-group Bootstrap doc but I can’t seem to find what’s interacting incorrectly here.
6