Title: Bootstrap Responsive Sizes
Last modified: August 21, 2016

---

# Bootstrap Responsive Sizes

 *  [Zach Atkinson](https://wordpress.org/support/users/z_atk/)
 * (@z_atk)
 * [11 years, 8 months ago](https://wordpress.org/support/topic/bootstrap-responsive-sizes/)
 * Hi Kyle,
 * Just wondering if you could clear up some confusion for me. I am using Bootstrap
   3 for my theme, and trying to set the proper breakpoints. Initially I thought
   this was as simple as taking my defined Bootstrap breakpoints and plugging them
   into the right function.
 * Upon watching the behaviour of PictureFill.WP I noticed this line:
 * `<span data-src="http://zachatkinson.com/wp-content/uploads/2014/06/how-to-use-
   scrapebox.jpg" data-width="1920" data-height="1080" data-media="(min-width: 1940px)"
   class="picturefill-wp-source post-thumbnail"></span>`‘
 * Here I see 20 pixels being added to my breakpoint sizes in **data-media=”min-
   width: 1940px)**. I assume this is to properly centre the image with 10 pixel
   margins on both sides. Here are my Bootstrap 3 breakpoints:
    1. Extra Small – 480px
    2. Small – 768px
    3. Medium – 992px
    4. Large – 1200px
    5. Post Thumbnail – 1080px
 * Now, Initially I had set the breakpoints to the same values as this, but I’m 
   realizing this means the min-width test with the extra 20 pixels is going to 
   FUBAR things – so should I be subtracting 20 pixels from each of my responsive
   sizes to get the proper breakpoint including wrapper space?
 * I’m assuming this is a yes, but some confirmation would be nice. If we can confirm
   the proper breakpoint values for Bootstrap 3 they should be added to the documentation
   to prevent the trial/error and headaches I’ve been facing trying to get a highly
   supported framework to get along nicely.
 * Long story short – if my theme breakpoints are :
    1. Extra Small – 480px
    2. Small – 768px
    3. Medium – 992px
    4. Large – 1200px
 * What should my picturefill breakpoints be?
 * Once we settle this and add it to the documentation I am sure you will see a 
   great jump in users.

Viewing 2 replies - 1 through 2 (of 2 total)

 *  Plugin Author [kylereicks](https://wordpress.org/support/users/kylereicks/)
 * (@kylereicks)
 * [11 years, 8 months ago](https://wordpress.org/support/topic/bootstrap-responsive-sizes/#post-5127622)
 * I apologize for the headaches. There isn’t a super easy answer to what the breakpoints
   should be. We’re limited to media queries that look at browser width, and not
   container width. A theme may have a breakpoint at 768px, but maybe we want images
   to be in three equal columns above 768px and two equal columns below 768px. The
   [`sizes` attribute](http://ericportis.com/posts/2014/srcset-sizes/) tries to 
   fill this gap, but the syntax can be a little confusing, and it isn’t something
   that is implemented with this version of the plugin.
 * So we’re stuck with media queries. I tried to make up for the limitations of 
   media queries by including as much information as possible in the `picturefill_wp_media_query_breakpoint`
   filter.
 *     ```
       add_filter('picturefill_wp_media_query_breakpoint', 'theme_breakpoints', 10, 6);
   
       function theme_breakpoints($default_breakpoint, $image_size, $image_width, $image_attributes, $image_attachment_data, $image_sizes){
   
       /*
       Let's say we just want to have the breakpoint equal the image width.
       */
   
         return $image_width;
   
       /*
       Or maybe we have a 32px margin around each image. In that case
       we'll want width + 32 + 32.
       */
   
         return $image_width + 64;
   
       /*
       Or maybe we want a more seamless responsiveness, so we'll set
       the breakpoint to the width of the image below the current one
       in the queue.
       */
         // First we find the position of the current image size in the list of images
         $image_size_index = array_search($image_size, $image_sizes);
         // Next we set the index for the next image size down
         if('@2x' === substr($image_size, -3)){
           $new_index = $image_size_index - 3;
         }else{
           $new_index = $image_size_index - 2;
         }
         // Lastly, we set the breakpoint to the width of the next smaller image size. If the image is already our smallest, we set the breakpoint to 1.
         if(0 <= $new_index){
           $new_breakpoint = $image_attachment_data[$image_sizes[$new_index]][1];
         }else{
           $new_breakpoint = 1;
         }
         return $new_breakpoint;
       }
       ```
   
 * I think these three scenarios (image width, width + margin, and width of the 
   next smallest image) will cover a lot of use cases, but obviously not all. An
   image in a sidebar may need to be “thumbnail” sized at desktop widths, but when
   on mobile when the design drops to a single column, it may need to be “medium”
   sized.
 * The documentation could always be better. I’ll dedicate some time to making it
   more clear after I squash this [HDPI media query bug](http://wordpress.org/support/topic/am-i-missing-sometihng?replies=4)
   that is floating around.
 * Thanks very much for posting your questions. I know I’ve thrown a lot out there,
   so if there is anything that needs more explanation, or if there’s something 
   I missed that should still be addressed, don’t hesitate to bring it up.
 * Thanks again,
    Kyle
 *  Thread Starter [Zach Atkinson](https://wordpress.org/support/users/z_atk/)
 * (@z_atk)
 * [11 years, 8 months ago](https://wordpress.org/support/topic/bootstrap-responsive-sizes/#post-5127628)
 * Kyle,
 * Thanks for the detailed response – the headaches do not come from anything on
   your end but rather me still working on wrapping my head around how things work.
   Please understand how grateful I am for your time and efforts on this plugin (
   both branches!) and taking your time to respond to the user base. I hope my post
   didn’t come off to you as rude.
 * I will look this over and respond to both threads shortly. I have actually been
   using PFWP 2.0 on a client build I’m launching to replace their aging site, as
   such I’ve got all new things to figure out – but with your help I am confident
   it will be nothing I can’t handle.
 * Great plugin
 * -Zach

Viewing 2 replies - 1 through 2 (of 2 total)

The topic ‘Bootstrap Responsive Sizes’ is closed to new replies.

 * ![](https://s.w.org/plugins/geopattern-icon/picturefillwp.svg)
 * [Picturefill.WP](https://wordpress.org/plugins/picturefillwp/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/picturefillwp/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/picturefillwp/)
 * [Active Topics](https://wordpress.org/support/plugin/picturefillwp/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/picturefillwp/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/picturefillwp/reviews/)

## Tags

 * [picturefill](https://wordpress.org/support/topic-tag/picturefill/)

 * 2 replies
 * 2 participants
 * Last reply from: [Zach Atkinson](https://wordpress.org/support/users/z_atk/)
 * Last activity: [11 years, 8 months ago](https://wordpress.org/support/topic/bootstrap-responsive-sizes/#post-5127628)
 * Status: not resolved