<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<div class="container">
<div class="row">
<article class="span4">
<h3 class="extra">Search</h3>
<form id="search" action="search.php" method="GET" accept-charset="utf-8">
<div class="clearfix">
<input type="text" name="s" onblur="if(this.value=='') this.value=''" onfocus="if(this.value =='' ) this.value=''">
<a href="#" onclick="document.getElementById('search').submit()" class="btn btn-1">Search</a> </div>
</form>
<h3>Categories</h3>
<ul class="list extra extra1">
<li><a href="#">Vonsequat</a></li>
<li><a href="#">Utdminim veniam</a></li>
<li><a href="#">Qullamcorper</a></li>
<li><a href="#">Suscipitlobortis</a></li>
<li><a href="#">Comnsequat</a></li>
<li><a href="#">Duendrerit</a></li>
<li><a href="#">Facilisis</a></li>
<li><a href="#">Luptatum</a></li>
<li class="last"><a href="#">Qui blandit</a></li>
</ul>
<h3>Archive</h3>
<div class="wrapper">
<ul class="list extra2 list-pad ">
<li><a href="#">May 2012</a></li>
<li><a href="#">April 2012</a></li>
<li><a href="#">March 2012</a></li>
<li><a href="#">February 2012</a></li>
<li><a href="#">January 2012</a></li>
<li class="last"><a href="#">December 2011</a></li>
</ul>
<ul class="list extra2">