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="flex-container">
	<div class="flex-row">
    	<h1 class="brandname">Hello</h1>
	</div>
	<div class="flex-row">
	    <form>
	        <!-- <div class="search centered"> -->
	        <div class="search">
	        	<div class="input-container">
	        		<input type="text" name="query" class="searchbar" />
		        	<button type="submit" class="search-button">Search</button>
		        </div>
	        </div>

	    </form>
	</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');

.flex-container{
		display: flex;
		display: -webkit-flex;
		align-items: center;
		-webkit-align-items: center;
		justify-content: center;
		-webkit-justify-content: center;
		-webkit-flex-direction: row;
		flex-direction: row;
		flex-wrap: wrap;
		-webkit-flex-wrap: wrap;
		
	}

	.flex-row {
		display: flex;
		display: -webkit-flex;
		justify-content: center;
		-webkit-justify-content: center;
		flex: 1;
		-webkit-flex: 1;
	}

	form{
		display: flex;
		display: -webkit-flex;
		justify-content: center;
		-webkit-justify-content: center;
		flex: 1;
		-webkit-flex: 1;
	}

	.search{
		display: flex;
		display: -webkit-flex;
		flex: 0 1 455px;
		-webkit-flex: 0 1 455px;
	}

	.input-container{
		display: flex;
		display: -webkit-flex;
		flex: 1;
		-webkit-flex: 1;
		min-width: 0;
	}

	.searchbar{
		flex: 1;
		-webkit-flex: 1;
		min-width: 0;
	}


	.flex-container > .flex-row:first-child{
		flex: 0 1 100%;
		-webkit-flex: 0 1 100%;
	}

	.brandname {
	  position: relative;
	  font-size: 500%;
	  font-family: 'Lato', sans-serif;
	  color: #1f0e3e;
	  text-align: center;
	  margin-bottom: 30px;
	  margin-top: 5%;
	}
	body {
	    margin: 10px;
	}
	
	.input-container{
	    /*float: left;*/
	    /*display: block;*/
	    flex: 1;
	    -webkit-flex: 1;
	    outline-style: solid;
    	outline-color: #e3e3e3;
    	outline-width: 1px;
    }

    .searchbar{
    	margin-left: 5px;
    }

    .search button {
	    background-color: rgba(152,111,165,0.38);
	    background-repeat:no-repeat;
	    border: none;
	    cursor:pointer;
	    border-radius: 0px;
	    /*overflow: hidden;*/
	    outline-width: 1px;
	    outline-style: solid;
	    outline-color: #e3e3e3;
	    color: white;
	}

	.search input{
		outline-width: 0px;
    outline-style: none;
    border-width: 0px;
	}

JavaScript

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