I want to be able to align these two div
on the same line, and at the same time, in between these two, to be able to add an icon.
Here is an image of how I would like it to look:
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css" rel="stylesheet">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<section class="section">
<div class="row">
<div class="col-lg-12 col-md-12">
<div class="card mb-4">
<div class="card-header">
<small class="form-text text-muted">
<i class="fas fa-tools"></i> Details
</small>
</div>
<div class="card-body">
<p class="font-weight-light text-sm-left" style="margin-bottom: 0rem;"></p>
<div class="row">
<div class="col-md-2 select-outline mb-2">
<small class="form-text text-muted">Price</small>
<input class="form-control" aria-describedby="inputGroup-sizing-sm" name="txt_fl" id="txt_fl" readonly> <i class="fa fa-equals float-right"></i>
</div>
<div class="col-md-1 select-outline mb-2">
<small class="form-text text-muted"> Total</small>
<input class="form-control" aria-describedby="inputGroup-sizing-sm" name="txt_fl_result" id="txt_fl_result" readonly>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
If anyone has a way to do this or another solution by adding a span it would be helpful.
Bootstrap offers multiple utility classes to work with flexbox . Here I leave you a table with some of them showing the property and the value that they will apply:
With this in mind, you can create a column between the columns
inputs
with the following classes:Which will create a container with
display flex
and address columns. By placing within it (and before the icon) an element with the same classes as thoselabels
of the inputs but with an empty text, we will achieve that the icon remains in the space created by the height of the inputs. And if we applyflex-grow
value1
andalign-items
value to the icon containercenter
, we will achieve that it occupies the remaining height and that its elements (in this case the::before
one that contains the icon) are centered vertically:To achieve what you are looking for, you just have to work on the styles.
Inside
div row
you can use your own classes instead of the bootstrap ones, for example you can have this structure:You can then assign styles by percentage, making sure everything adds up to 100%:
If you have the same div that is worth 2% and 2 form divs that are worth (45+2+2)% then
You can also assign a top margin to it so that it is in the center with
And this is how it is displayed as you want:
You could achieve something pretty similar without creating anything new like so:
grilla de Bootstrap
is divided into 12 columns, so we could say thatPrice
andTotal
could occupy5
each one and the=
could occupy2
.=
centered, we can add a<small form-text>
void and using a<button disabled
to add the icon withFont-Awesome
Example: