CODEWITHSUNDEEP
htmltwitter-bootstrapfilter
Peter Waddingham
Peter Waddingham

Reputation: 1

Bootstrap data-filter and portfolio item class

I have downloaded a bootstrap template and this is the code for filtering. I don't understand the comment regarding same TAG to portfolio item class. I can't see where I would add this?

<!-- CONTENT CONTAINER-->
    <div class="container">
            <!-- FILTER-->
        <!-- just add your TAG to data-filter="ADD HERE" -->    
        <!-- and then add your same TAG to portfolio item class="ADD HERE" -       ->
        <div class="row">
            <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                <div class="panel panel-default text-center">
                    <div class="panel-body">
                        <div class="proj">
                            <div id="filters">
                            <a href="#" data-filter="*" class=" active btn   btn-danger">Show All</a>
                            <a href="#" data-filter=".graphics" class="btn  btn-danger">Graphics</a>
                            <a href="#" data-filter=".web" class="btn  btn-danger">Web</a>
                            <a href="#" data-filter=".ui" class="btn  btn-danger">UI</a>
                            <a href="#" data-filter=".design" class="btn  btn-danger">Design</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    <!--END: FILTER-->


<!--###################-->
<!-- START PORTFOLIO -->
<!--###################-->
<div id="container-folio" style="position:relative">

<!-- portfolio item -->
<div class="box col-xs-6 col-md-4 col-sm-6 col-lg-3 graphics design">
    <!-- START WRAPPER IMG THUMBNAIL-->
    <div class="thumbnail">
            <!-- NAV LINKS -->
            <div class="plus">
                    <a href="#" title="read more" class="btn btn-lg btn- info"><i class="icon-link"></i></a>
                    <a href="#" title="enlarge" class="btn btn-lg btn-  primary"><i class="icon-eye-open"></i></a>
            </div>
            <!-- /NAV LINKS -->
        <!-- / IMAGE-->
        <img class="img-responsive"  src="http://lorempixel.com/560/420/fashion/10" alt="">
        <!-- / IMAGE-->

Upvotes: 0

Views: 10446

Answers (1)

user1556571
user1556571

Reputation:

I had used this template in my work project. Here the explanation: You bind filter links to each related items through data-filter

data-filter=".graphics"

While you bind each item to its filter link by adding class name to grid column div:

ex. This item is being an item of both graphics and design filters

<div class="box col-xs-6 col-md-4 col-sm-6 col-lg-3 graphics design">

Upvotes: 1

Related Questions