portfolio content

This bootstrap snippet portfolio content was created to help web designers,
front-end developers and back-end developer save time. Use it in your project and build your app faster,
You can also download the HTML, CSS, and JS code
tags: portfolio,list

This is the HTML code for this bootstrap snippet

Copy, paste, change, customize and run the following HTML code to get a result like the one shown in the preview tab

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">
<div class="col-md-9 content bootstrap snippets">
  <div style="position: relative; overflow: hidden; height: 1980px;" class="portfolio-wrapper isotope">
    <div style="position: absolute; left: 0px; top: 0px; transform: translate(0px, 0px); width: 250px;" class="card film art isotope-item">
      <a href="#portfolio-item.html" class="thumb">
        <img src="http://pukekodesigns.co.nz/clients/rebound/img/sample/sintel/sample-sintel-1.jpg" alt="" title="">
        <span class="overlay"><span class="fa fa-search"></span></span>
      </a>
      <div class="card-body">
        <h2><a href="#portfolio-item.html">Sintel at Seattle International Film Festival</a></h2>
        <p>The cinema where Sintel screens has digital 4k projection, I’m working with them getting this formatted right and delivered. Would be a real ...</p>
        <p><a href="#portfolio-item.html">Read More</a></p>
      </div><!-- end card-body -->
      <div class="card-footer">
        <ul class="list-inline filters">
          <li><a href="##none">Film</a></li>
          <li><a href="##none">Art</a></li>
        </ul>
      </div><!-- end card-footer -->
    </div><!-- end card -->
    <div style="position: absolute; left: 0px; top: 0px; transform: translate(280px, 0px); width: 250px;" class="card music social isotope-item">
      <a href="#portfolio-item.html" class="thumb">
        <img src="http://pukekodesigns.co.nz/clients/rebound/img/sample/elephants-dream/sample-elephants-1.jpg" alt="" title="">
        <span class="overlay"><span class="fa fa-search"></span></span>
      </a>
      <div class="card-body">
        <h2><a href="#portfolio-item.html">Elephants Dream</a></h2>
        <p>Elephants Dream is the world’s first open movie, made entirely with open source graphics software such as Blender , and with all production ...</p>
        <p><a href="#portfolio-item.html">Read More</a></p>
      </div><!-- end card-body -->
      <div class="card-footer">
        <ul class="list-inline filters">
          <li><a href="##none">Music</a></li>
          <li><a href="##none">Social</a></li>
        </ul>
      </div><!-- end card-footer -->
    </div><!-- end card -->
    <div style="position: absolute; left: 0px; top: 0px; transform: translate(560px, 0px); width: 250px;" class="card film social isotope-item">
      <a href="#portfolio-item.html" class="thumb">
        <img src="http://pukekodesigns.co.nz/clients/rebound/img/sample/big-buck-bunny/sample-bunny-1.png" alt="" title="">
        <span class="overlay"><span class="fa fa-search"></span></span>
      </a>
      <div class="card-body">
        <h2><a href="#portfolio-item.html">Big Buck Bunny</a></h2>
        <p>A comedy about a fat rabbit taking revenge on three irritating rodents. The film - in the fastest imaginable 3D computer animation - almost seems...</p>
        <p><a href="#portfolio-item.html">Read More</a></p>
      </div><!-- end card-body -->
      <div class="card-footer">
        <ul class="list-inline filters">
          <li><a href="##none">Film</a></li>
          <li><a href="##none">Social</a></li>
        </ul>
      </div><!-- end card-footer -->
    </div><!-- end card -->
    <div style="position: absolute; left: 0px; top: 0px; transform: translate(0px, 396px); width: 250px;" class="card film art isotope-item">
      <a href="#portfolio-item.html" class="thumb">
        <img src="http://pukekodesigns.co.nz/clients/rebound/img/sample/sintel/sample-sintel-2.jpg" alt="" title="">
        <span class="overlay"><span class="fa fa-search"></span></span>
      </a>
      <div class="card-body">
        <h2><a href="#portfolio-item.html">Sintel Review</a></h2>
        <p>The cinema where Sintel screens has digital 4k projection, I’m working with them getting this formatted right and delivered. Would be a real ...</p>
        <p><a href="#portfolio-item.html">Read More</a></p>
      </div><!-- end card-body -->
      <div class="card-footer">
        <ul class="list-inline filters">
          <li><a href="##none">Film</a></li>
          <li><a href="##none">Art</a></li>
        </ul>
      </div><!-- end card-footer -->
    </div><!-- end card -->
    <div style="position: absolute; left: 0px; top: 0px; transform: translate(280px, 396px); width: 250px;" class="card film social isotope-item">
      <a href="#portfolio-item.html" class="thumb">
        <img src="http://pukekodesigns.co.nz/clients/rebound/img/sample/big-buck-bunny/sample-bunny-3.png" alt="" title="">
        <span class="overlay"><span class="fa fa-search"></span></span>
      </a>
      <div class="card-body">
        <h2><a href="#portfolio-item.html">Big Buck Bunny In CG Magazine From China</a></h2>
        <p>A comedy about a fat rabbit taking revenge on three irritating rodents. The film - in the fastest imaginable 3D computer animation - almost seems...</p>
        <p><a href="#portfolio-item.html">Read More</a></p>
      </div><!-- end card-body -->
      <div class="card-footer">
        <ul class="list-inline filters">
          <li><a href="##none">Film</a></li>
          <li><a href="##none">Social</a></li>
        </ul>
      </div><!-- end card-footer -->
    </div><!-- end card -->
    <div style="position: absolute; left: 0px; top: 0px; transform: translate(560px, 396px); width: 250px;" class="card music social isotope-item">
      <a href="#portfolio-item.html" class="thumb">
        <img src="http://pukekodesigns.co.nz/clients/rebound/img/sample/elephants-dream/sample-elephants-2.jpg" alt="" title="">
        <span class="overlay"><span class="fa fa-search"></span></span>
      </a>
      <div class="card-body">
        <h2><a href="#portfolio-item.html">Singapore, CGOverdrive And 3dsense</a></h2>
        <p>Elephants Dream is the world’s first open movie, made entirely with open source graphics software such as Blender , and with all production ...</p>
        <p><a href="#portfolio-item.html">Read More</a></p>
      </div><!-- end card-body -->
      <div class="card-footer">
        <ul class="list-inline filters">
          <li><a href="##none">Music</a></li>
          <li><a href="##none">Social</a></li>
        </ul>
      </div><!-- end card-footer -->
    </div><!-- end card -->
    <div style="position: absolute; left: 0px; top: 0px; transform: translate(0px, 792px); width: 250px;" class="card film art isotope-item">
      <a href="#portfolio-item.html" class="thumb">
        <img src="http://pukekodesigns.co.nz/clients/rebound/img/sample/sintel/sample-sintel-3.jpg" alt="" title="">
        <span class="overlay"><span class="fa fa-search"></span></span>
      </a>
      <div class="card-body">
        <h2><a href="#portfolio-item.html">Sintel at Seattle International Film Festival</a></h2>
        <p>The cinema where Sintel screens has digital 4k projection, I’m working with them getting this formatted right and delivered. Would be a real ...</p>
        <p><a href="#portfolio-item.html">Read More</a></p>
      </div><!-- end card-body -->
      <div class="card-footer">
        <ul class="list-inline filters">
          <li><a href="##none">Film</a></li>
          <li><a href="##none">Art</a></li>
        </ul>
      </div><!-- end card-footer -->
    </div><!-- end card -->
    <div style="position: absolute; left: 0px; top: 0px; transform: translate(280px, 792px); width: 250px;" class="card film social isotope-item">
      <a href="#portfolio-item.html" class="thumb">
        <img src="http://pukekodesigns.co.nz/clients/rebound/img/sample/big-buck-bunny/sample-bunny-2.png" alt="" title="">
        <span class="overlay"><span class="fa fa-search"></span></span>
      </a>
      <div class="card-body">
        <h2><a href="#portfolio-item.html">Studio Harddisk Online</a></h2>
        <p>A comedy about a fat rabbit taking revenge on three irritating rodents. The film - in the fastest imaginable 3D computer animation - almost seems...</p>
        <p><a href="#portfolio-item.html">Read More</a></p>
      </div><!-- end card-body -->
      <div class="card-footer">
        <ul class="list-inline filters">
          <li><a href="##none">Film</a></li>
          <li><a href="##none">Social</a></li>
        </ul>
      </div><!-- end card-footer -->
    </div><!-- end card -->
    <div style="position: absolute; left: 0px; top: 0px; transform: translate(560px, 792px); width: 250px;" class="card music social isotope-item">
      <a href="#portfolio-item.html" class="thumb">
        <img src="http://pukekodesigns.co.nz/clients/rebound/img/sample/elephants-dream/sample-elephants-3.jpg" alt="" title="">
        <span class="overlay"><span class="fa fa-search"></span></span>
      </a>
      <div class="card-body">
        <h2><a href="#portfolio-item.html">High Frame Rate, 4K And Stereo 3D Release</a></h2>
        <p>Elephants Dream is the world’s first open movie, made entirely with open source graphics software such as Blender , and with all production ...</p>
        <p><a href="#portfolio-item.html">Read More</a></p>
      </div><!-- end card-body -->
      <div class="card-footer">
        <ul class="list-inline filters">
          <li><a href="##none">Music</a></li>
          <li><a href="##none">Social</a></li>
        </ul>
      </div><!-- end card-footer -->
    </div><!-- end card -->
    <div style="position: absolute; left: 0px; top: 0px; transform: translate(0px, 1188px); width: 250px;" class="card film art isotope-item">
      <a href="#portfolio-item.html" class="thumb">
        <img src="http://pukekodesigns.co.nz/clients/rebound/img/sample/sintel/sample-sintel-4.jpg" alt="" title="">
        <span class="overlay"><span class="fa fa-search"></span></span>
      </a>
      <div class="card-body">
        <h2><a href="#portfolio-item.html">Sintel at Seattle International Film Festival</a></h2>
        <p>The cinema where Sintel screens has digital 4k projection, I’m working with them getting this formatted right and delivered. Would be a real ...</p>
        <p><a href="#portfolio-item.html">Read More</a></p>
      </div><!-- end card-body -->
      <div class="card-footer">
        <ul class="list-inline filters">
          <li><a href="##none">Film</a></li>
          <li><a href="##none">Art</a></li>
        </ul>
      </div><!-- end card-footer -->
    </div><!-- end card -->
    <div style="position: absolute; left: 0px; top: 0px; transform: translate(280px, 1188px); width: 250px;" class="card film social isotope-item">
      <a href="#portfolio-item.html" class="thumb">
        <img src="http://pukekodesigns.co.nz/clients/rebound/img/sample/big-buck-bunny/sample-bunny-1.png" alt="" title="">
        <span class="overlay"><span class="fa fa-search"></span></span>
      </a>
      <div class="card-body">
        <h2><a href="#portfolio-item.html">Big Buck Bunny</a></h2>
        <p>A comedy about a fat rabbit taking revenge on three irritating rodents. The film - in the fastest imaginable 3D computer animation - almost seems...</p>
        <p><a href="#portfolio-item.html">Read More</a></p>
      </div><!-- end card-body -->
      <div class="card-footer">
        <ul class="list-inline filters">
          <li><a href="##none">Film</a></li>
          <li><a href="##none">Social</a></li>
        </ul>
      </div><!-- end card-footer -->
    </div><!-- end card -->
    <div style="position: absolute; left: 0px; top: 0px; transform: translate(560px, 1188px); width: 250px;" class="card music social isotope-item">
      <a href="#portfolio-item.html" class="thumb">
        <img src="http://pukekodesigns.co.nz/clients/rebound/img/sample/elephants-dream/sample-elephants-2.jpg" alt="" title="">
        <span class="overlay"><span class="fa fa-search"></span></span>
      </a>
      <div class="card-body">
        <h2><a href="#portfolio-item.html">Elephants Dream</a></h2>
        <p>Elephants Dream is the world’s first open movie, made entirely with open source graphics software such as Blender , and with all production ...</p>
        <p><a href="#portfolio-item.html">Read More</a></p>
      </div><!-- end card-body -->
      <div class="card-footer">
        <ul class="list-inline filters">
          <li><a href="##none">Music</a></li>
          <li><a href="##none">Social</a></li>
        </ul>
      </div><!-- end card-footer -->
    </div><!-- end card -->
    <div style="position: absolute; left: 0px; top: 0px; transform: translate(0px, 1584px); width: 250px;" class="card film art isotope-item">
      <a href="#portfolio-item.html" class="thumb">
        <img src="http://pukekodesigns.co.nz/clients/rebound/img/sample/sintel/sample-sintel-3.jpg" alt="" title="">
        <span class="overlay"><span class="fa fa-search"></span></span>
      </a>
      <div class="card-body">
        <h2><a href="#portfolio-item.html">Sintel at Seattle International Film Festival</a></h2>
        <p>The cinema where Sintel screens has digital 4k projection, I’m working with them getting this formatted right and delivered. Would be a real ...</p>
        <p><a href="#portfolio-item.html">Read More</a></p>
      </div><!-- end card-body -->
      <div class="card-footer">
        <ul class="list-inline filters">
          <li><a href="##none">Film</a></li>
          <li><a href="##none">Art</a></li>
        </ul>
      </div><!-- end card-footer -->
    </div><!-- end card -->
    <div style="position: absolute; left: 0px; top: 0px; transform: translate(280px, 1584px); width: 250px;" class="card film social isotope-item">
      <a href="#portfolio-item.html" class="thumb">
        <img src="http://pukekodesigns.co.nz/clients/rebound/img/sample/big-buck-bunny/sample-bunny-3.png" alt="" title="">
        <span class="overlay"><span class="fa fa-search"></span></span>
      </a>
      <div class="card-body">
        <h2><a href="#portfolio-item.html">BBB Goes Hollywood!</a></h2>
        <p>A comedy about a fat rabbit taking revenge on three irritating rodents. The film - in the fastest imaginable 3D computer animation - almost seems...</p>
        <p><a href="#portfolio-item.html">Read More</a></p>
      </div><!-- end card-body -->
      <div class="card-footer">
        <ul class="list-inline filters">
          <li><a href="##none">Film</a></li>
          <li><a href="##none">Social</a></li>
        </ul>
      </div><!-- end card-footer -->
    </div><!-- end card -->
    <div style="position: absolute; left: 0px; top: 0px; transform: translate(560px, 1584px); width: 250px;" class="card music social isotope-item">
      <a href="#portfolio-item.html" class="thumb">
        <img src="http://pukekodesigns.co.nz/clients/rebound/img/sample/elephants-dream/sample-elephants-1.jpg" alt="" title="">
        <span class="overlay"><span class="fa fa-search"></span></span>
      </a>
      <div class="card-body">
        <h2><a href="#portfolio-item.html">Elephants Dream</a></h2>
        <p>Elephants Dream is the world’s first open movie, made entirely with open source graphics software such as Blender , and with all production ...</p>
        <p><a href="#portfolio-item.html">Read More</a></p>
      </div><!-- end card-body -->
      <div class="card-footer">
        <ul class="list-inline filters">
          <li><a href="##none">Music</a></li>
          <li><a href="##none">Social</a></li>
        </ul>
      </div><!-- end card-footer -->
    </div><!-- end card -->
  </div><!-- end portfolio-wrapper -->
  <div class="pagination-wrapper">
    <ul class="pagination">
      <li class="disabled"><span>Prev</span></li>
      <li class="active"><a href="##none">1</a></li>
      <li><a href="##none">2</a></li>
      <li><a href="##none">3</a></li>
      <li><a href="##none">4</a></li>
      <li><a href="##none">5</a></li>
      <li><a href="##none">Next</a></li>
    </ul>
  </div><!-- end pagination-wrapper -->
</div>

This is the CSS code for this bootstrap snippet

Copy, paste, change, customize and run the following CSS code to get a result Like the one shown in the preview



body{margin-top:20px;}

.card {
  margin: 0 30px 30px 0;
  width: 250px;
  display: block;
  float: left;
  position: relative;
  background: #fff;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  -o-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}
.card .thumb {
  display: block;
  position: relative;
}
.card .thumb img {
  width: 100%;
  height: auto;
  position: relative;
  z-index: 1;
  border-bottom: 1px solid #e6e6e6;
  -webkit-border-radius: 4px 4px 0 0;
  -moz-border-radius: 4px 4px 0 0;
  border-radius: 4px 4px 0 0;
}
.card .thumb .overlay {
  display: none;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  cursor: pointer;
  text-align: center;
  background: #000;
  filter: alpha(opacity=65);
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=65)";
  background: rgba(0, 0, 0, 0.65);
  -webkit-border-radius: 4px 4px 0 0;
  -moz-border-radius: 4px 4px 0 0;
  border-radius: 4px 4px 0 0;
}
.card .thumb .overlay .fa {
  position: relative;
  top: 38%;
  font-size: 32px;
  text-align: center;
  color: #fff;
}
.card .thumb:hover .overlay {
  display: block;
}
.card .card-body {
  padding: 10px 15px 15px;
}
.card .card-body h2 {
  margin: 0 0 3px;
  height: 55px;
  overflow: hidden;
  font-size: 20px;
  line-height: 1.4;
}
.card .card-body h2 a {
  font-weight: 500;
}
.card .card-body p {
  margin: 0;
  font-size: 13px;
}
.card .card-body .post-meta {
  margin: 0 0 10px;
  padding: 5px 0 10px;
  font-size: 13px;
  border-bottom: 1px solid #e6e6e6;
  color: #898989;
}
.card .card-body .post-meta li {
  margin-right: 15px;
}
.card .card-footer {
  padding: 8px 15px;
  background: #f6f6f6;
  border-top: 1px solid #e6e6e6;
  text-shadow: 0 1px 0 #fff;
  -webkit-border-radius: 0 0 4px 4px;
  -moz-border-radius: 0 0 4px 4px;
  border-radius: 0 0 4px 4px;
}
.card .card-footer .list-inline {
  margin: 0;
}
.card .card-footer .list-inline li {
  font-size: 13px;
  color: #787878;
}
.card .card-footer .list-inline li a {
  color: #787878;
}
.card .card-footer .list-inline li a:hover {
  color: #1abc9c;
}
.card .card-footer .list-inline li .fa {
  margin-right: 5px;
}
.portfolio-wrapper {
  overflow: visible !important;
}
.portfolio .card h2 {
  margin-bottom: 10px;
  height: 65px;
  border-bottom: 1px solid #e6e6e6;
}
                                    

Information about this bootstrap snippet

Creator: Dey Dey

Bootstrap version: 3.3.6

Created: Mar 13th 2016, 12:15

Views: 369