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.