Bootstrap

Bootstrap with clickabele buttons

by Arie Kant

HTML

<script src="maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<div class="row">
    <div class="col-sm-4 col-md-4 col-lg-4"> 
    	<button type="button" data-value="one" id="one" class="btn btn-primary btn-lg col-xs-12 col-sm-12 col-md-12 col-lg-12">One</button>
    </div>
	<div class="col-sm-4 col-md-4 col-lg-4">
		<button type="button" data-value="two" id="two" class="btn btn-primary btn-lg col-xs-12 col-sm-12 col-md-12 col-lg-12 active">Two</button>
    </div>
    <div class="col-sm-4 col-md-4 col-lg-4">
		<button type="button" data-value="three" id="three" class="btn btn-primary btn-lg col-xs-12 col-sm-12 col-md-12 col-lg-12">Three</button>
    </div>                       
</div>

CSS

@import url('http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css');

JavaScript

$( document ).ready(function() {
	
    $('.checkit .btn').click(function () {
  	    $(this).parent().find('input').val($(this).data("value"));
	});
	
    $('#one').on('click', function () {
  	    alert('one is clicked');
    });
	
	$('#two').on('click', function () {
  	    alert('two is clicked');
    });
	
	$('#three').on('click', function () {
  	    alert('three is clicked');
    });	
	
});