Bootstrap responsive embed aspect ratio

Bootstrap responsive embed can be very helpful to show responsive PDF files or videos. But it supports only the aspect ration 16by9 and 4by3. But what about other aspect rations? For example 210by297 would be interesting to embed a A4 paper.

How to embed a PDF file

This is my example code to embed a PDF file.

<div class="embed-responsive embed-responsive-16by9">
    <object class="embed-responsive-item" data="/media/post/bootstrap-responsive-embed-aspect-ratio/example.pdf" type="application/pdf" internalinstanceid="9" title="">
        <p>Your browser isn't supporting embedded pdf files. You can download the file
            <a href="/media/post/bootstrap-responsive-embed-aspect-ratio/example.pdf">here</a>.</p>
    </object>
</div>

Here the result. You can see class embed-responsive-16by9 or embed-responsive-4by3 are not really that helpful.

Your browser isn't supporting embedded pdf files. You can download the file here.

Create an other aspect ration

If we take a short look at responsive-embed.less of Bootstrap version 3.3.6, we can see that the classes embed-responsive-16by9 and embed-responsive-4by3 are the only aspect rations.

.embed-responsive-16by9 {
  padding-bottom: 56.25%;
}

.embed-responsive-4by3 {
  padding-bottom: 75%;
}

The property padding-bottom is nothing else than the height of the PDF file divided by the width in percent. So if we want to embed a A4 paper for example, we just have to calculate 297 divided by 210 in percent. The code from above can look like this with the usage of the style property.

<div class="embed-responsive" style="padding-bottom: 141.42%;">
    <object class="embed-responsive-item" data="/media/post/bootstrap-responsive-embed-aspect-ratio/example.pdf" type="application/pdf" internalinstanceid="9" title="">
        <p>Your browser isn't supporting embedded pdf files. You can download the file
            <a href="/media/post/bootstrap-responsive-embed-aspect-ratio/example.pdf">here</a>.</p>
    </object>
</div>

But I would recommend to create a class embed-responsive-210by297.

.embed-responsive-210by297 {
  padding-bottom: 141.42%;
}

The result looks like this.

Your browser isn't supporting embedded pdf files. You can download the file here.

Next Previous