make wordpress gallery responsive with bootstrap grid

wp-bootstrap-gallery.php

<?php
function bootstrap_gallery( $output = '', $atts, $instance )
{

    if (strlen($atts['columns']) < 1) {
        $columns = 3;
    }
    else {
        $columns = $atts['columns'];
    }
    
    $images = explode(',', $atts['ids']);

    if ($columns < 1 || $columns > 12) {
        $columns == 3;
    }

    
    $col_class = 'col-xs-' . 12/$columns;
    
    $return = '<div class="row gallery">';

    $i = 0;

    foreach ($images as $key => $value) {

        if ($i%$columns == 0 && $i > 0) {
            $return .= '</div><div class="row gallery">';
        }

        $image_attributes = wp_get_attachment_image_src($value, 'full');

        $return .= '
            <div class="'.$col_class.'">
                <div class="gallery-image-wrap">
                    <a data-gallery="gallery" href="'.$image_attributes[0].'">
                        <img src="'.$image_attributes[0].'" alt="" class="img-responsive">
                    </a>
                </div>
            </div>';

        $i++;
    }

    $return .= '</div>';

    return $return;
}

add_filter( 'post_gallery', 'bootstrap_gallery', 10, 4);
?>

Very useful thanks.

How can I use this?

function bootstrap_gallery( $output = '', $atts, $instance ) {
  $atts = shortcode_atts(array(
    'order'      => 'ASC',
    'orderby'    => 'menu_order ID',
    'id'         => $post ? $post->ID : 0,
    'itemtag'    => $html5 ? 'figure'     : 'dl',
    'icontag'    => $html5 ? 'div'        : 'dt',
    'captiontag' => $html5 ? 'figcaption' : 'dd',
    'columns'    => 3,
    'size'       => 'thumbnail',
    'include'    => '',
    'exclude'    => '',
    'link'       => ''
  ), $atts, 'gallery' );

  $images = explode(',', $atts['include']);
  if($atts['columns'] < 1 || $atts['columns'] > 12) {
    $atts['columns'] == 3;
  }
  
  $col_class = 'col-sm-' . 12/$atts['columns'];
  
  $output = '<div class="gallery">';
  $output .= '<div class="row">';
  foreach($images as $i => $id) {
    if ($i%$atts['columns'] == 0 && $i > 0) {
      $output .= '</div><div class="row">';
    }

    $attr = ( trim( $attachment->post_excerpt ) ) ? array( 'aria-describedby' => "$selector-$id" ) : '';
    if( ! empty( $atts['link'] ) && 'file' === $atts['link'] ) {
      $image_output = wp_get_attachment_link( $id, $atts['size'], false, false, false, $attr );
    } elseif ( ! empty( $atts['link'] ) && 'none' === $atts['link'] ) {
      $image_output = wp_get_attachment_image( $id, $atts['size'], false, $attr );
    } else {
      $image_output = wp_get_attachment_link( $id, $atts['size'], true, false, false, $attr );
    }

    $output .= '
      <div class="'.$col_class.'">
          <div class="gallery-image-wrap">
          '.$image_output.'
          </div>
      </div>';
  }
  $output .= '</div></div>';
  return $output;
}
add_filter('post_gallery', 'bootstrap_gallery', 10, 3);