Google Plus type cards layout in HTML

Adifyr picture Adifyr · Mar 10, 2014 · Viewed 17.8k times · Source

In Google Plus, they use a card type layout that looks really cool. Facebook uses the same layout for it's timeline. I would like to implement such a layout for my website. But I don't know how to start. Here are the things I need to know:

  1. What is the name of this particular type of layout?
  2. How do I implement this layout in my Web Page?

Thanks...

(Here are a couple of images to help you know what I'm talking about)

Google Plus Cards Layout

Facebook Timeline Layout http://www.formicmedia.com/wp-content/uploads/2011/09/Capture2.jpg

Answer

Zim picture Zim · Mar 10, 2014

Here's an example Google plus template that uses Bootstrap. It's basically a cards layout with dual navbars at the top.

Code: http://www.bootply.com/90113
Preview: http://www.bootply.com/render/90113

<nav></nav>
<nav></nav>
<div class="container">
   <div class="row">
     <div class="col-md-4 col-sm-6">
        <!-- 1 or more panel/cards inside col -->
     </div>
     <div class="col-md-4 col-sm-6">
        <!-- 1 or more panel/cards inside col -->
     </div>
     <div class="col-md-4 col-sm-6">
        <!-- 1 or more panel/cards inside col -->
     </div>
   </div>
</div>