Bootstrap 4 Invoice Template

bootstrap-4-invoice-template.markdown

Bootstrap 4 Invoice Template

A Pen by Ray Arvin Rimorin on CodePen.

License.

index.html

<div class="container">
  <div class="card">
    <div class="card-header">
      Invoice

    </div>
    <div class="card-body">
      <div class="row mb-4">
        <div class="col-sm-6">
          <h6 class="mb-3">From:</h6>
          <div>
            <strong>Webz Poland</strong>
          </div>
          <div>Madalinskiego 8</div>
          <div>71-101 Szczecin, Poland</div>
          <div>Email: [email protected]</div>
          <div>Phone: +48 444 666 3333</div>
        </div>

        <div class="col-sm-6">
          <h6 class="mb-3">Vehicle</h6>
          <div>
            <strong>Vehiclemake/model</strong>
          </div>
          <div>Lic Plate: plate_no</div>
          <div>Submodel: submodel</div>
          <div>VIN: vin_no</div>
        </div>

      </div>

      <div class="table-responsive-sm">
        <table class="table table-striped">
          <thead>
            <tr>
              <th class="center">#</th>
              <th>Image</th>
              <th>Item</th>
              <th>Description</th>

              <th class="right">Total</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td class="center">1</td>
              <td><img src="https://s3-ap-southeast-2.amazonaws.com/myautomate/photos/1510095337349.png" class="img-thumbnail" width='100px'></td>
              <td class="left strong">Origin License</td>
              <td class="left">Extended License</td>

              <td class="right">$999,00</td>
            </tr>
            <tr>
              <td class="center">2</td>
              <td><img src="https://s3-ap-southeast-2.amazonaws.com/myautomate/photos/1510095659853.png" class="img-thumbnail" width='100px'></td>
              <td class="left">Custom Services</td>
              <td class="left">Instalation and Customization (cost per hour)</td>

              <td class="right">$150,00</td>
            </tr>
            <tr>
              <td class="center">3</td>
              <td><img src="https://s3-ap-southeast-2.amazonaws.com/myautomate/photos/1510096008282.png" class="img-thumbnail" width='100px'></td>
              <td class="left">Hosting</td>
              <td class="left">1 year subcription</td>

              <td class="right">$499,00</td>
            </tr>
            <tr>
              <td class="center">4</td>
              <td><img src="" class="img-thumbnail" width='100px'></td>
              <td class="left">Platinum Support</td>
              <td class="left">1 year subcription 24/7</td>

              <td class="right">$3.999,00</td>
            </tr>
          </tbody>
        </table>
      </div>
      <div class="row">
        <div class="col-lg-4 col-sm-5">

        </div>

        <div class="col-lg-4 col-sm-5 ml-auto">
          <table class="table table-clear">
            <tbody>
              <tr>
                <td class="left">
                  <strong>Subtotal</strong>
                </td>
                <td class="right">$8.497,00</td>
              </tr>
              <tr>
                <td class="left">
                  <strong>Discount (20%)</strong>
                </td>
                <td class="right">$1,699,40</td>
              </tr>
              <tr>
                <td class="left">
                  <strong>VAT (10%)</strong>
                </td>
                <td class="right">$679,76</td>
              </tr>
              <tr>
                <td class="left">
                  <strong>Total</strong>
                </td>
                <td class="right">
                  <strong>$7.477,36</strong>
                </td>
              </tr>
            </tbody>
          </table>

        </div>

      </div>

    </div>
  </div>
</div>

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.css" rel="stylesheet" />