Bootstrap 3 forms inline hidden labels (Interactive Example)

<!DOCTYPE html>
<title>My Example</title>


<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<div class="container-fluid">
		
<form action="/html/tags/html_form_tag_action.cfm" class="form-inline">
<div class="form-group">
<label for="first_name" class="sr-only">First Name</label>
<input type="text" class="form-control" id="first_name" name="first_name" placeholder="First Name">
</div>
<div class="form-group">
<label for="last_name" class="sr-only">Last Name</label>
<input type="text" class="form-control" id="last_name" name="last_name" placeholder="Last Name">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>

</div>
		

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>


<script>
// Initialize tooltip component
$(function () {
  $('[data-toggle="tooltip"]').tooltip()
})

// Initialize popover component
$(function () {
  $('[data-toggle="popover"]').popover()
})
</script>