<!-- whole section; you can replace "background-image:url(link)" with other driver license backgrounds.. if you can find any. this is also where you can edit the color of the non bootstrap text- if you want to replace the bootstrap text color, ctrl-f "primary" and "danger" into whatever you so wish-->
<div class="col-sm-4 mx-auto py-2" style="background-image:url(https://media.istockphoto.com/id/1181713404/vector/guilloche-grid-template-for-diplomas-certificates-documents.jpg?s=612x612&w=0&k=20&c=JsX5J-PlHUKpzjLF2WgHZEN0BfR_oIYAXkGk_WMVgks=); background-repeat: no-repeat; background-size:cover; border-radius:10px; color:#345CCC; font-size:1.2rem;">
<div class="row no-gutters">
<!-- state -->
<div class="col-5 my-auto" style="font-family:georgia; font-size:1.75rem;">
State
</div>
<!-- drivers license text -->
<div class="col-7 my-auto justify-content-end" style="font-weight:700; font-size:1.25rem;">
DRIVERS LICENSE <i class="mx-2 fa-solid fa-circle-star my-auto" style="font-size:1.75rem; opacity:.9"></i>
</div>
</div>
<div class="row no-gutters">
<div class="col-sm-4 col-8 justify-content-center flex-column mx-auto">
<!-- license image on the left -->
<img src="https://f2.toyhou.se/file/f2-toyhou-se/users/catastrophyte?12">
<!-- signature -->
<span class="mx-auto" style="font-family:terminal; font-size:1.25rem;"><i>
SIGNATURE
</i></span>
</div>
<div class="col-sm-8">
<div class="row no-gutters">
<!-- ID number -->
<div class="col-6">
<span class="text-primary">
ID No
</span>
<span>
A123456789
</span>
</div>
<!-- Expiration date -->
<div class="col-6 justify-content-end">
<span class="text-primary">
Exp
</span>
<span>
01/02/3456
</span>
</div>
<!-- date of birth -->
<div class="my-n2 col-6">
<span class="text-primary">
DOB
</span>
<span>
01/02/3456
</span>
</div>
<!-- issue date -->
<div class="my-n2 col-6 justify-content-end">
<span class="text-primary">
ISS
</span>
<span>
01/02/3456
</span>
</div>
</div>
<!-- last name -->
<p class="mb-n2" style="font-size:1.1rem;">
LAST NAME
</p>
<!-- first name -->
<p class="my-n2" style="font-size:1.1rem;">
FIRST NAME
</p>
<!-- address (street) -->
<p class="my-n2" style="font-size:1rem;">
123 STATE ST.
</p>
<!-- address (state, city)r -->
<p class="my-n2" style="font-size:1rem;">
STATE, CITY
</p>
<div class="row no-gutters mt-2">
<!-- sex -->
<div class="col-3">
<span class="text-primary">
Sex
</span>
<span>
X
</span>
</div>
<!-- height -->
<div class="col-3">
<span class="text-primary">
Hgt
</span>
<span>
1'2"
</span>
</div>
<!-- weight -->
<div class="col-4">
<span class="text-primary">
Wgt
</span>
<span>
123 lb
</span>
</div>
<!-- hair -->
<div class="col-3">
<span class="text-primary">
Hair
</span>
<span>
COL
</span>
</div>
<!-- eyes -->
<div class="col-3">
<span class="text-primary">
Eyes
</span>
<span>
COL
</span>
</div>
</div>
<!-- driving restrictions -->
<p style="font-size:1.1rem;">
Restrictions
<span class="my-auto mx-1" style="font-size:1rem;">
Corrective lenses
</span>
</p>
<!-- donor status -->
<p class="text-danger" style="position:absolute; left:11rem; bottom:0;;">DONOR<i class="fa fa-heart my-auto mx-2"></i></p>
<!-- bottom right image. this one can be awkward if your photo is more landscape than portrait unfortunately -->
<img src="https://f2.toyhou.se/file/f2-toyhou-se/users/catastrophyte?12" style="height:100px; position:absolute; bottom:0; right:0; opacity:.5; z-index:1;">
<!-- code credit, do not remove! -->
<a class="tooltipster text-primary" title="code by catastrophyte!" href="https://toyhou.se/catastrophyte"><i class="fa fa-code" style="position:absolute; bottom:0.3rem;right:0; z-index:2;"></i></a>
</div>
</div>
</div>
