Bootstrap 3 Template

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

by chadh89

HTML

<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<nav class="navbar navbar-default navbar-fixed-top">
    <div class="container-fluid">

        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                    data-target="#navbar-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand hidden-xs" href="/">Title</a>
			
			<form class="navbar-form" role="search">
				<div class="form-group" style="display: inline">
					<div class="input-group" style="display: table">
						<input type="text" class="form-control" placeholder="Search for..."/>
						<span class="clear hidden-sm hidden-md hidden-lg"></span>
						<span class="input-group-btn hidden-xs" style="width: 1%">
							<button class="btn btn-default" type="button">Go!</button>
						</span>
					</div>
				</div>
			</form>
        </div>

		<div class="collapse navbar-collapse" id="navbar-collapse">

			<ul class="nav navbar-nav navbar-right">
				<li><a href="/webpage1">Webpage 1</a></li>
				<li><a href="/webpage2">Webpage 2</a></li>
			</ul>

		</div>
	</div>
</nav>

CSS

.navbar .navbar-form {
  padding: 0;
  margin-right: 0;
  margin-left: 0;
  border: 0;
  -webkit-box-shadow: none;
  box-shadow: none;
}

.clear {
  width: 1%;
  display: table-column;
}

@media(max-width:767px) {

  .navbar .navbar-form {
    padding-left: 15px;
    padding-right: 0;
  }

  .navbar .navbar-form .input-group {
    padding-right: 15px;
  }

  .navbar .navbar-form .form-control {
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
  }
}

@media(min-width:768px) {
	.container-fluid {
		display: flex;
	}
	.navbar-header {
		flex: 1;
	}
}