Currently in my VueJS project, I am constructing an invoice form with the help of Bootstrap 4. Utilizing this snippet, everything has been running smoothly so far. However, I seem to be struggling when it comes to styling the UI at the moment.
The issue I am facing is that the lower portion containing the totals is aligning to the left instead of the right as intended. The code snippet was originally designed for Bootstrap 3 and trying to adapt it to Bootstrap 4 using online converters hasn't been successful for me. Any assistance on this matter would be highly appreciated.
This section of code should align to the right:
<div class="row clearfix" style="margin-top:20px">
<div class="float-right col-lg-4">
<table class="table table-bordered table-hover" id="tab_logic_total">
<tbody>
<tr>
<th class="text-center">Sub Total</th>
<td class="text-center">
<input type="number" name="sub_total" placeholder="0.00" class="form-control" id="sub_total" readonly>
</td>
</tr>
<tr>
<th class="text-center">Tax</th>
<td class="text-center">
<div class="input-group mb-2 mb-sm-0">
<input type="number" class="form-control" id="tax" placeholder="0">
<div class="input-group-addon">%</div>
</div>
</td>
</tr>
<tr>
<th class="text-center">Tax Amount</th>
<td class="text-center">
<input type="number" name="tax_amount" id="tax_amount" placeholder="0.00" class="form-control" readonly>
</td>
</tr>
<tr>
<th class="text-center">Grand Total</th>
<td class="text-center">
<input type="number" name="total_amount" id="total_amount" placeholder="0.00" class="form-control" readonly>
</td>
</tr>
</tbody>
</table>
</div>
</div>