Bootstrap 3 Template

This is a simple Twitter Bootstrap 3 template. You can fork it to get a ready to use Bootstrap 3 fiddle.

HTML

<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<div class="search">
	<div class="input-container">
		<input type="text" name="query" class="searchbar" placeholder="What do you want to learn about?" />
    	<button type="submit" class="search-button">Search</button>
    </div>
</div>

CSS

/* Latest compiled and minified CSS included as External Resource*/

/* Optional theme */
@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');

body {
    margin: 10px;
     box-sizing:border-box;
}

input{
 
    padding: 0;
    border: 0;
  }

  .is-focused{
    
   box-shadow: 0  0 0 3px #986fa5;
  }

  input:focus{
    outline-width: 0px;
  }
  
  .search * {
		height: 35px;

	}

	/*.search-button{
		position: absolute;
	}*/

	.searchbar {
		width: 450px;
	}

JavaScript

$('input').focus(
	function(){
	    $('.input-container').addClass('is-focused');
	}).blur(
    function(){
        $('.input-container').removeClass('is-focused');
    });