I have styled inputs (I’ll put the CSS here, which has ultimately got too complicated and I have lost track of where I need to remove and fix). I am trying to get labels to fit above my input, my select options and my output.
/* ================== */
/* === GLOBAL CSS === */
/* ================== */
/* Input Placeholder and Select Text Size */
input[type="number"]::-webkit-input-placeholder {
font-size: 75%;
line-height: 1.5;
}
input[type="number"]::-moz-placeholder {
font-size: 75%;
line-height: 1.5;
}
input[type="number"]:-moz-placeholder {
font-size: 75%;
line-height: 1.5;
}
input[type="number"]:-ms-input-placeholder {
font-size: 75%;
line-height: 1.5;
}
select.form-select {
font-size: 75%;
box-sizing: border-box;
}
select.form-select,
input.reset_form {
height: calc(1.5em + 0.75rem + 2px);
}
.form-group .row .col:first-child {
padding-right: 0;
}
.form-group .row .col:last-child {
width: auto;
}
.form-group {
display: flex;
align-items: center;
}
.form-group .row {
flex: 1;
}
.form-group .row .col:first-child {
flex: 1;
}
label.form-label {
padding-top: 6px;
}
/* Set height of input boxes */
.form-control.input-rounded-start {
height: 34px;
}
.input-group-text {
height: 34px;
padding: 0.375rem 0.75rem;
}
/* ================= */
/* === LOCAL CSS === */
/* ================= */
td.form-group {
display: flex;
align-items: center;
}
td.form-group label.form-label {
padding-top: 6px;
}
.input-wrapper {
display: flex;
align-items: center;
}
.input-group {
display: flex;
width: 100%;
}
.input-group input {
width: 75%;
display: inline-block;
vertical-align: middle;
height: calc(1.5em + 0.75rem + 2px);
padding: 0.375rem 0.75rem;
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
color: #495057;
background-color: #fff;
border: 1px solid #ced4da;
border-radius: 0.25rem 0 0 0.25rem;
}
.input-group select {
max-width: 20%;
display: inline-block;
vertical-align: middle;
height: calc(1.5em + 0.75rem + 2px);
padding: 0.375rem 0.75rem;
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
color: #495057;
background-color: #f0f0f0;
border: 1px solid #ced4da;
border-left: none;
border-radius: 0 0.25rem 0.25rem 0;
}
.row-input {
display: flex;
align-items: center;
padding: 0 10px;
}
.row-input .form-control {
height: calc(1.5em + 0.75rem + 2px);
}
.input-group {
display: flex;
align-items: center;
flex: 1;
}
.input-group input {
width: 60%;
}
.input-group select {
width: 15%;
margin-left: -1px;
}
.output-group {
width: 25%;
margin-left: -1px;
}
.select-input {
width: 10% !important;
}
.output-group {
background-color: #f8f8f8;
border: 1px solid #ccc;
color: #555;
font-style: italic;
}
.input-label-container {
position: relative;
}
.label-above {
position: absolute;
top: -1.3em;
font-size: 0.8em;
opacity: 0.7;
}<section class="container border border-primary bg_cont mb-3">
<div class="row justify-content-center">
<div class="col-lg-10 mx-auto">
<div class="card shadow-sm p-3 mt-1 mb-1">
<span></span>
<div class="card-body">
<div class="row mb-3 row-input">
<div class="col-md-12">
<label for="input" class="form-label d-none d-sm-inline">Input</label>
<div class="input-group p-1">
<input type="number" name="" id="" class="reset_form formCheck maxAllow form-control input-rounded-start">
<!-- Label Needs To Go Here -->
<select class="form-select select-input" name="unitsVelocity" id="units">
<option value="c" selected>c</option>
</select>
<!-- Label Needs To Go Here -->
<div class="form-control output-group" id="value">
*stuff*</div>
</div>
</div>
</div>
</div>
<!-- More stuff -->
</section>The labels, if I put them there, just break the input and select boxes. (picture below).
I know I need to get these into columns but I want the output to look like the picture below except with labels above the elements.
I’ve tried manipulating columns etc, but this ultimately ends up breaking the boxes.
I have numerous CSS to keep my inputs the way I want them (check snippet).
The lavel-above and container idea was good, but it didn’t put the labels above without breaking the input box.
This is the best I have at the moment… any ideas would be wonderful. I am using Bootstrap 5.2
Summary: I would like labels above my select box and my output box the same way I have a label above my input box. I want to keep the same style for all my input, select and output, but just with labels above.
2
Answers
The following snippet fix your dropdown:
Bootstrap 5, AFAIK, doesn’t have a built-in way to handle labels above inputs within input groups. That said, if you carefully follow the documentation, you can achieve something quite similar with floating labels and input groups.
Here is a working snippet, with no additional CSS.
Note the use of
.form-floating, placeholders and the placement of the labels after the inputs, as per the documentation.