Twitter Bootstrap logo

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!

2 thoughts on “How to make WordPress galleries Bootstrap responsive”

  1. While this does add the respective Bootstrap columns around each image, there is no way to specify the size of the images before they are added to the gallery. Mine are showing as the thumbnail size only.

  2. Здравствуйте! Bootstrap comes with built-in responsive images. A responsive image resizes depending on the size of the screen it’s being displayed on. In practice, this may mean an image is full-width in a mobile view — so that you can see the image clearly and use all of the available space — but only take up a percentage of the screen at larger sizes to avoid feeling overwhelming in size. To make use of responsive images in bootstrap, all you need to do is add the css class ‘.img-responsive’ to an image. This will apply a number of css rules to improve responsive behavior.

Comments are closed.