<html>
<head>
<title> Grid View Style#4</title>

</head>
<body>

<div class="container"> 
        <div class="row margin-bottom-20">
            
            <div class="col-md-3">
                <div class="grid_block">
                    <div class="thumbnail-img">
                        <div class="overflow-hidden">
                            <img src="https://p.w3layouts.com/demos/educate/web/images/9.jpg" alt="">
                        </div>
                        <a href="#">read more +</a>             
                    </div>

                    <div>
                        <h3>Project One <small>My Sub Title</small> </h3>
                        <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, justo sit amet risus etiam porta sem.</p>
                        <span>Mon, Sep, 29, 2014</span>
                    </div>

                </div>
            </div> <!-- End col-md-3 -->

            <div class="col-md-3">
                <div class="grid_block">
                    <div class="thumbnail-img">
                        <div class="overflow-hidden">
                            <img src="https://p.w3layouts.com/demos/educate/web/images/9.jpg" alt="">
                        </div>     
                        <a  href="#">read more +</a> 
                    </div>

                    <div>
                        <h3>Project One <small>My Sub Title</small> </h3>
                        <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, justo sit amet risus etiam porta sem.</p>
                        <span>Mon, Sep, 29, 2014</span>
                    </div>
                </div>
            </div> <!-- End col-md-3 -->

            <div class="col-md-3">
                <div class="grid_block">
                    <div class="thumbnail-img">
                        <div class="overflow-hidden">
                            <img src="https://p.w3layouts.com/demos/educate/web/images/9.jpg" alt="">
                        </div>           
                        <a  href="#">read more +</a> 
                    </div>

                   <div>
                        <h3>Project One <small>My Sub Title</small> </h3>
                        <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, justo sit amet risus etiam porta sem.</p>
                        <span>Mon, Sep, 29, 2014</span>
                    </div>
                </div>
            </div> <!-- End col-md-3 -->

            <div class="col-md-3">
                <div class="grid_block">
                    <div class="thumbnail-img">
                        <div class="overflow-hidden">
                            <img src="https://p.w3layouts.com/demos/educate/web/images/9.jpg" alt="">
                        </div>  
                        <a  href="#">read more +</a> 
                    </div>

                   <div>
                        <h3>Project One <small>My Sub Title</small> </h3>
                        <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, justo sit amet risus etiam porta sem.</p>
                        <span>Mon, Sep, 29, 2014</span>
                    </div>
                </div>
            </div> <!-- End col-md-3 -->


          
        </div> <!-- End row -->

       
    </div><!-- End Container -->


 

</body>
</html>
body {font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;margin: 0;}

.container{
padding-top: 40px;
padding-bottom: 40px;    
margin-right:auto;margin-left:auto;padding-left:15px;padding-right:15px
}

@media (min-width:768px){.container{width:750px}}
@media (min-width:992px){.container{width:970px}}
@media (min-width:1200px){.container{width:1170px}}


.col-md-3 {
float: left;
position: relative;
min-height: 290px;
padding-left: 15px;
padding-right: 15px;
}

.margin-bottom-20 {
margin-bottom: 20px;
clear: both;
}

.row{
    margin-right:-15px;
    margin-left:-15px;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
}


/*grid_block
------------------------------------*/
.grid_block {
max-width: 260px;
margin: 10px auto;
text-align: center;
}

.grid_block img{
display: block;
width: 100% \9;
max-width: 100%;
height: auto;
vertical-align: middle;
border: 0;
}

.grid_block a{
white-space: nowrap;
margin-bottom: 2em;
margin-left: -3em;
border: 0;
color: #fff;
font-size: 14px;
cursor: pointer;
font-weight: 400;
padding: 6px 13px;
position: absolute;
bottom: 0px;
display: inline-block;
text-decoration: none;
text-align: center;
background-color: #ed5441!important;
}

.grid_block h3 {
color: #777;
margin: 6px 0 8px 0;
}

.grid_block h3::before{
width: 40px;
height: 40px;
border-radius: 50px;
font: normal normal normal 20px/2 FontAwesome;
position: absolute;
color: white;
margin: -48px auto 8px;
left: 107px;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}


.col-md-3:first-child .grid_block h3::before{content: "\f03e";background-color: #ed5441!important;}
.col-md-3:nth-child(2) .grid_block h3::before{content: "\f03d";background-color: #32c8de!important;}
.col-md-3:nth-child(3) .grid_block h3::before{content:"\f001";background-color:#51d466!important ;}
.col-md-3:nth-child(4) .grid_block h3::before{content:"\f085";background-color: #cb79e6!important;}

.grid_block h3::after{
content: '';
position: absolute;
width: 55px;
margin: 12px auto 8px;
left: 99px;
}

.col-md-3:first-child h3::after{border-top: 3px solid #ed5441!important;}
.col-md-3:nth-child(2) h3::after{border-top: 3px solid #32c8de!important;}
.col-md-3:nth-child(3) h3::after{border-top: 3px solid #51d466!important ;}
.col-md-3:nth-child(4) h3::after{border-top: 3px solid #cb79e6!important;}



.grid_block small {
display: block;
font-size: 12px;
font-weight: 400;
line-height: 1;
color: #999;
}


.grid_block span{
font-size: 12px;
font-weight: 400;
text-align: center;
display: block;
margin-top: 1em;
margin-bottom: 1em;
color: #ed5441!important;
}

.col-md-3:first-child .grid_block span{color: #ed5441!important;}
.col-md-3:nth-child(2) .grid_block span{color: #32c8de!important;}
.col-md-3:nth-child(3) .grid_block span{color: #51d466!important;}
.col-md-3:nth-child(4) .grid_block span{color: #cb79e6!important;}

.col-md-3:first-child .grid_block a{background-color: #ed5441!important;}
.col-md-3:nth-child(2) .grid_block a{background-color: #32c8de!important;}
.col-md-3:nth-child(3) .grid_block a{background-color:#51d466!important ;}
.col-md-3:nth-child(4) .grid_block a{background-color: #cb79e6!important;}

.grid_block p {
padding-top: 12px;
}



.grid_block div:last-child {
border: 1px solid #eee;
border-top: 0;
padding: 22px 20px 48px;
position: relative;
}

External CSS

  1. //maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css

External JavaScript

This Pen doesn't use any external JavaScript resources.