PDF embed in html page

I Need Help
6

Hi @cableguy30.

Try this, there is some CSS, because the Bootstrap classes seem to be focused on media resolutions, this sets it up for a4 paper size (I am assuming). But this will make it responsive.

Don’t forget to replace the URL with your PDF.

<style>
.embed-responsive-210by297 {
  padding-bottom: 141.42%;
}
</style>

<div class="embed-responsive embed-responsive-210by297">
<iframe class="embed-responsive-item" src="https://MY_PDF_URL_GOES_HERE"></iframe>
</div>

If you’re using a different paper size, divide the width by the height and you get the padding % you need. eg. A4 is 210 / 297 * 100 = 141.42 %

I just followed the Bootstrap naming method for the class.

1 Like