blog post cards

This bootstrap snippet called "blog post cards" 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: cards

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

<div class="container bootstrap snippet">
    <div class="row">
        <div class="col-md-4">
            <div class="card card-favorite">
            	<div class="card-img-container">
            		<a href="#" style="background-image:url('https://lorempixel.com/400/200/sports/1/')" class="card-img"></a>
            	</div>
            	<div class="card-content">
            		<div class="card-meta">
            			<span class="meta-date meta-box">
            				Jan 11			   
            			</span>
            			<span class="meta-pulse meta-box">
            				<a href="#" class="card-share-number sharrre">50 Shares</a>
            			</span>
            		</div>
            		<h2>
                        <a href="#">
            			    Lorem ipsum dolor sit amet, consectetur		   
            			</a>   
            		</h2>
            	</div>
                <span class="meta-tags">
                	<a href="#" title="tags" class="tag">Php</a> 
            	</span>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card card-favorite">
            	<div class="card-img-container">
            		<a href="#" style="background-image:url('https://lorempixel.com/400/200/city/2/')" class="card-img"></a>
            	</div>
            	<div class="card-content">
            		<div class="card-meta">
            			<span class="meta-date meta-box">
            				Jul 16			   
            			</span>
            			<span class="meta-pulse meta-box">
            				<a href="#" class="card-share-number sharrre">800 Shares</a>
            			</span>
            		</div>
            		<h2>
                        <a href="#">
            			    Lorem ipsum dolor sit amet, consectetur		   
            			</a>   
            		</h2>
            	</div>
                <span class="meta-tags">
                    <a href="#" title="tags" class="tag">Html</a> 
            	</span>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card card-favorite">
            	<div class="card-img-container">
            		<a href="#" style="background-image:url('https://lorempixel.com/400/200/abstract/1/')" class="card-img"></a>
            	</div>
            	<div class="card-content">
            		<div class="card-meta">
            			<span class="meta-date meta-box">
            				Feb 18		   
            			</span>
            			<span class="meta-pulse meta-box">
            				<a href="#" class="card-share-number sharrre">53 Shares</a>
            			</span>
            		</div>
            		<h2>
                        <a href="#">
            			    Lorem ipsum dolor sit amet, consectetur		   
            			</a>   
            		</h2>
            	</div>
                <span class="meta-tags">
                    <a href="#" title="tags" class="tag">Css</a> 
                </span>                
            </div>
        </div>
    </div>    
</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 {
    min-width: 0;
    margin: 20px 10px;
    width: 100%;    
    background: #0C0C0C;
    color: #696969;
    -webkit-transition: .3s ease all;
    transition: .3s ease all;
    border: none;
    border-radius: 5px;
    padding: 0;
    margin-bottom: 30px;
}

.card .card-img-container .card-img {
  background-size: cover;
  background-position: top center;
  display: block;
  height: 175px;
}

.card .card-img {
  height: 150px;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}

.card .card-img-container {
  position: relative;
  overflow: hidden;
  width: 100%;
}

.card .card-content {
  padding: 20px 20px 40px;
  text-align: center;
}

.card .card-meta {
  font-size: 12px;
}

.card .meta-box {
  margin-right: 20px;
}

.card .card-content h2 {
  margin-top: 10px;
  margin-bottom: 0;
  font-size: 16px;
  line-height: 1.4;
}

.card h2 a {
  color: #D0D0D0;
  -webkit-transition: .3s ease all;
  transition: .3s ease all;
}

a:hover{
    text-decoration:none;    
}

.card:hover h2 a {
  color: #FFF;
}

.card .meta-tags a:hover {
  color: #FFF;
}
.card .meta-tags .tag {
  background: #DD1B16;
  color: #f9c7c6;
}
.card .meta-tags a:last-child {
  margin-right: 0;
  border-bottom-right-radius: 5px;
}
.card .meta-tags a:first-child {
  border-top-left-radius: 5px;
}
.card .meta-tags a {
  display: inline-block;
  padding: 3px 8px;
  color: #FFF;
  -webkit-transition: .3s ease all;
  transition: .3s ease all;
}

                                    

Information about this bootstrap snippet

Creator: Dey Dey

Bootstrap version: 3.3.4

Created: Jun 22nd 2015, 19:51

Views: 4.1K

Rated 5/5 based on 4 reviews