GALLERY | Bootstrap Masonry Portfolio


A clean and well-structured layout allows you to show off your work in an elegant way and gives website visitors a pleasing experience.

Adobe Muse Version 2017 required!

Masonry is a grid layout based on columns. Unlike other grid layouts, it doesn’t have fixed height rows. Basically, Masonry layout optimizes the use of space inside the web page by reducing any unnecessary gaps.

The Widgets are based on bootstrap. They work with predefined breakpoints to fit on any device. Portfolio changes the size for all image containers perfect and smoothly.


Have a look at the following samples to see how a design can be arranged in a Masonry layout

Sample 1

Sample 2

Sample 3

All Elements are dynamic, this creates an awesome user experience. You can have any amount of pictures
from 2 up to 30 images(XL Version 60 images).

A sample .muse file is included


Categorie & Main Widget


Categorie options

- Page Background color (overrides muse browser fill function)
-  10 Categories
("all" is a predefined category, but the label can be changed or turned off. )
- Style your categories with button color, hover color, transition time, padding, border radius and all the text options from adobe muse



- Full Version: Images min. 2 max. 30
XL Version: Images min. 2 max. 60


Image options

- Filename
- Caption text (will be used as "alt" text also)
- Picture size (small, large, tall)
- Category name Important!
- Link to another page


Style options

- Portfolio background color
- Padding: Space between the images. (try to use a value 0 <> 10, which gives the best results.
- Animated captions and overlay ON/OFF
- Overlay color, opacity, text color



Important: you can switch between horizontal and vertical captions


Filter styles

- Grey, sepia & blur filter

Browser support

Tested on a desktop: Chrome, Safari, FF, Opera, IE8+, partial support
of IE7 (works, but some visual layout features, are missing).

Mobile: default browser in Android 2.3+, iOS5+, Blackberry 10+,
WP7+, mobile Opera and Chrome on Android.

Help & Hints

- Your minimum Breakpoint should be set to 1200px

- Stretch the "Main" widget item to "browser width"

- Mix the pictures for better user experience

- Layout in Muse is NOT the final result, it is only visible in a browser preview or as site uploaded to a server.
BUT: As long as you use a value between 0 and 5 for the "main padding", the layout in Adobe muse looks quite right.

- Make all picture setting in the widget before you turn the picture ON (works sometimes faster).

- Be careful about the order of the different image sizes. Try to fill out every gap.

Widgets for Muse