Free Bootstrap Flat UI Blogger Template

Free Flat UI Bootstrap Responsive Blogger Template
After getting inspired of Flat UI framework which is developed using the Bootstrap. I thought of implementing the same elegant concept into blogger template. This blogger template is made responsive and customized to support most of the components of Flat UI and Bootstrap. You can find the widget codes with Flat UI in this post.
Custom codes are available for Search widget, Contact Form widget and Subscribe to Email widget to make it look like the Flat UI. Widget code for Navigation Menu with Drop down Menu and Search Box is also provided.
Free Flat UI Responsive Bootstrap Blogger Template

Navigation Menu

You can add Responsive Navigation Menu by adding the below codes in the Widget Area.

Flat UI Bootstrap Responsive Navigation Menu for Blogger

<nav class="navbar navbar-inverse navbar-embossed" role="navigation">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-01">
<span class="sr-only">Toggle navigation</span>
</button>
<div class="collapse navbar-collapse" id="navbar-collapse-01">
<ul class="nav navbar-nav navbar-left">
<li><a href="/index.html">Home</a></li>
<li><a href="/p/components.html">Components</a></li>
<li><a href="http://www.techirsh.com">Widgets</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Catagory<b class="caret"></b></a>
<span class="dropdown-arrow"></span>
<ul class="dropdown-menu">
<li><a href="/search/label/Android">Android</a></li>
<li><a href="/search/label/Apple">Apple</a></li>
<li><a href="/Samsung">Samsung</a></li>
<li class="divider"></li>
<li><a href="/search">Show All</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Authors<span class="navbar-new">3</span></a>
<ul class="dropdown-menu">
<li><a href="#">Author One</a></li>
<li><a href="#">Author Two</a></li>
<li><a href="#">Author Three</a></li>
</ul>
</li>
<li><a href="#fakelink">About Us</a></li>
</ul>
<form class="navbar-form navbar-right" action="/search" role="search">
<div class="form-group">
<div class="input-group">
<input class="form-control" id="navbarInput-01" type="search" placeholder="Search" name="q"/>
<span class="input-group-btn">
<button type="submit" class="btn"><span class="fui-search"></span></button>
</span>
</div>
</div>
</form>
</div></nav>

Contact Form

Since blogger supports contact form officially we dont have to depend on any third party contact form providers. To make the look and feel of default contact form of blogger to Flat UI style i have customized the contact form that works anywhere in the widget of even in the blog page/post

Free Stylish Contact Form for Blogger Official

<form name="contact-form">
<div class="form-group">
<input type="text" class="form-control login-field" value="" placeholder="Name" id="ContactForm1_contact-form-name" name="name"/>
<span class="input-icon fui-user"></span>
</div>
<div class="form-group">
<input type="text" class="form-control login-field" value="" placeholder="Email" id="ContactForm1_contact-form-email" name="email"/>
<span class="input-icon fui-mail"></span>
</div>
<div class="form-group">
<textarea type="text" class="form-control login-field" value="" placeholder="Message" id="ContactForm1_contact-form-email-message" name="email-message"/></textarea>
<span class="input-icon fui-chat"></span>
</div>
<input class="btn btn-primary btn-lg btn-block" id="ContactForm1_contact-form-submit" type="button" value="Send" />
<p class="contact-form-error-message" id="ContactForm1_contact-form-error-message"></p>
<p class="contact-form-success-message" id="ContactForm1_contact-form-success-message"></p>
</form> 

Search Box 

You can add search box to the blog using the below code

Stylish Flat UI Custom Search Form for Blogger

<form id="searchthis" action="/search" style="display:inline;" method="get">
<div class="form-group">
<div class="input-group">
<input autocomplete="on" class="form-control" name="q" title="search" placeholder="Search" id="search-query-3" />
<span class="input-group-btn">
<button type="submit" class="btn"><span class="fui-search"></span></button>
</span>
</div>
</div>
</form>

Email Subscription Form

You can add Email Subscription Form to blogger using the below code. Make sure you change the text techirsh highlighted in red with your feedburner id.

Email Subscription Form for Blogger

<form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open(&quot;http://feedburner.google.com/fb/a/mailverify?uri=techirsh&quot;, &quot;popupwindow&quot;, &quot;scrollbars=yes,width=550,height=520&quot;); return true" target="popupwindow">
<div class="form-group">
<input type="text" class="form-control login-field" value="" name="email" placeholder="Email address..." name="email-message"/>
<span class="input-icon fui-mail"></span>
</div>
<div class="form-group">
<input class="btn btn-primary btn-lg btn-block" type="submit" value="Subscribe" />
<input name="uri" type="hidden" value="techirsh" />
<input name="loc" type="hidden" value="en_US" />
</div></form> 

Download Preview