Portfolio Setup

Portfolio Setup

The portfolio is a filterable, isotope powered grid of project items. Each item is a .portfolio-item inside a #portfolio container, with an optional filter list above it. This page covers the base setup, item markup, and filtering.

Structure

The grid container carries #portfolio, the .portfolio class, the Bootstrap .row and Canvas .grid-container classes, gutter helpers, and a data-layout attribute for the isotope layout mode.

<div id="portfolio" class="portfolio row grid-container gutter-20 gutter-sm-50" data-layout="fitRows">

    <!-- Portfolio Item -->
    <article class="portfolio-item col-12 pf-media pf-icons">
        <div class="grid-inner row g-0">

            <!-- Image -->
            <div class="portfolio-image">
                <a href="portfolio-single.html">
                    <img src="images/portfolio/1/1.jpg" alt="Open Imagination">
                </a>
                <div class="bg-overlay">
                    <div class="bg-overlay-content dark" data-hover-animate="fadeIn">
                        <a href="images/portfolio/full/1.jpg" class="overlay-trigger-icon bg-light text-dark" data-lightbox="image" title="Image"><i class="uil uil-plus"></i></a>
                        <a href="portfolio-single.html" class="overlay-trigger-icon bg-light text-dark"><i class="uil uil-ellipsis-h"></i></a>
                    </div>
                    <div class="bg-overlay-bg dark" data-hover-animate="fadeIn"></div>
                </div>
            </div>

            <!-- Description -->
            <div class="portfolio-desc">
                <h3><a href="portfolio-single.html">Open Imagination</a></h3>
                <span><a href="#">Media</a>, <a href="#">Icons</a></span>
            </div>

        </div>
    </article>

</div><!-- #portfolio end -->

Filter

Add a .grid-filter list above the grid and point it at the grid with data-container. Each filter link uses data-filter to select a category class. The active filter is marked .activeFilter, and data-filter="*" shows everything.

<ul class="grid-filter" data-container="#portfolio">
    <li class="activeFilter"><a href="#" data-filter="*">Show All</a></li>
    <li><a href="#" data-filter=".pf-icons">Icons</a></li>
    <li><a href="#" data-filter=".pf-illustrations">Illustrations</a></li>
    <li><a href="#" data-filter=".pf-uielements">UI Elements</a></li>
    <li><a href="#" data-filter=".pf-media">Media</a></li>
    <li><a href="#" data-filter=".pf-graphics">Graphics</a></li>
</ul><!-- .grid-filter end -->

Wrap the filter in .grid-filter-wrap when you need a styled container. Filter style variants are available:

<div class="grid-filter-wrap">
    <ul class="grid-filter style-2 mb-0" data-container="#portfolio">
        <li class="activeFilter"><a href="#" data-filter="*">All</a></li>
        <li><a href="#" data-filter=".pf-icons">Icons</a></li>
    </ul>
</div>

Categories

Each .portfolio-item gets one or more category classes prefixed pf- (for example pf-media, pf-icons). These must match the data-filter selectors in the filter list.

<article class="portfolio-item col-lg-3 col-md-4 col-sm-6 col-12 pf-media pf-icons">
    ...
</article>

Options

• data-layout on #portfolio: isotope layout mode, for example fitRows or masonry.
• .gutter-20, .gutter-sm-50: column gutter sizes at different breakpoints.
• .grid-inner: inner wrapper of each item, often paired with .row .g-0 for edge to edge image and description.
• .portfolio-image: holds the thumbnail and the hover .bg-overlay.
• .portfolio-desc: title <h3> and category <span> block.
• .grid-filter with data-container: the filter list bound to a specific grid.
• .style-2, .style-3: filter appearance variants.

Tips

• Column classes on each .portfolio-item (like col-lg-3 col-md-4) control how many items appear per row.
• The pf-* classes on items must exactly match the data-filter selectors, otherwise a filter shows nothing.
• Use data-layout="masonry" for uneven heights, or fitRows for a clean grid of equal rows.
• The hover overlay uses .bg-overlay with .overlay-trigger-icon links; add data-lightbox="image" to open the full image in a lightbox.