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

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="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>

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;}

.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;
}
                                    

Information about this bootstrap snippet

Creator: Dey Dey

Bootstrap version: 3.3.6

Created: Jun 16th 2016, 20:21

Views: 226