I'm wanting to use Bootstrap's "Floating Label" and "Input Group" components together. The trouble I'm having is that the label is hidden when the input is focused. In my code example below, I have these scenarios:
Does anyone know of a way to make these components work together?
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="form-floating input-group mb-3">
<input type="text" class="form-control" name="code1" placeholder="Code 1">
<label for="code1">Code 1</label>
<span class="input-group-text"><i class="fas fa-times"></i></span>
</div>
<div class="form-floating mb-3">
<input type="text" class="form-control" name="code4" placeholder="Code 4">
<label for="code4">Code 4</label>
</div>
Place the floating label inside another input-group
div.
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="input-group mb-3">
<div class="form-floating flex-grow-1">
<input type="text" class="form-control" name="code1" placeholder="Code 1">
<label for="code1">Code 1</label>
</div>
<span class="input-group-text"><i class="fas fa-times"></i></span>
</div>
Update: Since Bootstrap 5.2, flex-grow-1
is no longer needed and the border rounding is automatically addressed.
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="input-group mb-3">
<div class="form-floating">
<input type="text" class="form-control" name="code1" placeholder="Code 1">
<label for="code1">Code 1</label>
</div>
<span class="input-group-text"><i class="fas fa-times"></i></span>
</div>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With