<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div id="background"> <div id="template" class="A4"> <div id="artwork" class="container"> <div class="row inset_x"> <div class="col-2"> logo </div> <div class="col-8"> Variabele tekst </div> <div class="col-2"> <p>Info regel 1</p> <p>Info regel 2</p> </div> </div> <div class="row inset_x"> <h2>afbeelding</h2> </div> <div class="row inset_x"> <p>Info regel 1</p> <p>Info regel 2</p> </div> </div> </div> </div>

#background{ background-size: 40px 40px; background-image: radial-gradient(circle, #000000 1px, rgba(0, 0, 0, 0) 1px); } #template{ background-color: #FFF; margin: auto; width: 50%; } #artwork{ background-color: #ffc426; margin: auto; } .inset_x{ padding-left: calc(31.602px * 3.7795275591); padding-right: calc(31.602px * 3.7795275591); }

$( document ).ready(function() { if($( "#template" ).hasClass( "A4" )){ $("#template").width(mmToPixels(210)); $("#template").height(mmToPixels(297)); } }); function mmToPixels(toInput){ var myDistance = toInput * 3.7795275591; return myDistance }