How to make WordPress galleries Bootstrap responsive

Using WordPress native gallery is pretty convenient if you don’t need something really fancy. The main issue with it is that it’s not natively responsive.

So how to make your gallery responsive if you’re developing under Bootstrap?

I did a long research and most of the plugins use old versions of Bootstrap with span classes rather using col classes.

The one I found working with Bootstrap version 3 and up, WordPress version 3.6 and up, and ultimately used in one of my projects is called Twitter Bootstrap Galleries. It wraps WP galleries in Bootstrap grid and makes them fully responsive.

The plugin is very simple, you don’t need to change anything in your code or [gallery] shortcode. The only thing you need to do is change the number of columns to show per row. Navigate to Settings -> Twitter Bootstrap Galleries settings and choose the number.

Choosing number of columns per row

Here’s the grid matrix for the plugin:

[code]
/* the grid display */
/*
| columns | mobile | tablet | desktop |per page |
—————————————————-|———–|
| 1 | 1 | 1 | 1 | 10 |
|—————————————————|———–|
| 2 | 1 | 2 | 2 | 10 |
|—————————————————|———–|
| 3 | 1 | 1 | 3 | 9 |
|—————————————————|———–|
| 4 | 1 | 2 | 4 | 12 |
|—————————————————|———–|
| 5 | n/a | n/a | n/a | n/a |
|—————————————————|———–|
| 6 | 2 | 4 | 6 | 12 |
|—————————————————|———–|
| >=6 | n/a | n/a | n/a | n/a |
|—————————————————————|
*
*
*/
[/code]

That’s it! Super simple!

Enjoy your responsive galleries!