Skip to main content

Beautiful Bootstrap Blog Post Header Guaranteed to Draw Readers Into Any Post

In today's growing blogging industry, being just another sheep in the herd won't do much for your traffic. Creating a stunning blog does not necessarily mean building your own layout from scratch. You can take advantage of a template, let it do most of the heavy lifting, and pair it with a thoughtfully designed header to start engaging your target audience. Use them to set the mood and visually communicate what your blog is all about. They don’t have to be terribly complex, just tailored to fit your blog beautifully. Below, I showcase an awesome blog post with a header that make great first impressions and feature great content.

First, let me tell you what is Bootstrap!

Bootstrap, as the saying goes, is the world's most popular front-end open source toolkit, featuring Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful JavaScript plugins.

You can check out my Bootstrap Starter theme made with love for Blogger users. This professional premium theme is made so that you can build stunning websites with it and at the same time spend less time on design and more on development. Let my professional design template save you time and effort.

This blog post header uses a type-centric header to lure you in. Tough not to read and enjoy big, beautiful type. Every post on this site is awesomely designed and I would like to share you the code wih you today.

Features

  • Post body wrapped by Bootstrap class "card."
  • Type-centric post title.
  • Bootstrap 'Navs' for the post meta section.
  • Native social share links using the dropdown menu.

Code:

You don't need any extra CSS for this if you have activated/embedded the Bootstrap CSS file on your theme.


<div class="card">
<h1>Your Post Title</h1>
<div class="meta>
<ul class='nav nav-tabs'>
<li class='nav-item active dropdown'>
<a aria-expanded='false' aria-haspopup='true' class='nav-link dropdown-toggle' data-toggle='dropdown' href='#' role='button'><span class='fas fa-share-alt'/> Share</a>
<div class='dropdown-menu'>
<a class='dropdown-item' expr:href='&quot;https://www.facebook.com/sharer.php?u=&quot; + data:post.url.canonical' target='_blank' title='Facebook'><i class='fab fa-facebook-f'/> Facebook</a>
<a class='dropdown-item' expr:href='&quot;https://twitter.com/intent/tweet?url=&quot; + data:post.url.canonical + &quot;&amp;text=&quot; + data:post.title' rel='nofollow' target='_blank' title='Twitter'><i class='fab fa-twitter'/> Twitter</a>
<a class='dropdown-item' expr:href='&quot;https://www.linkedin.com/shareArticle?url=&quot; + data:post.url.canonical' rel='nofollow' target='_blank' title='Linkedin'><i class='fab fa-linkedin-in'/> Linkedin</a>
<a class='dropdown-item' expr:href='&quot;https://www.pinterest.com/pin/create/button/?url=&quot; + data:post.url.canonical + &quot;&amp;media=&quot; + data:post.featuredImage + &quot;&amp;description=&quot; + data:post.title' rel='nofollow' target='_blank' title='Pinterest'><i class='fab fa-pinterest-p'/> Pinterest</a>
<a class='dropdown-item' expr:href='&quot;https://api.whatsapp.com/send?text=&quot; + data:post.title + &quot; | &quot; + data:post.url.canonical' rel='nofollow' target='_blank' title='Whatsapp'><i class='fab fa-whatsapp'/> Whatsapp</a>
<a class='dropdown-item' expr:href='&quot;https://reddit.com/submit?url=&quot; + data:post.url.canonical + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Reddit'><i class='fab fa-reddit-alien'/> Reddit</a>
<a class='dropdown-item' expr:href='&quot;mailto:?subject=&quot; + data:post.title + &quot;&amp;body=&quot; + data:post.url.canonical' rel='nofollow' target='_blank' title='Email'><i class='fas fa-envelope'/> Email</a>
</div>
</li>
<li class='nav-item'>
<b:if cond='data:post.author.profileUrl'>
<a class='nav-link' expr:href='data:post.author.profileUrl'><span class='fa fa-user'/> <b:eval expr='data:post.author ? data:post.author.name : &quot;Anonymous&quot;'/></a><b:else/><a class='nav-link'> <span class='fa fa-user'/> <b:eval expr='data:post.author ? data:post.author.name : &quot;Anonymous&quot;'/></a>
</b:if>
</li>
<li class='nav-item'>
<time expr:datetime='data:post.date.iso8601' expr:title='data:post.date.iso8601'>
<a class='nav-link'><span class='fa fa-clock'/> <data:post.date/></a>
</time>
</li>
<li class='nav-item'>
<b:if cond='data:post.allowComments'>
<a class='nav-link' expr:href='data:post.commentsUrl'><span class='fa fa-comment'/> <b:message name='messages.numberOfComments'><b:param expr:value='data:post.numberOfComments' name='numComments'/></b:message></a>
</b:if>
</li>
</ul>
</div>
<div class="card-body">
<p>Your content..</p>
</div>
</div>

If you have questions or issues implementing this on your blog, feel free to post them in the comment section below. Lastly, if you find this post helpful to you, kindly consider sharing it on your social pages.

Turn Your Website
into a Lead-Generating Machine

Webcopy, Designs and SEO are King, Queen, and Knight respectively. And how well you use them together creates a user experience that either drives people away or makes them click the "buy" button.

Copywriting

Want to make your offers irresistible? We write conversion-optimized copy for small and medium brands, digital agencies and online stores.

Custom Web Design

Creating a branded website can be the best thing you do for your business. Branding can help you figure out what and how to communicate your company's story.

Skyrocket Your Traffic

For more than 20 years, we've been providing SEO solutions for businesses wanting to expand their online presence, increase leads and grow their revenue.

Contact

Contact Us

About us

Archie Webmaker is a digital branding agency with a magical touch on brand identity, brand strategy, and marketing to drive business success.

Call Us

Email Us

archie@archiewebmaker.com
archiewebmaker@gmail.com

Working Hours

Mon - Fri: 9AM to 5PM
Saturday: 9AM to 1PM