Bootstrap responsive wrappers module adds a new filter in your input formats that checks the content and adds the video wrapper for responsive videos with 16/9 ratio aspect, the table wrapper and the Image class.

This is useful beacuse users can use the WYSIWYG to add vídeos, tables or images and magically append the responsive wrappers, without the need to allow users to create divs or know or remember to add the bootstrap responsive wrapper or classes.

Installation and configuration

  • Enable the module
  • Go to your input formats
  • Add the responsive wrapper filter in your input format
  • Configure the input format

The filter scan the content to find youtube or vimeo iframes and appends the class and wrapper to the output:

<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item ...
</div>

The video detection expersion it's configurable to match other video services.

Also search for tables and appends the class and wrapper in the output:

<div class="table-responsive">
  <table class="table ...
</div>

And images to include the responsive class:

<img class="img-responsive ...

If you are using a Bootstrap theme or subtheme this works directly, if not you can add this styles to your project:

.embed-responsive-16by9 {
    padding-bottom: 56.25%;
}
.embed-responsive {
    position: relative;
    display: block;
    height: 0;
    padding: 0;
    overflow: hidden;
}
.embed-responsive iframe,
.embed-responsive .embed-responsive-item {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}
.table-responsive {
    min-height: .01%;
    overflow-x: auto;
}
.img-responsive {
    max-width: 100%;
    height: auto;
}
Supporting organizations: 

Project Information

Downloads