Utilizing Bootstrap 4, I am designing a row with two items placed in a column. The first item should always be aligned to the left of the row, while the second item is centered within the row. I have successfully achieved this layout using custom CSS. Is it possible to accomplish the same result solely using Bootstrap without additional CSS?
Below is the CSS code I have used:
.float_left {
float: left;
}
.float_center {
float: right;
position: relative;
left: -50%;
text-align: left;
}
.float_center > .child {
position: relative;
left: 50%;
}
Here is the corresponding HTML:
<div class="row" >
<div class="col-12" style="z-index:5000;">
<span class="float_left">Left</span>
<div class="float_center">
<span class="child">Center</span>
</div>
</div>
</div>