使用Bootstrap 4设置发票表单的样式

Question

In my VueJS application I am building an invoice form using Bootstrap 4, I am using this code snippet and everything has been great so far but the problem is that, when it comes to styling a UI I kind of suck at the moment :)

The problem here is that the bottom totals part is floating to the left instead of to the right. This code snippet has been taken from a Bootstrap 3 code snippet samples and I am using Bootstrap 4 so probably this is the issue. However, I've tried converting it to Bootstrap 4 using online converters but none of them helped me. I would appreciate your help.

This is the code that I want to float 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>

Answer 1

You could use offset for responsively offsetting the columns. Since the container of #tab_logic_total table is taking up 4 columns, we have 8 left, so:

<div class="row clearfix" style="margin-top:20px">
  <!-- Notice this line: We are offsetting the table by 8 columns -->
  <div class="col-lg-4 offset-lg-8">
    <table class="table table-bordered table-hover" id="tab_logic_total">
      <tbody>
        <tr>
          <th class="text-center">Sub Total</th>
          <td class="text-center">

At this point, we no longer need the float-right class. It won't have any effect on flexbox anyway.

Further readings:

• Bootstrap Grid system