Bootstrap snippet: bootdey cards snippets

designed to help people of all skill levels - designer or developer, huge nerd or early beginner.
copy and paste the code. Use it as a complete kit or use it to start something more complex.
tags: bootdey,snippets



<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"> <div class="row"> <div class="col-md-9"> <div class="col-md-4 col-sm-6 col-xs-12"> <div class="snippet-card"> <a href="#" class="filter-content"> <img src="http://bootdey.com/img/Snippets/Snippet_372.png" alt="Rounded Image" class="img-rounded img-responsive"> </a> <div class="details details-center"> <a href="#"> <div class="author"> <div class="text"> <span class="name">Contact List</span> <div class="meta"> <a itemprop="url" class="user-name-link" href="#">Dey-Dey</a>| <span>3.3.5</span>| <a class="btn-download text-success tip glyphicon glyphicon-download-alt" href="#" title="" data-placement="top" data-original-title="Download"></a> </div> </div> </div> </a> </div> </div> </div> <div class="col-md-4 col-sm-6 col-xs-12"> <div class="snippet-card"> <a href="#"> <img src="http://bootdey.com/img/Snippets/Snippet_310.png" alt="Rounded Image" class="img-rounded img-responsive"> </a> <div class="details details-center"> <a href="#"> <div class="author"> <div class="text"> <span class="name">user profile description</span> <div class="meta"> <a itemprop="url" class="user-name-link" href="#">Dey-Dey</a>| <span>3.3.5</span>| <a class="btn-download text-success tip glyphicon glyphicon-download-alt" href="#" title="" data-placement="top" data-original-title="Download"></a> </div> </div> </div> </a> </div> </div> </div> <div class="col-md-4 col-sm-6 col-xs-12"> <div class="snippet-card"> <a href="#"> <img src="http://bootdey.com/img/Snippets/Snippet_348.png" alt="Rounded Image" class="img-rounded img-responsive"> </a> <div class="details details-center"> <a href="#"> <div class="author"> <div class="text"> <span class="name">Blog image Gallery Widget</span> <div class="meta"> <a itemprop="url" class="user-name-link" href="#">Dey-Dey</a>| <span>3.3.5</span>| <a class="btn-download text-success tip glyphicon glyphicon-download-alt" href="#" title="" data-placement="top" data-original-title="Download"></a> </div> </div> </div> </a> </div> </div> </div> <div class="col-md-4 col-sm-6 col-xs-12"> <div class="snippet-card"> <a href="#"> <img src="http://bootdey.com/img/Snippets/Snippet_349.png" alt="Rounded Image" class="img-rounded img-responsive"> </a> <div class="details details-center"> <a href="#"> <div class="author"> <div class="text"> <span class="name">user blog widget</span> <div class="meta"> <a itemprop="url" class="user-name-link" href="#">Dey-Dey</a>| <span>3.3.5</span>| <a class="btn-download text-success tip glyphicon glyphicon-download-alt" href="#" title="" data-placement="top" data-original-title="Download"></a> </div> </div> </div> </a> </div> </div> </div> <div class="col-md-4 col-sm-6 col-xs-12"> <div class="snippet-card"> <a href="#"> <img src="http://bootdey.com/img/Snippets/Snippet_334.png" alt="Rounded Image" class="img-rounded img-responsive"> </a> <div class="details details-center"> <a href="#"> <div class="author"> <div class="text"> <span class="name">blog page</span> <div class="meta"> <a itemprop="url" class="user-name-link" href="#">Dey-Dey</a>| <span>3.3.5</span>| <a class="btn-download text-success tip glyphicon glyphicon-download-alt" href="#" title="" data-placement="top" data-original-title="Download"></a> </div> </div> </div> </a> </div> </div> </div> <div class="col-md-4 col-sm-6 col-xs-12"> <div class="snippet-card"> <a href="#"> <img src="http://bootdey.com/img/Snippets/Snippet_322.png" alt="Rounded Image" class="img-rounded img-responsive"> </a> <div class="details details-center"> <a href="#"> <div class="author"> <div class="text"> <span class="name">profile with left cover</span> <div class="meta"> <a itemprop="url" class="user-name-link" href="#">Dey-Dey</a>| <span>3.3.5</span>| <a class="btn-download text-success tip glyphicon glyphicon-download-alt" href="#" title="" data-placement="top" data-original-title="Download"></a> </div> </div> </div> </a> </div> </div> </div> </div> <div class="col-md-3"> <div class="fixed-section"> <div class="sponsor text-center"> <a class="pull-right" href="#">Advertise here</a> <a href="http://bootdey.com/themes/view/BookPost-Bootstrap-social-network-css-html"> <img class="lazy img-responsive img-add" data-original="http://bootdey.com/img/ESP/bookpost.png" alt="c" src="http://bootdey.com/img/ESP/bookpost.png" style="display: block;"> </a> <p> <a class="esp-text" href="#">Book-Post Bootstrap html social network</a> </p> </div> <h3 class="related-title"> <i class="fa fa-bookmark"></i> Related Snippets</h3> <ul class="related-snippets"> <li><a href="#buttons-row">Buttons</a></li> <li><a href="#checkbox-row">Checkbox/Radio</a></li> <li><a href="#dropdown-row">Dropdown</a></li> <li><a href="#inputs-row">Inputs</a></li> <li><a href="#textarea-row">Textarea</a></li> <li><a href="#navbar-row">Navigation</a></li> <li><a href="#subscription-row">Footers</a></li> <li><a href="#pagination-row">Pagination</a></li> <li><a href="#progressbar-row">Progress Bars</a></li> <li><a href="#sliders-row">Sliders</a></li> <li><a href="#labels-row">Labels</a></li> <li><a href="#datepicker-row">Datepicker</a></li> <li><a href="#modal-row">Modals</a></li> <li><a href="#tooltip-row">Tooltips/Popovers</a></li> <li><a href="#notification-row">Notification</a></li> </ul> </div> </div> </div>
body{ margin-top:20px; background: #F9F9F9; } .snippet-card a { color: #68B3C8; -webkit-transition: all 150ms linear; -moz-transition: all 150ms linear; -o-transition: all 150ms linear; -ms-transition: all 150ms linear; transition: all 150ms linear; } .snippet-card .img-rounded { border-radius: 8px; transition: opacity 0.5s ease 0s; box-shadow: 0 25px 20px -21px rgba(0,0,0,0.30); } .snippet-card a img { height: 200px; width: 266px; } .snippet-card { margin-bottom:20px; } .snippet-card .details { margin-left: 4px; min-height: 50px; padding: 0 4px 0.5em; position: relative; } .snippet-card .details-center .author { position: relative; display: inline-block; text-align: left; margin: 20px auto 0; } .snippet-card .details-center .author img { position: absolute; left: 0; top: 0; } .snippet-card .details .author img { height: 40px; width: 40px; margin-bottom: 5px; } .snippet-card .img-no-padding { padding: 0px; } .snippet-card .img-circle { background-color: #FFFFFF; margin-bottom: 10px; padding: 4px; } .snippet-card .img-circle { border-radius: 50%; } .snippet-card .details-center .author .text { padding-left: 50px; } .snippet-card .details .author .name { color: #66615b; font-size: 14px; line-height: 1.15; max-width: 11em; overflow: hidden; padding-top: 3px; text-overflow: ellipsis; } .snippet-card .details .meta { color: #ccc5b9; font-size: 0.8em; } .fixed-section ul li { list-style: none; } .fixed-section li a { font-size: 14px; padding: 2px; display: block; color: #666666; } a, a:hover, a:focus { text-decoration: none; } .related-title { color: #00a9eb!important; padding-bottom: 4px; border-bottom: 1px solid #eee; } .sponsor .img-add { border-radius: 8px; box-shadow: 0 2px 2px rgba(204, 197, 185, 0.5); transition: opacity 0.5s ease 0s; }
Dey-Dey

bootdey cards snippets

Dey-Dey
  Apr 11th, 14:11
635 Views