Bootstrap 3 Skeleton

This is a simple Bootstrap skeleton. You can fork it to get a ready to use Bootstrap fiddle.

by vikaskbh

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.0/bootstrap.min.js"></script>
<div class="code_example">
<label for="">Text to Select</label>
    <input type="text" class="form-control" id="text_to_select" placeholder="PYTHON" /> 
    <input type="button" value="Select" id="select_option" class="btn btn-primary" />

<br/>
(should be CAPS as visible in dropdown and not its value)
<br/>
<select name="languages" id="languages6" >
	<option value="c">C</option>
	<option value="c++">C++</option>
	<option value="php">PHP</option>
	<option value="perl">PERL</option>
	<option value="ruby">RUBY</option>
	<option value="python">PYTHON</option>
	<option value="go">GO</option>
</select>

</div>

CSS

@import url('http://getbootstrap.com/dist/css/bootstrap.css');
@import url('http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');

input[type=text]{
	width: 300px;
	display:inline;
	margin-left: 10px;
}
select{
	font-size:24px;
	height: 30px;
	line-height: 30px;
	margin: 10px;
	min-width:300px;
}
.code_example{
	padding-bottom: 50px;
	border-bottom: 1px solid #EEE;
}
h1,h2,h3,h4{
font-weight:bold;
padding-left: 10px;
}
button{
font-family:arial,sans-serif !important;
}
input[type='button']{
margin-left: 10px;
}
body{
    overflow:hidden;
}

JavaScript

(function($){
	$('#select_option').on('click',function(){

		var text_to_select = $('#text_to_select').val();

		if($.trim(text_to_select) == "") return;

		$("#languages6 option").each(function(k,v){

			if($(v).filter('option').text() == text_to_select) {

				$('#languages6').val($(v).filter('option').val());
			}
		});


	});
})(jQuery);