Im using the barryvdh dompdf to generate the pdf file for my view ,
This is the expected outcome:
but what I got is ：
The css design of the view has been change . im using both css and bootsrap for desgining the page may I ask how the improve this?
here is my code on view
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,
initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity=
"sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous">
<link rel="stylesheet" href=
"https://use.fontawesome.com/releases/v5.4.1/css/all.css"
integrity=
"sha384-5sAR7xN1Nv6T6+dT2mhtzEpVJvfS3NScPQTrOxhwjIuvcA67KV2R5Jz6kr4abQsz"
crossorigin="anonymous">
<title>
Events Ticket
</title>
</head>
<style>
h6
{
color: #96a0a5;
}
h3
{
color: #b7af92;
}
p{
caret-color: white;
}
span{
color:#b7af92 ;
}
</style>
<body>
<div class="container mt-5 ms-5 " >
<div class="row">
<div class="col-lg-8 mb-4">
@foreach ($tickets as $key=> $ticket)
<div class="card" >
<div class="card-body" style="background-color: #48617d;">
<div class="col-12">
<div class="row" >
<div class="col-6" >
<h6 class="card-title">Event : <span>{{ $ticket->GiftGiving->name }}</span></h6>
<h6 class="card-title ">Name: <span>{{ $ticket->name }}</span></h6>
<h6 class="card-title ">Date &Time: <span>{{ $ticket->GiftGiving->start_at }}</span></h6>
<h6 class="card-title ">Venue: <span> {{ $ticket->GiftGiving->venue }}</span></h6>
</div>
<div class="col-6 text-center mt-3" style=" border-left-style: dashed; border-color: #b7af92;">
<h6><span >Ticket No. {{ $ticket->ticket_no }}</span></h6>
<h6><span class="mt-5">Batch No: {{ $ticket->GiftGiving->batch_no}} </span></h6>
</div>
</div>
</div>
</div>
</div>
@endforeach
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin="anonymous">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous">
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous">
</script>
</body>
</html>
code of my controller:
public function GenerateTicket($code)
{
$GiftGiving = GiftGiving::where('code', $code)->firstOrFail(); //4.3 ??
$tickets = GiftGivingBeneficiaries::where('gift_giving_id', $GiftGiving->id)->get();
# Retrieve the last batch no. from the gift giving.
$batch_no = $GiftGiving->batch_no;
GiftGiving::where('code', $code)->firstOrFail()->update([
'last_downloaded_by' => Auth::id(),
'batch_no' => $batch_no + 1,
]);
$pdf = PDF::loadView('charity.gifts.generate_ticket', compact('tickets'));
return $pdf->download('event_tickets.pdf');
}
Any answer is high appreciated, feel free to drop answer . Thank you in advance.
new updated part
this is how it looks like inside the browser
