<ul class="nav nav-pills">
  
  <li id="isotopedemo">
    <a href="" data-filter="*">
      Demo All
    </a>
  </li>

  <li class="dropdown forsale">
    <a class="dropdown-toggle" data-toggle="dropdown" class="menu">
      For Sale
      <b class="caret">
      </b>
    </a>
    <ul class="dropdown-menu forsaledropdwon">
      <li id="isotope">
        <a href="" data-filter=".cat1">
          Demo 1
        </a>
      </li>
      <li id="isotopedemo">
        <a href="" data-filter=".cat2">
          Demo 2
        </a>
      </li>
      <li id="isotopedemo">
        <a href="" data-filter=".cat3">
          Demo 3
        </a>
      </li>
      <li id="isotopedemo">
        <a href="" data-filter=".cat4">
          Demo 4
        </a>
      </li>
      <li id="isotopedemo">
        <a href="" data-filter=".cat5">
          Demo 5
        </a>
      </li>
      <li id="isotopedemo">
        <a href="" data-filter=".cat6">
          Demo 6
        </a>
      </li>
    </ul>
  </li>

  <li class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" class="menu">
      For Sale
      <b class="caret">
      </b>
    </a>
    <ul class="dropdown-menu mdrp">
      <li id="isotope">
        <a href="" data-filter=".cat1">
          Demo 1
        </a>
      </li>
      <li id="isotopedemo">
        <a href="" data-filter=".cat2">
          Demo 2
        </a>
      </li>
      <li id="isotopedemo">
        <a href="" data-filter=".cat3">
          Demo 3
        </a>
      </li>
      <li id="isotopedemo">
        <a href="" data-filter=".cat4">
          Demo 4
        </a>
      </li>
      <li id="isotopedemo">
        <a href="" data-filter=".cat5">
          Demo 5
        </a>
      </li>
      <li id="isotopedemo">
        <a href="" data-filter=".cat6">
          Demo 6
        </a>
      </li>
    </ul>
  </li>
  
</ul>

<div id="content">
  <div class="box cat1 cat3">
    <h2 class="box-title">
      Lorem Ipsum
    </h2>
    <div class="box-text">
      Urna vut, eros aliquet sagittis augue? Augue adipiscing duis? Et a placerat, magna enim? Lacus sit. Nunc montes tristique purus auctor. Nascetur? Vut amet, phasellus pulvinar et odio. Ut aliquet integer sed enim ac amet nunc? Tincidunt sit, cum ridiculus, placerat cum, vut magna ridiculus ut phasellus ridiculus? Eu hac, mattis adipiscing, montes adipiscing urna montes rhoncus!
    </div>
  </div>
  
  <div class="box cat1">
    <h2 class="box-title">
      Lorem Ipsum
    </h2>
    <div class="box-text">
      Urna vut, eros aliquet sagittis augue? Augue adipiscing duis? Et a placerat, magna enim? Lacus sit. Nunc montes tristique purus auctor. Nascetur? Vut amet, phasellus pulvinar et odio. Ut aliquet integer sed enim ac amet nunc? Tincidunt sit, cum ridiculus, placerat cum, vut magna ridiculus ut phasellus ridiculus? Eu hac, mattis adipiscing, montes adipiscing urna montes rhoncus! Odio placerat pellentesque risus urna elit, odio phasellus, rhoncus, est ridiculus purus etiam, penatibus integer! 
    </div>
  </div>
  
  <div class="box cat2 cat3">
    <h2 class="box-title">
      Lorem Ipsum
    </h2>
    <div class="box-text">
      Urna vut, eros aliquet sagittis augue? Augue adipiscing duis? Et a placerat, magna enim? Lacus sit. Nunc montes tristique purus auctor. Nascetur?
    </div>
  </div>
  
  <div class="box cat1">
    <h2 class="box-title">
      Lorem Ipsum
    </h2>
    <div class="box-text">
      Amet dolor? Diam cras ac quis a ut, augue massa cursus natoque cursus in sociis rhoncus, scelerisque mus ac. Pellentesque odio rhoncus, aliquet tempor? Nisi cursus lorem tincidunt penatibus eu scelerisque! Scelerisque mid rhoncus turpis eros? Nunc rhoncus in turpis, mus, nec augue, odio, mid tempor aliquam, ultricies.
    </div>
  </div>
  <div class="box cat2">
    <h2 class="box-title">
      Lorem Ipsum
    </h2>
    <div class="box-text">
      Diam cras ac quis a ut, augue massa cursus natoque cursus in sociis rhoncus, scelerisque mus ac. Pellentesque odio rhoncus, aliquet tempor? Nisi cursus lorem tincidunt penatibus eu scelerisque! Scelerisque mid rhoncus turpis eros? Nunc rhoncus in turpis, mus, nec augue, odio, mid tempor aliquam, ultricies.
    </div>
  </div>
  <div class="box cat2">
    <h2 class="box-title">
      Lorem Ipsum
    </h2>
    <div class="box-text">
      Urna vut, eros aliquet sagittis augue? Augue adipiscing duis? Et a placerat, magna enim? Lacus sit. Nunc montes tristique purus auctor. Nascetur? Vut amet, phasellus pulvinar et odio. Pellentesque odio rhoncus, aliquet tempor? Nisi cursus lorem tincidunt penatibus eu scelerisque! Scelerisque mid rhoncus turpis eros? Nunc rhoncus in turpis, mus, nec augue, odio, mid tempor aliquam, ultricies.
    </div>
  </div>
  
  <div class="box cat2 cat3">
    <h2 class="box-title">
      Lorem Ipsum
    </h2>
    <div class="box-text">
      Urna vut, eros aliquet sagittis augue? Augue adipiscing duis? Et a placerat, magna enim? Lacus sit.
    </div>
  </div>
  
  <div class="box cat1">
    <h2 class="box-title">
      Lorem Ipsum
    </h2>
    <div class="box-text">
      Amet dolor? Diam cras ac quis a ut, augue massa cursus natoque cursus in sociis rhoncus, scelerisque mus ac. Pellentesque odio rhoncus, aliquet tempor? Nisi cursus lorem tincidunt penatibus eu scelerisque! Scelerisque mid rhoncus turpis eros? Nunc rhoncus in turpis, mus, nec augue, odio, mid tempor aliquam, ultricies.
    </div>
  </div>
  
  <div class="box cat2 cat3">
    <h2 class="box-title">
      Lorem Ipsum
    </h2>
    <div class="box-text">
      Urna vut, eros aliquet sagittis augue? Augue adipiscing duis? Et a placerat, magna enim? Lacus sit. Nunc montes tristique purus auctor. Amet dolor? Diam cras ac quis a ut, augue massa cursus natoque cursus in sociis rhoncus, scelerisque mus ac. Pellentesque odio rhoncus, aliquet tempor? Nisi cursus lorem tincidunt penatibus eu scelerisque! Scelerisque mid rhoncus turpis eros? Nunc rhoncus in turpis, mus, nec augue, odio, mid tempor aliquam, ultricies.
    </div>
  </div>
  
  
</div>
Copy Format
Download