Blog post with image

This bootstrap snippet Blog post with image 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,post,image

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="posts">
<article class="post">

    
    <div class="banner-image">
      <a href="http://gayan.me/gaya/jekyll/update/2015/01/01/welcome-to-jekyll/" title="Welcome to Jekyll!">
      <img src="http://gayan.me/gaya/assets/images/sample-banner-image-1.jpg" alt="Welcome to Jekyll! ">
      </a>
    </div>
    

    <h1 class="post-title">
      <a href="http://gayan.me/gaya/jekyll/update/2015/01/01/welcome-to-jekyll/">
        Welcome to Jekyll!
      </a>
    </h1>

    <p class="post-meta">
    
      <span class="categories">
      jekyll and update
      </span> |
    
    <span class="post-date">
    Jan 1, 2015  
    </span>
    </p>

    <p>You will find this post in your <code>_posts</code> directory. Go ahead and edit it and re-build the site to see your changes. You can rebuild the site in many different ways, but the most common way is to run <code>jekyll serve</code>, which launches a web server and auto-regenerates your site when a file is updated.</p>


  </article>
	</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

.post, .page {
  margin-bottom: 2em;
  padding: 1em;
  background: #fff;
  -webkit-border-radius: 0.2em;
  -moz-border-radius: 0.2em;
  -ms-border-radius: 0.2em;
  -o-border-radius: 0.2em;
  border-radius: 0.2em;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
  overflow: hidden;
}

.post .banner-image, .page .banner-image, .post .banner_video, .page .banner_video {
  margin: -1em -1em 0 -1em;
  padding-bottom: 1em;
}

a, .post-title a {
  color: #205081;
}

h1, .h1 {
  font-size: 41px;
}
h1, .h1, h2, .h2, h3, .h3 {
  margin-top: 22px;
  margin-bottom: 11px;
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: inherit;
  font-weight: 500;
  line-height: 1.3;
  color: #333;
}

.post-meta {
  color: #777;
  padding: 1.5em 0 2em 0;
  letter-spacing: 1px;
}

p {
  margin: 0 0 11px;
  line-height: 1.6;
  font-size: 20px;
}

.container {
  width: 90%;
  max-width: 768px;
  margin: 0 auto;
}
                                    

Information about this bootstrap snippet

Creator: Dey Dey

Bootstrap version: 3.3.2

Created: Mar 20th 2015, 08:25

Views: 490