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 or 4/3 ratio aspect, the table wrapper and the image class.

This is useful because users can use the WYSIWYG to add videos, 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 wrappers 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
  • If you want a Bootstrap 4 output instead of the Bootstrap 3 default output or more advanced settings go to module settings

The filter scans the content to find embed videos, tables or images to append the responsive classes and wrappers to the output.

Input Output Bootstrap 3 Output Bootstrap 4
<iframe></iframe> <div class="embed-responsive embed-responsive-16by9"><iframe class="embed-responsive-item"></iframe></div> <div class="embed-responsive embed-responsive-16by9"><iframe class="embed-responsive-item"></iframe></div>
<table></table> <div class="table-responsive"><table class="table"></table></div> <table class="table table-responsive"></table>
<img> <img class="img-responsive"> <img class="img-fluid">

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

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

Project information

Downloads