Blog article wrapper

This bootstrap snippet called "Blog article wrapper" 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: blog

HTML code

Copy, paste, change, customize and run the following HTML code to get a result like the one shown in the preview selection

<div class="blog-container col-md-12">
    <div class="container">
        <div class="col-md-12">
          <h2>We are Famous!</h2>
        </div>
    
        <div class="article col-md-3 col-sm-6 col-xs-12" >
          <div class="article-wrapper">
            <div class="article-header">
              <img src="https://lorempixel.com/128/100/nature/1" alt=" " class="article-image">
              <span class="article-by">Mark Denker</span>
              <span class="article-date">March 2015</span>
              <img src="https://bootdey.com/img/Content/avatar/avatar1.png" alt="" class="pic-author pull-right">
            </div>
            <div class="article-content">
              <h3>Breaking a non-transparent market</h3>
            </div>
          </div>
        </div>
        <div class="article col-md-3 col-sm-6 col-xs-12">
          <div class="article-wrapper">
            <div class="article-header">
              <img src="https://lorempixel.com/128/100/nature/2" alt=" " class="article-image">
              <span class="article-by">Sindhu Chandrashekaran</span>
              <span class="article-date">September 2015</span>
              <img src="https://bootdey.com/img/Content/avatar/avatar2.png" alt="" class="pic-author pull-right">
            </div>
            <div class="article-content">
              <h3>Transperency' is the secret of Wiredelts's Sucess</h3>
            </div>
          </div>
        </div>
        <div class="article col-md-3 col-sm-6 col-xs-12 ">
          <div class="article-wrapper">
            <div class="article-header">
              <img src="https://lorempixel.com/128/100/nature/3" alt=" " class="article-image">
              <span class="article-by">Curt Finch</span>
              <span class="article-date">April 2015</span>
              <img src="https://bootdey.com/img/Content/avatar/avatar3.png" alt="" class="pic-author pull-right">
            </div>
            <div class="article-content">
              <h3>The good and the Evil of Time Tracking</h3>
            </div>
          </div>
        </div>
        <div class="article col-md-3 col-sm-6 col-xs-12 ">
          <div class="article-wrapper">
            <div class="article-header">
              <img src="https://lorempixel.com/128/100/nature/4" alt="" class="article-image">
              <span class="article-by">Darren Peterson</span>
              <span class="article-date">July 2015</span>
              <img src="https://bootdey.com/img/Content/avatar/avatar4.png" alt="" class="pic-author pull-right">
            </div>
            <div class="article-content">
              <h3>Handling uncertainty when estimating software projects</h3>
            </div>
          </div>
        </div>
      </div>
  </div>

CSS code

Copy, paste, change, customize and run the following CSS code to get a result Like the one shown in the preview selection

body{margin-top:20px;}

.blog-container {
    margin-bottom: 190px;
    padding: 90px 0;
    background-color: #f3f5f7
}

.blog-container h2 {
    padding-bottom: 40px;
    font-family: Roboto-Medium;
    font-size: 36px;
    text-align: center;
    color: #414040
}

.blog-container .article .article-wrapper {
    width: 222px;
    height: 356px;
    margin: 0 auto 20px;
    background-color: #fff;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, .2);
    border-radius: 3px
}

.blog-container .article .article-wrapper .article-header {
    position: relative;
    height: 220px
}

.blog-container .article .article-wrapper .article-header>img {
    width: 100%;
    height: 164px;
    border-radius: 3px 3px 0 0
}

.blog-container .article .article-wrapper .article-header .article-by {
    display: block;
    padding: 15px 0 0 15px;
    line-height: 100%;
    font-size: 12px;
    color: #727272
}

.blog-container .article .article-wrapper .article-header .article-date {
    padding-left: 15px;
    font-size: 10px;
    line-height: 100%;
    color: #b6b6b6
}

.blog-container .article .article-wrapper .article-header img.pic-author {
    width: 29px;
    height: 29px;
    position: absolute;
    bottom: 15px;
    right: 15px
}

.blog-container .article .article-wrapper .article-content {
    height: 136px
}

.blog-container .article .article-wrapper .article-content h3 {
    height: 100px;
    padding: 0 15px 15px;
    font-size: 14px;
    overflow: hidden
}

.blog-container .article .article-wrapper .article-content a {
    padding: 15px;
    font-size: 14px;
    color: #69ba9a
}

h3 {
    font-size: 18px;
    line-height: 22px;
    color: #6f6f6f;
    margin: 0;
}
                                    

Similar snippets

Bootstrap snippet Blog Comments With Form

Blog Comments With Form

View

Bootstrap snippet blog item

blog item

View

Bootstrap snippet blog content page

blog content page

View

About this snippet

Creator: Dey Dey

Bootstrap version: 3.3.6

Created: Jun 16th 2016, 20:21

Views: 235