"card grid pintrest like"
Bootstrap 4.0.0 Snippet by jyapujuju

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="card-columns"> <div class="card"> <img class="card-img-top" src="https://media.gettyimages.com/photos/little-curly-girl-blowing-dandelion-picture-id516814892?b=1&k=6&m=516814892&s=612x612&w=0&h=dalazb_6JTjYLEhlJl4D_OCX6hS5wFc6fZQ3KwMXJLk=" alt="Card image cap"> <div class="card-block"> <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"> <h4 class="card-title px-2"></h4> </a> <p class="card-text px-2">Vestibulum enim quam</p> </div> <div class="card-footer"> <small class="text-muted"> adipiscing elit. In porta tellus mi, pulvinar pretium justo porta quis. Nulla non purus erat. Proin tempor ligula nec facilisis consectetur. Maecenas semper in mi eu mollis. Morbi massa felis, ultricies sed dui et, fermentum convallis ligula. In feugiat sem id dolor aliquam, sed cursus neque sollicitudin. Donec convallis elementum nisi non tincidunt. Nulla nec cursus metus, sit amet condimentum neque. Duis eget arcu at eros posuere sodales a ac metus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse potenti. In ut urna ornare, finibus purus id, pellentesque ex. Sed tincidunt mi quis ipsum facilisis bibendum.</small> </div> </div> <div class="card"> <img class="card-img-top" src="https://media.gettyimages.com/photos/little-curly-girl-blowing-dandelion-picture-id516814892?b=1&k=6&m=516814892&s=612x612&w=0&h=dalazb_6JTjYLEhlJl4D_OCX6hS5wFc6fZQ3KwMXJLk=" alt="Card image cap"> <div class="card-block"> <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"> <h4 class="card-title px-2"></h4> </a> <p class="card-text px-2">Vestibulum enim quam</p> </div> <div class="card-footer"> <small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum enim quam, auctor sed lacinia eget, feugiat quis est. Sed eget nisl ac turpis luctus sollicitudin. Suspendisse quis luctus lectus. In porta tellus mi, pulvinar pretium justo porta quis. Nulla non purus erat. Proin tempor ligula nec facilisis consectetur. Maecenas semper in mi eu mollis. Morbi massa felis, ultricies sed dui et, fermentum convallis ligula. In feugiat sem id dolor aliquam, sed cursus neque sollicitudin. Donec convallis elementum nisi non tincidunt. Nulla nec cursus metus, sit amet condimentum neque. Duis eget arcu at eros posuere sodales a ac metus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse potenti. In ut urna ornare, finibus purus id, pellentesque ex. Sed tincidunt mi quis ipsum facilisis bibendum.</small> </div> </div> <div class="card"> <img class="card-img-top" src="https://media.gettyimages.com/photos/little-curly-girl-blowing-dandelion-picture-id516814892?b=1&k=6&m=516814892&s=612x612&w=0&h=dalazb_6JTjYLEhlJl4D_OCX6hS5wFc6fZQ3KwMXJLk=" alt="Card image cap"> <div class="card-block"> <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"> <h4 class="card-title px-2"></h4> </a> <p class="card-text px-2">Vestibulum enim quam</p> </div> <div class="card-footer"> <small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum enim quam, auctor sed lacinia eget, feugiat quis est. Sed eget nisl ac turpis luctus sollicitudin. Suspendisse quis luctus lectus. In porta tellus mi, pulvinar pretium justo porta quis. Nulla non purus erat. Proin tempor ligula nec facilisis consectetur. Maecenas semper in mi eu mollis. Morbi massa felis, ultricies sed dui et, fermentum convallis ligula. In feugiat sem id dolor aliquam, sed cursus neque sollicitudin. Donec convallis elementum nisi non tincidunt. Nulla nec cursus metus, sit amet condimentum neque. Duis eget arcu at eros posuere sodales a ac metus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse potenti. In ut urna ornare, finibus purus id, pellentesque ex. Sed tincidunt mi quis ipsum facilisis bibendum.</small> </div> </div> <div class="card"> <img class="card-img-top" src="https://media.gettyimages.com/photos/little-curly-girl-blowing-dandelion-picture-id516814892?b=1&k=6&m=516814892&s=612x612&w=0&h=dalazb_6JTjYLEhlJl4D_OCX6hS5wFc6fZQ3KwMXJLk=" alt="Card image cap"> <div class="card-block"> <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"> <h4 class="card-title px-2"></h4> </a> <p class="card-text px-2">Vestibulum enim quam</p> </div> <div class="card-footer"> <small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum enim quam, auctor sed lacinia eget, feugiat quis est. Sed eget nisl ac turpis luctus sollicitudin. Suspendisse quis luctus lectus. In porta tellus mi, pulvinar pretium justo porta quis. Nulla non purus erat. Proin tempor ligula nec facilisis consectetur. Maecenas semper in mi eu mollis. Morbi massa felis, ultricies sed dui et, fermentum convallis ligula. In feugiat sem id dolor aliquam, sed cursus neque sollicitudin. Donec convallis elementum nisi non tincidunt. Nulla nec cursus metus, sit amet condimentum neque. Duis eget arcu at eros posuere sodales a ac metus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse potenti. In ut urna ornare, finibus purus id, pellentesque ex. Sed tincidunt mi quis ipsum facilisis bibendum.</small> </div> </div> <div class="card"> <img class="card-img-top" src="https://media.gettyimages.com/photos/little-curly-girl-blowing-dandelion-picture-id516814892?b=1&k=6&m=516814892&s=612x612&w=0&h=dalazb_6JTjYLEhlJl4D_OCX6hS5wFc6fZQ3KwMXJLk=" alt="Card image cap"> <div class="card-block"> <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"> <h4 class="card-title px-2"></h4> </a> <p class="card-text px-2">Vestibulum enim quam</p> </div> <div class="card-footer"> <small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum enim quam, auctor sed lacinia eget, feugiat quis est. Sed eget nisl ac turpis luctus sollicitudin. Suspendisse quis luctus lectus. In porta tellus mi, pulvinar pretium justo porta quis. Nulla non purus erat. Proin tempor ligula nec facilisis consectetur. Maecenas semper in mi eu mollis. Morbi massa felis, ultricies sed dui et, fermentum convallis ligula. In feugiat sem id dolor aliquam, sed cursus neque sollicitudin. Donec convallis elementum nisi non tincidunt. Nulla nec cursus metus, sit amet condimentum neque. Duis eget arcu at eros posuere sodales a ac metus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse potenti. In ut urna ornare, finibus purus id, pellentesque ex. Sed tincidunt mi quis ipsum facilisis bibendum.</small> </div> </div> </div> </div>

Related: See More


Questions / Comments: